<template>
  <div style="padding: 8px 20px 20px;">
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(val,key, index) of linuxSystem" :title="val.title" :name="index">
        <div class="mt10 w100">
          <div class="w100 plr-20" style="font-size: 14px">
            <div v-for="(item,key,index) of val.formList" class="w50 disInlineBlock p10">
              <span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val.formModel[key]}}</span>
            </div>
          </div>
          <div v-for="item of val.echartList" 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>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
  import EchartsLine from "@/components/echartsList/line.vue";
  export default {
    name: 'SecondAutoFind',
    components: {EchartsLine},
    data() {
      return {
        activeNames: [0, 1,2,3,4],
        echartData: {
          title: 'GE1/0/1的丢包数',
          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: '出站丢包',
              data: [220, 182, 191, 234, 290, 330, 310]
            }]
          }
        },
        linuxSystem: {
          net: {
            title: '网络端口GE1/0/1',
            formList: {name: '端口名称', type: '端口类型', status: '端口状态', mbps: '端口适配速率(Mbps)'},
            formModel: {name: 'GE1/0/1', type: 'ETHNET', status: 'up', mbps: '1000'},
            config: {labelWidth: '160px', buttonGroup: []},
            echartFors: [
              {title: 'GE1/0/1的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
              {title: 'GE1/0/1的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
              {title: 'GE1/0/1的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
              {title: 'GE1/0/1的网络速率(bites/sec)', oneName: '端口实时接收速率(bites/sec)', twoName: '端口实时发送速率(bites/sec)'},
            ],
            echartList: []
          },
          light: {
            title: '光模块sabc',
            formList: {name: '光模块端口名称'},
            formModel: {name: 'sabc'},
            config: {buttonGroup: []},
            echartFors: [
              {title: 'sabc的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
              {title: 'sabc的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
            ],
            echartList: []
          },
          mpu: {
            title: 'MPU1',
            formList: {name: 'MPU名称', system: 'MPU的操作系统'},
            formModel: {name: 'MPU1', system: 'xxxx'},
            config: {buttonGroup: []},
            echartFors: [
              {title: 'MPU1的CPU使用率(%)', oneName: 'CPU利用率'},
              {title: 'MPU1的内存使用率(%)', oneName: '内存利用率'},
              {title: 'MPU1的温度(°C)', oneName: '温度'},
            ],
            echartList: []
          },
          pw: {
            title: '电源PW1',
            formList: {name: '电源名称', status: '电源状态'},
            formModel: {name: 'PW1', status: '正在供电'},
            config: {buttonGroup: []},
            echartFors: [
              {title: '电源电流(mA)', oneName: '电源电流'},
              {title: '电源电压(mV)', oneName: '电源电压'}
            ],
            echartList: []
          },
          fan: {
            title: '风扇FAN1',
            formList: {name: '风扇名称', status: '风扇状态'},
            formModel: {name: 'FAN1', status: 'xxx'},
            config: {buttonGroup: []},
            echartFors: [],
            echartList: []
          }
        },
      }
    },
    created() {
      // this.$nextTick(() => {
      this.secondList();
      // });
    },
    methods: {
      deepClone(obj) {
        return JSON.parse(JSON.stringify(obj))
      },
      // 第二节点 自动发现项
      secondList(){
        Object.keys(this.linuxSystem).forEach((key,index) => {
          // 用可选链简化空值判断，避免报错
          const targetModule = this.linuxSystem[key];
          if (!targetModule?.echartFors?.length) return; // 无图表模板则跳过
          targetModule.echartFors.forEach(item => {
            // 深拷贝基础配置，确保每个图表配置独立
            const chartData = this.deepClone(this.echartData);
            // 3. 替换图表标题（模板有标题则用模板，无则保留基础配置的标题）
            if (item.title) chartData.title = item.title;
            if (item.twoName) {
              chartData.dataVal.dataList[1].name = item.twoName;
            } else {
              chartData.dataVal.dataList.splice(1,1);
            }
            if (item.oneName) {
              chartData.dataVal.dataList[0].name = item.oneName;
            } else {
              chartData.dataVal.dataList.splice(0,1);
            }
            this.linuxSystem[key].echartList.push(chartData);
          });
        });
      },
      chartDataEvent(valData, funcName) {
        // 检查函数是否存在，避免报错
        if (typeof this[funcName] === 'function') {
          // 调用实际函数，并传递参数（如选中的值、当前项）
          // this[funcName]({startTime: valData[0], endTime: valData[1]});
        } else {
          console.warn(`函数 ${funcName} 未定义`);
        }
      }
    }
  }
</script>
<style scoped>
  ::v-deep .el-collapse-item__header {
    background-color: #d4e3fc!important;
    /*color: #fff!important;*/
    padding-left: 20px;
    font-size: 1rem;
  }
</style>
