<template>
  <div style="padding: 8px 20px 20px;">
    <div class="w100 plr-20" style="font-size: 14px">
      <div v-for="(item, key, index) of formListTow" class="w50 disInlineBlock p10">
        <span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{formValue[key]}}</span>
      </div>
    </div>
    <div v-for="item of resultData" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
      <EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
    </div>
  </div>
</template>

<script setup>
  import EchartsLine from "@/components/echartsList/line.vue";
  export default {
    name: 'FirstMonitor',
    components: {EchartsLine},
    data() {
      return {
        formListTow: [],
        formValue: {remarks: 'aaa', address: 'aaa', objId: 'aaa', macAddress: 'aaa',
          time: 'aaa', sbName: 'aaa', msg: 'aaa', versions: 'aaa', sysName: 'aaa'},
        paramsData: {},
        resultData: [{
          title: '设备CPU使用率(%)',
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
            gridTop: '35%',
            legend: {top: '15%', left: '10%'},
            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
            dataList: [{
              name: '设备CPU使用率',
              data: [120, 132, 101, 134, 90, 230, 210],
            }]
          }
        },{
          title: '设备内存使用率(%)',
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
            gridTop: '35%',
            legend: {top: '15%', left: '10%'},
            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
            dataList: [{
              name: '设备内存使用率',
              data: [120, 132, 101, 134, 90, 230, 210],
            },{
              name: 'CPU运行用户进程所花费的时间',
              data: [220, 182, 191, 234, 290, 330, 310]
            }]
          }
        },{
          title: '功率',
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
            gridTop: '35%',
            legend: {top: '15%', left: '10%'},
            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
            dataList: [{
              name: '系统平均功率(mW)',
              data: [120, 132, 101, 134, 90, 230, 210],
            },{
              name: '系统实时功率(mW)',
              data: [220, 182, 191, 234, 290, 330, 310]
            }]
          }
        }],
      }
    },
    created() {
      // this.paramsData = this.$route && this.$route.query;
      this.fnFormList();
      // this.switchList();
    },
    methods: {
      // formList集合
      fnFormList() {
        let formFirst = {
          remarks: '系统描述', address: '系统位置', objId: '系统Object ID', macAddress: '系统MAC地址',
          time: '系统运行时间', sbName: '设备名称', msg: '系统联系信息', versions: '设备软件版本', sysName: '系统名称'
        };
        this.formListTow = {...formFirst};
      },
      chartDataEvent(valData, funcName) {
        // 检查函数是否存在，避免报错
        if (typeof this[funcName] === 'function') {
          // 调用实际函数，并传递参数（如选中的值、当前项）
          // this[funcName]({startTime: valData[0], endTime: valData[1]});
        } else {
          console.warn(`函数 ${funcName} 未定义`);
        }
      },
    }
  }
</script>
