<template>
  <div style="padding: 8px 20px 20px;">
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(val,index) of linuxSystem" :title="val.title" :name="index">
        <div class="mt10 w100">
<!--          <Form :formList="val.formList" :ruleFormData="val.formModel" :config="val.config" @fnClick="callback"></Form>-->
          <div class="w100 plr-20" style="font-size: 14px">
            <div v-for="item of val.formList" class="w50 disInlineBlock p10">
              <span class="w50 disInlineBlock">{{item.name}}</span><span class="w50">{{item.value}}</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" :sideIcon="{iconName: [{name: '添加到首页',type: 'add'}]}" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item)"></EchartsLine>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
  import EchartsLine from "@/components/echartsList/line.vue";
  export default {
    name: 'ResMonitorDigitalAutoFind',
    components: {EchartsLine},
    data() {
      return {
        activeNames: [0, 1],
        linuxSystem: [],
      }
    },
    created() {
      // this.$nextTick(() => {
        this.secondList();
      // });
    },
    methods: {
      // 第二节点 自动发现项
      secondList(){
        this.linuxSystem = [{
          title: '网络端口GE1/0/1',
          formList: [
            {name: '端口名称', value: 'aaa'},
            {name: '端口类型', value: 'aaa'},
            {name: '端口状态', value: 'aaa'},
            {name: '端口适配速率(Mbps)', value: 'aaa'},
          ],
          formModel: {},
          config: {labelWidth: '160px', buttonGroup: []},
          echartList: [{
            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: '光模块sabc',
          formList: [{name: '光模块端口名称', value: 'aaa'}],
          formModel: {},
          config: {buttonGroup: []},
          echartList: [{
            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]
              }]
            }
          }]
        }];
      },
      chartDataEvent(val, itemVal) {
        console.log('val===',val);
      }
    }
  }
</script>
<style scoped>
  ::v-deep .el-collapse-item__header {
    background-color: #d4e3fc!important;
    /*color: #fff!important;*/
    padding-left: 20px;
    font-size: 1rem;
  }
</style>
