<template>
  <div class="app-container" style="padding: 8px 10px 20px;" @scroll="handleScroll">
    <!--  header box  -->
    <div>
      <div v-for="item of headerList" class="headerBox" :style="`width: ${100/headerList.length}%`">
        <div class="boxChild w100 h100">
          <div class="disInlineBlock w80" style="padding-left: 10px;">
            <div>{{item.name}}</div>
            <div v-if="item.num || item.num === 0" class="mt20" style="font-size: 2rem;">{{item.num}}{{item.unit}}</div>
            <div v-else style="margin-top: 40px;font-size: 14px;color: #f00;">暂无数据</div>
          </div>
          <div class="disInlineBlock w20 " style="vertical-align: top;">
            <img class="w100" :src="item.imgUrl" alt="">
          </div>
        </div>
      </div>
    </div>
    <!--  form  -->
    <div class="mt20 plr-10">
      <Form :formList="formList" :ruleFormData="ruleForm" :config=" {labelWidth: '92px', buttonGroup: []}" @fnClick="callback">
        <!--   SN     -->
        <template #tempClient="{field, model, formModel}">
          {{model}}
          <div class="disInlineBlock" style="margin: 0 10px;">
            <dict-tag class="disInlineBlock ml10 mr10" :options="dict.type.rm_register_status" :value="formModel.registrationStatus"/>
            <dict-tag class="disInlineBlock" :options="dict.type.rm_register_online_state" :value="formModel.onlineStatus"/>
          </div>
          <div class="disInlineBlock"  style="margin: 0 10px;">
            <el-button style="background-color: #169bd5;border-color: #169bd5;" type="primary" size="mini" @click="outProvinceFlow(formModel)">查看出省流量</el-button>
          </div>
          <el-tag class="disInlineBlock dynamic-tag ml5" v-for="(tag, tagIndex) in formModel.remark" :closable="false" :disable-transitions="false">
            {{ tag }}
          </el-tag>
        </template>
        <!--    ip    -->
        <template #tempIp1public="{field, model, formModel}">
          {{model}}
          <div class="disInlineBlock" style="color: #0052d9;">
            <span class="disInlineBlock" style="margin: 0 20px;">{{formModel.ip1Province}}</span>
            <span>{{formModel.ip1Isp}}</span>
          </div>
        </template>
        <!--    不同label宽度    -->
        <template #dynamicLabelWidth="{field, model, formModel}">
         <div class="disInlineBlock" style="padding-right: 12px;color: #C0C4CC;font-weight: 700;" :style="field.inlineSty">{{field.label}}：</div>
          {{model}}
        </template>
        <!--    最新版本号    -->
        <template #tempMaxVersion="{ field, model, formModel }">
          {{model}}
          <template v-if="formModel['maxAgentVersion']">
            <div v-if="!compareVersions(model,formModel['maxAgentVersion'])" class="disInlineBlock ml10">
              最新版本({{formModel.maxAgentVersion}})
              <el-button v-if="newVersionType" class="ml10" style="background-color: #169bd5;border-color: #169bd5;" type="primary" size="mini" @click="upMaxVersion(formModel)">升级到最新</el-button>
            </div>
          </template>
        </template>
      </Form>
    </div>
    <!--  tab___echarts/form/table  -->
    <div class="mt20 plr-10">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <!--    网卡流量监控     -->
        <el-tab-pane label="网卡流量监控" name="网卡流量监控">
          <serRegisTabsChart v-if="activeName === '网卡流量监控'" :key="activeName" :interCartList="interCartList" :activeName="activeName" :modelVal="systemModel" :chartModelList="mapDataList['网卡流量监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
        </el-tab-pane>
        <!--    硬盘设备监控     -->
        <el-tab-pane label="硬盘设备监控" name="硬盘设备监控">
          <serRegisTable v-if="activeName === '硬盘设备监控'" :key="activeName" :activeName="activeName" :clientId="paramsData.clientId" :modelVal="mapDataList['硬盘设备监控']" @diskTableData="fnDiskTableData('硬盘设备监控')"></serRegisTable>
<!--          <serRegisTabsChart ref="layoutChart" v-if="activeName === '硬盘设备监控'" :key="activeName" :activeName="activeName" :chartModelList="mapDataList['硬盘设备监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent" @lazyLoad="fnLazyLoad"></serRegisTabsChart>-->
        </el-tab-pane>
        <!--    挂载文件系统监控     -->
        <el-tab-pane label="挂载文件系统监控" name="挂载文件系统监控">
          <serRegisTabsChart ref="layoutChart" v-if="activeName === '挂载文件系统监控'" :key="activeName" :activeName="activeName" :chartModelList="mapDataList['挂载文件系统监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent" @lazyLoad="fnLazyLoad"></serRegisTabsChart>
        </el-tab-pane>
        <!--    网卡信息     -->
        <el-tab-pane label="网卡信息" name="网卡信息">
          <serRegisTable v-if="activeName === '网卡信息'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['网卡信息']"></serRegisTable>
        </el-tab-pane>
        <!--    虚拟网卡信息     -->
        <el-tab-pane label="虚拟网卡信息" name="虚拟网卡信息">
          <serRegisTable v-if="activeName === '虚拟网卡信息'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['虚拟网卡信息']"></serRegisTable>
        </el-tab-pane>
        <!--    收益查看     -->
        <el-tab-pane label="收益查看" name="收益查看">
          <serRegisTable v-if="activeName === '收益查看'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['收益查看']" @fnPaging="fnPaging"></serRegisTable>
        </el-tab-pane>
        <!--    FRP信息     -->
        <el-tab-pane label="FRP信息" name="FRP信息">
          <serRegisFormOther v-if="activeName === 'FRP信息'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['FRP信息']"></serRegisFormOther>
        </el-tab-pane>
        <!--    PPPoE配置     -->
        <el-tab-pane label="PPPoE配置" name="PPPoE配置">
          <PPPoEConfig v-if="activeName === 'PPPoE配置'" :key="activeName" :modelVal="mapDataList['PPPoE配置']" @poeDataChange="fnPoeDataChange"></PPPoEConfig>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import Form from '@/components/form/index.vue';
  import cpuUseImg from '@/assets/images/cpuUse.svg';
  import bandWImg from '@/assets/images/bandwidth.svg';
  import cpuImg from '@/assets/images/cpu.svg';
  import memoryImg from '@/assets/images/memory.svg';
  import diskSizeImg from '@/assets/images/diskSize.png';
  import {getHandle, trafficSerDetails, agentIsNew, virNetInterfaceChild, frpMsgByClient, getPppoeConfig, updateAgentManage, postInterFaceName,
    mountNameList, diskNameList, diskAllNames, trafficEcharts, spaceRate, speedEcharts, trafficIPv4Echarts, trafficIPv6Echarts,cpuTemperatureChartData,
    cpuLoadData, memoryUtilization, usedSpacechartsData, networkList, pingDroppedEchars, getAlarmLogServerMsg} from "@/api/disRevenue/resource";
  import {listBandWidth} from "@/api/disRevenue/earnManage";
  import serRegisFormOther from './formOther';
  import serRegisTable from './table';
  import serRegisTabsChart from './tabsChart';
  import PPPoEConfig from "./PPPoEConfig";
  export default {
    name: "server_register_details",
    components: {PPPoEConfig, Form, serRegisFormOther, serRegisTabsChart, serRegisTable},
    dicts: ['rm_register_status','rm_register_online_state'],
    data() {
      return {
        mapDataList: {},
        ruleForm: {},
        formList: [],
        paramsData: {},
        systemModel: {},
        headerList: [
          {name: 'CPU使用率(%)', num: 0, imgUrl: cpuUseImg},
          {name: '带宽', num: 0, unit: 'Mbps', imgUrl: bandWImg},
          {name: 'CPU', num: 0, unit: '核', imgUrl: cpuImg},
          {name: '内存', num: 0, unit: 'G', imgUrl: memoryImg},
          {name: '磁盘容量', num: 0, imgUrl: diskSizeImg},
        ],
        activeName: '网卡流量监控',
        echartList: {},
        linuxSystem: {
          mount: {
            title: '挂载文件系统',
            type: 'mount',
            echartFors: [
              {title: '的空间利用率(%)', oneName: '利用率'},
            ],
            echartList: [null]
          },
          net: {
            title: '网络接口interface eth0',
            type: 'net',
            echartFors: [
              {title: '的流量', oneName: '出站流量', twoName: '入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
              {title: 'PING丢包率', oneName: 'ping丢包率'},
              {title: '的IPv4流量', oneName: 'IPv4出站流量', twoName: 'IPv4入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
              {title: '的IPv6流量', oneName: 'IPv6出站流量', twoName: 'IPv6入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
            ],
            echartList: [null, null]
          },
          disk: {
            title: '硬盘',
            type: 'disk',
            echartFors: [
              {title: '的读写速率(KB/s)', oneName: '磁盘写入速率', twoName: '磁盘读取速率'}
            ],
            echartList: [null]
          },
          dock: {
            title: '容器',
            type: 'dock',
            echartFors: [
              {title: '的CPU利用率(%)', oneName: 'CPU利用率'},
              {title: '的内存利用率(%)', oneName: '内存利用率'},
            ],
            echartList: [null, null, null]
          },
        },
        tabsListData: {},
        resultData: [
          {
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              hiddenTime: true,
              yAxisName: ' ',
              gridTop: '35%',
              gridLeft: '40px',
              gridRight: '40px',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: 'CPU使用率', data: []},
                {name: 'CPU的1分钟负载', data: []},
                {name: 'CPU的5分钟负载', data: []},
                {name: 'CPU的15分钟负载', data: []},
              ]
            }
          },{
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              hiddenTime: true,
              yAxisName: ' ',
              gridTop: '35%',
              gridLeft: '40px',
              gridRight: '40px',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: '内存使用率', data: []}
              ]
            }
          }
        ],
        echartData: {
          title: ' ',
          dataVal: {
            hiddenTime: true,
            titleVal: {textAlign: 'left', left: '1%'},
            yAxisName: ' ',
            gridTop: '30%',
            gridLeft: '40px',
            gridRight: '40px',
            legend: {top: '15%', left: '90px'},
            lineXData: [],
            dataList: [{
              name: ' ',
              data: [],
            }]
          }
        },
        activeShowList: [],
        interCartList: {},
        eventKeyName: {},
        scrollTimeout: '',
        newVersionType: true,
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.id) {
        this.getFormDataList(this.paramsData.id);
      }
      if (this.paramsData && this.paramsData.target) {
        this.activeName = this.paramsData.target;
      }
      this.fnFormList();
      this.handleClick();
    },
    methods: {
      handleScroll() {
        if (this.$refs.layoutChart && !this.scrollTimeout) {
          this.scrollTimeout = setTimeout(() => {
            this.$refs.layoutChart.scrollContent();
            this.scrollTimeout = null;
          }, 500); // 500ms 节流间隔
        }
      },
      fnFormList(objVal) {
        this.formList = [{
          config: {title: '',readonly: true},
          controls: {
            id: {label: 'ID',hidden: true},
            clientId: {label: 'SN', span: 24, slotName: 'tempClient'},
            // registrationStatus: {label: '', span: 3, type: 'select', options: this.dict.type.rm_register_status},
            // onlineStatus: {label: '', span: 3, type: 'select', options: this.dict.type.rm_register_online_state},
            // remark: {label: '', span: 14, type: 'dynamicTags'},
            ip1PublicIp: {label: 'IP', span: 24, slotName: 'tempIp1public'},
          }
          }, {
          config: {title: '标识信息',readonly: true},
          controls: {
            id: {label: 'ID',hidden: true},
            businessName: {label: '业务名称', span: 8, type: 'input'},
            logicalNodeId: {label: '逻辑节点标识', span: 4, inlineSty: 'margin-left: -18px;', labelWidthNull: true, slotName: 'dynamicLabelWidth'},
            hardwareSn: {label: '设备SN', span: 12, type: 'input'},
            machineCode: {label: '金山machineCode', span: 24, labelWidthNull: true, slotName: 'dynamicLabelWidth'},
          }
          },{
            config: {title: '时间信息',readonly: true},
            controls: {
              id: {label: 'ID',hidden: true},
              createTime: {label: '注册时间', span: 8, type: 'input'},
              onboardTime: {label: '上机时间', span: 8, type: 'input'},
            }
          },{
            config: {title: '其他',readonly: true},
            controls: {
              id: {label: 'ID',hidden: true},
              agentVersion: {label: 'agent版本', span: 8, slotName: 'tempMaxVersion'},
              heartbeatInterval: {label: '心跳间隔(s)', span: 6, type: 'input'},
              heartbeatCount: {label: '心跳次数', span: 6, type: 'input'},
            }
        }];
      },
      // 获取详情
      getFormDataList(id) {
        let params = id;
        let fnName = getHandle;
        if (this.paramsData && this.paramsData.type === 'alarmLog') {
          params = {clientId: this.paramsData.id};
          fnName = getAlarmLogServerMsg;
        }
        fnName(params).then(val => {
          if (val && val.data) {
            this.headerFourData(val.data);
            val.data['remark'] = val.data && val.data['remark'] ? val.data['remark'].split(',') : null;
            this.ruleForm = val && val.data;
          }
        }).catch(() => {
          this.$modal.msgError("操作失败")
        });
      },
      // 顶部四块信息
      headerFourData(data) {
        this.headerList[1].num = data.reportedBandwidth;
        trafficSerDetails({clientId: data.clientId, name: data.ip1InterfaceName}).then(res => {
          if (res && res.data) {
            this.headerList[0].num = res.data.cpuUti;
            this.headerList[2].num = res.data.cpuCores;
            this.headerList[3].num = res.data.memTotalSize;
            this.headerList[4].num = res.data.diskTotal;
          }
        });
      },
      // 判断版本是否相同
      compareVersions(targetVer, version2) {
        if (targetVer && version2) {
          const v1 = targetVer.split('.').map(Number);
          const v2 = version2.split('.').map(Number);

          const maxLength = Math.max(v1.length, v2.length);

          for (let i = 0; i < maxLength; i++) {
            const num1 = v1[i] || 0;
            const num2 = v2[i] || 0;
            if (num1 !== num2) {
              return false;
            }
          }
          return true; // 相等
        }
      },
      // 更新到最新版本
      async upMaxVersion(model) {
        let agentType = await this.fnAgentIsNew(model);
        if (agentType && agentType.newFlag) {
          let params = {deployDevice: model.clientId, method: '0', fileUrl: agentType.fileUrl, fileMd5: agentType.fileMd5};
          this.$modal.confirm('是否升级到最新？').then(() => {
            updateAgentManage(params).then(res => {
              this.newVersionType = false;
              this.$modal.msgSuccess("升级成功！");
            });
          }).catch(() => {});
        } else {
          let content = `<p style="font-size: 1rem;font-weight: 600;">升级警告</p>` +
            `<p style="height: 0px;margin-bottom: 50px;">未找到最新版本${model.maxAgentVersion}的下载地址，请到【AGENT更新】中添加一条版本${model.maxAgentVersion}的更新策略，才可自动进行升级更新`;
          this.$modal.confirm(content, {submitTitle: '去添加'}).then(() => {
            this.$router.push("/resource/agentUpdate");
          }).catch(() => {});
        }
      },
      //agent版本是否为最新版本
      fnAgentIsNew(model) {
        return agentIsNew({clientId: model.clientId, agentVersion: model.maxAgentVersion}).then(res => {
          return res && res.data;
        });
      },
      // 查看出省流量
      outProvinceFlow() {
        this.$router.push({
          path:'/resource/serverRegister/flowForm',
          query: {clientId: this.paramsData.clientId, id: this.paramsData.id}
        });
      },
      // tab栏点击事件
      handleClick() {
        if (this.activeName === '网卡流量监控') {
          this.fnSwitchNetNames('网卡流量监控');
        } else if (this.activeName === '挂载文件系统监控') {
          this.fnInterFaceNameList('挂载文件系统监控');
        } else if (this.activeName === '硬盘设备监控') {
          this.fnDiskNames('硬盘设备监控');
        } else if (this.activeName === '网卡信息') {
          this.interNetCard(this.activeName);
        } else if (this.activeName === '虚拟网卡信息') {
          this.virtualNetCard(this.activeName);
        } else if (this.activeName === 'FRP信息') {
          this.fnFRPData(this.activeName);
        } else if (this.activeName === '收益查看') {
          this.serverBandWidth(this.activeName);
        } else if (this.activeName === 'PPPoE配置') {
          this.fnPppoeConfig(this.activeName);
        }
        // if (!this.mapDataList[this.activeName] || this.mapDataList[this.activeName].length <= 0) {
        // }
      },
      // 收益信息的分页回调
      fnPaging(val) {
        this.serverBandWidth(this.activeName,val);
      },
      // 收益信息
      serverBandWidth(keyName, val) {
        let newParams = Object.assign({}, {pageNum: 1, pageSize: 10, clientId: this.paramsData.clientId, resourceType: 1, calculationMode: 1000}, val);
        listBandWidth(newParams).then(res => {
          newParams['total'] = res && res.total;
          this.$set(this.mapDataList, keyName, [{tableList: res && res.rows, queryParams: newParams}]);
        })
      },
      // FRP信息
      fnFRPData(keyName) {
        frpMsgByClient({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data) {
            this.$set(this.mapDataList, keyName, [res.data]);
          }
        });
      },
      // 网卡信息
      interNetCard(keyName) {
        networkList({clientId: this.ruleForm.clientId, newFlag: 1}).then(res => {
          let newList = [];
          let oneData = [];
          let twoData = [];
          res && res.data.map(item => {
            if (item.ipv4Address && item.ipv4Address !== 'N/A') {
              oneData.push(item);
            } else {
              twoData.push(item);
            }
          });
          newList = oneData.concat(twoData);
          this.$set(this.mapDataList, keyName, [{tableList: newList, queryParams: {total: 0}}]);
        });
      },
      // 虚拟网卡信息
      virtualNetCard(keyName) {
        virNetInterfaceChild({clientId: this.paramsData.clientId}).then(resVal => {
          if (resVal && resVal.data) {
            let newList = [];
            let oneData = [];
            let twoData = [];
            resVal.data.forEach(item => {
              if (item.ipv4Address && item.ipv4Address !== 'N/A') {
                oneData.push(item);
              } else {
                twoData.push(item);
              }
            });
            newList = oneData.concat(twoData);
            this.$set(this.mapDataList, keyName, [{tableList: newList, queryParams: {total: 0}}]);
          }
        });
      },
      // pppoe回调
      fnPoeDataChange() {
        this.fnPppoeConfig('PPPoE配置');
      },
      // PPPoE配置
      fnPppoeConfig(keyName) {
        getPppoeConfig({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data) {
            res.data['pppoeEnabled'] = res.data && res.data['pppoeEnabled'] ? res.data['pppoeEnabled'].toString() : res.data['pppoeEnabled'];
            res.data['clientId'] = res.data && res.data['clientId'] ? res.data['clientId'] : this.paramsData.clientId;
            this.$set(this.mapDataList, keyName, [res.data]);
          }
        });
      },
      // 网络接口 ---所有网络接口名称
      fnSwitchNetNames(keyName) {
        this.$set(this.mapDataList, keyName,
          {
            '网卡信息': {title: '网卡信息', toTitle: '网卡', clientId: this.paramsData.clientId, echartList: []},
            'CPU使用率': {title: 'CPU使用率(%)', titleTo: 'CPU使用率(%)', clientId: this.paramsData.clientId},
            '内存使用率': {title: '内存使用率(%)', titleTo: '内存使用率(%)', clientId: this.paramsData.clientId},
            '磁盘空间': {title: '磁盘空间', titleTo: '磁盘空间使用情况', clientId: this.paramsData.clientId},
            'CPU温度': {title: 'CPU温度', titleTo: 'CPU温度(℃)', clientId: this.paramsData.clientId},
          });
        // this.getMonitorData();
        this.interNetCardList().then(res => {
          if (res && res.length > 0) {
            this.interCartList = {};
            res && res.forEach(async(item,index) => {
              this.$set(this.interCartList, item.interfaceName, item);
            });
          }
        });
      },
      // 网卡信息数据
      interNetCardList() {
        return postInterFaceName({clientId: this.paramsData.clientId,resourceType: 1});
      },
      // getMonitorData() {
      //   serverMonitorData({clientId: this.paramsData.clientId}).then(res => {
      //     if (res && res.data) {
      //       this.systemModel = res.data;
      //     }
      //   });
      // },
      //  挂载文件 === 接口名称
      fnInterFaceNameList(keyName) {
        mountNameList({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data && res.data.length > 0) {
            let tabNameList = {};
            res && res.data.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
              oneData.title = item && item.mount;
              oneData.toTitle = '文件系统';
              oneData.clientId = this.paramsData.clientId;
              tabNameList[item.mount] = oneData;
            });
            this.$set(this.mapDataList, keyName, tabNameList);
          }
        });
      },
      // 硬盘设备监控 列表回调
      fnDiskTableData(keyName) {
        this.fnDiskNames(keyName);
      },
      // 硬盘设备
      fnDiskNames(keyName) {
        diskNameList({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data) {
            let newList = res.data;
            this.$set(this.mapDataList, keyName, [{tableList: newList, queryParams: {total: 0}}]);
          }
        });
        // diskAllNames({clientId: this.paramsData.clientId}).then(res => {
        //   if (res && res.data.length > 0) {
        //     let tabNameList = {};
        //     res && res.data.forEach(async(item,index) => {
        //       let oneData = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
        //       oneData.title = item && item.name;
        //       oneData.toTitle = '硬盘设备';
        //       oneData.clientId = this.paramsData.clientId;
        //       tabNameList[item.name] = oneData;
        //     });
        //     this.$set(this.mapDataList, keyName, tabNameList);
        //   }
        // });
      },
      // 回调
      fnTimeChangeData(val) {
        this.eventKeyName = {};
        if (this.activeName && this.activeName === '网卡流量监控' && this.mapDataList[this.activeName]) {
          this.fnNetChartList('网卡流量监控', val.currTimeList, val.interCardName, val.onlyInterCard);
        } else if (this.activeName && this.activeName === '挂载文件系统监控' && this.mapDataList[this.activeName]) {
          this.fnMountCharList('挂载文件系统监控', val.currTimeList);
        }
        // else if (this.activeName && this.activeName === '硬盘设备监控' && this.mapDataList[this.activeName]) {
        //   this.fnDiskCharList('硬盘设备监控', val.currTimeList);
        // }
      },
      // 网卡流量监控
      async fnNetChartList(keyVal, time, interCardName, onlyInterCard) {
        if (onlyInterCard) {
          if (!this.interCartList[interCardName].businessFlag) {
            this.mapDataList[keyVal]['网卡信息'].echartList = [this.mapDataList[keyVal]['网卡信息'].echartList[0],this.mapDataList[keyVal]['网卡信息'].echartList[1]];
          }
          if (await this.getNetEcharts(time, keyVal, '网卡信息', interCardName)) {
            if (await this.getNetPingDropCharts(time, keyVal, '网卡信息', interCardName)) {
              if (this.interCartList[interCardName].businessFlag) {
                if (await this.getNetIPv4Echarts(time, keyVal, '网卡信息', interCardName)) {
                  this.getNetIPv6Echarts(time, keyVal, '网卡信息', interCardName);
                }
              }
            }
          }
        } else {
          for (const keyName of Object.keys(this.mapDataList[keyVal])) {
            if (keyName === '网卡信息') {
              if (await this.getNetEcharts(time, keyVal, keyName, interCardName)) {
                if (await this.getNetPingDropCharts(time, keyVal, keyName, interCardName)) {
                  if (this.interCartList[interCardName].businessFlag) {
                    if (await this.getNetIPv4Echarts(time, keyVal, keyName, interCardName)) {
                      await this.getNetIPv6Echarts(time, keyVal, keyName, interCardName)
                    }
                  }
                }
              }
            } else if (keyName === 'CPU使用率') {
              await this.getCpuLoadData(time, keyVal, keyName)
            } else if (keyName === '内存使用率') {
              await this.getMemoryUtilizationData(time, keyVal, keyName)
            } else if (keyName === '磁盘空间') {
              await this.fnUsedSpaceCharts(time, keyVal, keyName);
            } else if (keyName === 'CPU温度') {
              this.fnCpuTemperatureCharts(time, keyVal, keyName);
            }
          }
          // Object.keys(this.mapDataList[keyVal]).forEach(async (keyName,index) => {
          // });
        }
      },
      // 挂载文件系统监控
      fnMountCharList(keyVal, time){
        Object.keys(this.mapDataList[keyVal]).forEach(async (keyName,index) => {
          if (Object.keys(this.mapDataList[keyVal]).length > 3) {
            if (index <= 2) {
              this.getSpaceRate(time, keyVal, keyName);
            }
          } else {
            this.getSpaceRate(time, keyVal, keyName);
          }
        });
      },
      // 硬盘设备
      fnDiskCharList(keyVal, time){
        Object.keys(this.mapDataList[keyVal]).forEach(async (keyName,index) => {
          if (Object.keys(this.mapDataList[keyVal]).length > 3) {
            if (index <= 2) {
              this.getSpeedEcharts(time, keyVal, keyName);
            }
          } else {
            this.getSpeedEcharts(time, keyVal, keyName);
          }
        });
      },
      // 网卡 流量
      getNetEcharts(times, keyVal, titleName, interCardName, unitData) {
        let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
        mountCollect['titleTo'] = interCardName;
        mountCollect['serverIp'] = this.interCartList[interCardName].serverIp;
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.fnEvent = 'getNetEcharts';
        return trafficEcharts(Object.assign(unitData || {}, {name : interCardName,clientId: mountCollect.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = content.echartFors[0].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            if (content.echartFors[0].unitSel) {
              netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
              netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
            }
            let ledgendArr = [];
            if (res.data && res.data.showRealation) {
              Object.keys(res.data.showRealation).forEach((key,index) => {
                ledgendArr.push(res.data.showRealation[key]);
                netEcharts.dataVal.dataList[index] = {
                  name: res.data.showRealation[key],
                  data: res.data && res.data.yData[key] || []
                };
              });
            }
            if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
              netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
            } else {
              netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: true, data: ledgendArr});
            }
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.mapDataList[keyVal], titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      // 网卡 PING丢包率
      getNetPingDropCharts(times, keyVal, titleName, interCardName) {
        let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
        mountCollect['titleTo'] = interCardName;
        mountCollect['serverIp'] = this.interCartList[interCardName].serverIp;
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.fnEvent = 'getNetPingDropCharts';
        return pingDroppedEchars(Object.assign({}, {name : interCardName,clientId: mountCollect.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = content.echartFors[1].title;
            // netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[1].oneName,
              data: res.data && res.data.yData['pingDropped'] || []
            };
            // if (content.echartFors[1].unitSel) {
            //   netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
            //   netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
            // }
            // let ledgendArr = [];
            // if (res.data && res.data.showRealation) {
            //   Object.keys(res.data.showRealation).forEach((key,index) => {
            //     ledgendArr.push(res.data.showRealation[key]);
            //     netEcharts.dataVal.dataList[index] = {
            //       name: res.data.showRealation[key],
            //       data: res.data && res.data.yData[key] || []
            //     };
            //   });
            // }
            // if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
            //   netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
            // } else {
            //   netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: true, data: ledgendArr});
            // }
            mountCollect['echartList'][1] = netEcharts;
            this.$set(this.mapDataList[keyVal], titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      // 网卡 IPv4流量
      getNetIPv4Echarts(times, keyVal, titleName, interCardName, unitData) {
        let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
        mountCollect['titleTo'] = interCardName;
        mountCollect['serverIp'] = this.interCartList[interCardName].serverIp;
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.fnEvent = 'getNetIPv4Echarts';
        return trafficIPv4Echarts(Object.assign(unitData || {}, {name : interCardName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[2].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            if (content.echartFors[2].unitSel) {
              netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
              netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
            }
            let ledgendArr = [];
            if (res.data && res.data.showRealation) {
              Object.keys(res.data.showRealation).forEach((key,index) => {
                ledgendArr.push(res.data.showRealation[key]);
                netEcharts.dataVal.dataList[index] = {
                  name: res.data.showRealation[key],
                  data: res.data && res.data.yData[key] || []
                };
              });
            }
            if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
              netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
            }
            mountCollect['echartList'][2] = netEcharts;
            this.$set(this.mapDataList[keyVal], titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      // 网卡 IPv6流量
      getNetIPv6Echarts(times, keyVal, titleName, interCardName, unitData) {
        let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
        mountCollect['titleTo'] = interCardName;
        mountCollect['serverIp'] = this.interCartList[interCardName].serverIp;
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.fnEvent = 'getNetIPv6Echarts';
        return trafficIPv6Echarts(Object.assign(unitData || {}, {name : interCardName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[3].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            if (content.echartFors[3].unitSel) {
              netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
              netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
            }
            let ledgendArr = [];
            if (res.data && res.data.showRealation) {
              Object.keys(res.data.showRealation).forEach((key,index) => {
                ledgendArr.push(res.data.showRealation[key]);
                netEcharts.dataVal.dataList[index] = {
                  name: res.data.showRealation[key],
                  data: res.data && res.data.yData[key] || []
                };
              });
            }
            if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
              netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
            }
            mountCollect['echartList'][3] = netEcharts;
            this.$set(this.mapDataList[keyVal], titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      // 挂载文件 空间利用率
      getSpaceRate(times, keyVal, titleName) {
        this.eventKeyName[titleName] = true;
        let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
        mountCollect['titleTo'] = titleName;
        let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
        mountEcharts.fnEvent = 'getSpaceRate';
        spaceRate(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            mountEcharts.title = content.echartFors[0].title;
            mountEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            mountEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            mountEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['vfsUtilData'] || []
            };
            if (res.data && res.data.yData && res.data.yData['usedData'] && res.data.yData['usedData'].length > 0) {
              mountEcharts.dataVal.otherModel = {name: '存储使用大小', value: res.data && res.data.yData['usedData'] || []};
            }
          }
          mountCollect['echartList'][0] = mountEcharts;
          this.$set(this.mapDataList[keyVal], titleName, mountCollect);
          this.$modal.closeLoading();
        }).catch(() => {
          this.$modal.closeLoading();
        });
      },
      // 硬盘设备 读写速率
      getSpeedEcharts(times, keyVal, titleName) {
        this.eventKeyName[titleName] = true;
        let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
        mountCollect['titleTo'] = titleName;
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
        netEcharts.fnEvent = 'getSpeedEcharts';
        return speedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = content.echartFors[0].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['writeSpeedData'] || []
            };
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[0].twoName,
              data: res.data && res.data.yData['readSpeedData'] || []
            };
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.mapDataList[keyVal], titleName, mountCollect);
          }
          this.$modal.closeLoading();
          return true;
        }).catch(() => {
          this.$modal.closeLoading();
          return true;
        });
      },
      // cpu使用率
      getCpuLoadData(val, keyVal, titleName) {
        let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
        cpuData['fnEvent'] = 'getCpuLoadData';
        return cpuLoadData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          if (res && res.data) {
            cpuData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            cpuData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['utiData'] && res.data['yData']['utiData'].length > 0 ? res.data['yData']['utiData'] : [];
            cpuData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['load1Data'] && res.data['yData']['load1Data'].length > 0 ? res.data['yData']['load1Data'] : [];
            cpuData.dataVal.dataList[2].data = res && res.data && res.data['yData'] && res.data['yData']['load5Data'] && res.data['yData']['load5Data'].length > 0 ? res.data['yData']['load5Data'] : [];
            cpuData.dataVal.dataList[3].data = res && res.data && res.data['yData'] && res.data['yData']['load15Data'] && res.data['yData']['load15Data'].length > 0 ? res.data['yData']['load15Data'] : [];
          }
          let paramsCpu = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [cpuData]});
          this.$set(this.mapDataList[keyVal], titleName, paramsCpu);
          return true;
        }).catch(() => {
          return true;
        });
      },
      // 内存使用率
      getMemoryUtilizationData(val, keyVal, titleName) {
        let memoryUtilizaData = JSON.parse(JSON.stringify(this.resultData[1]));
        memoryUtilizaData['fnEvent'] = 'getMemoryUtilizationData';
        return memoryUtilization(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          if (res && res.data) {
            memoryUtilizaData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            memoryUtilizaData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memoryUtilizationData'] && res.data['yData']['memoryUtilizationData'].length > 0 ? res.data['yData']['memoryUtilizationData'] : [];
            if (res.data && res.data.yData && res.data.yData['memoryUsedData'] && res.data.yData['memoryUsedData'].length > 0) {
              memoryUtilizaData.dataVal.otherModel = {name: '内存使用大小', value: res.data && res.data.yData['memoryUsedData'] || []};
            }
          }
          let paramsCpus = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [memoryUtilizaData]});
          this.$set(this.mapDataList[keyVal], titleName, paramsCpus);
          return true;
        }).catch(() => {
          return true;
        });
      },
      // 磁盘空间使用情况
      fnUsedSpaceCharts(times, keyVal, titleName,interCardName, unitData) {
        let chartData = JSON.parse(JSON.stringify(this.resultData[1]));
        chartData['fnEvent'] = 'fnUsedSpaceCharts';
        return usedSpacechartsData(Object.assign(unitData || {},{clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            if (res.data.unit) {
              chartData.dataVal['unitModel'] = res.data.unit || '';
              chartData.dataVal['unitSelList'] = [{label: 'KB', value: 'KB'},{label: 'MB', value: 'MB'}, {label: 'GB', value: 'GB'}];
            }
            chartData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            chartData.dataVal.dataList[0].name = '已使用';
            chartData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['usedSpace'] && res.data['yData']['usedSpace'].length > 0 ? res.data['yData']['usedSpace'] : [];
            if (chartData.dataVal.dataList[0].data.length > 0 && chartData.dataVal.dataList[0].data.some(num => num < 0)) {
              chartData.dataVal.gridLeft = '-7%';
            }
          }
          let paramsCpus = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [chartData]});
          this.$set(this.mapDataList[keyVal], titleName, paramsCpus);
          return true;
        }).catch(() => {
          return true;
        });
      },
      // CPU温度
      fnCpuTemperatureCharts(times, keyVal, titleName,interCardName, unitData) {
        let chartData = JSON.parse(JSON.stringify(this.resultData[1]));
        chartData['fnEvent'] = 'fnCpuTemperatureCharts';
        return cpuTemperatureChartData(Object.assign(unitData || {},{clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            chartData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            chartData.dataVal.dataList[0].name = '温度';
            chartData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['temperatureData'] && res.data['yData']['temperatureData'].length > 0 ? res.data['yData']['temperatureData'] : [];
            if (chartData.dataVal.dataList[0].data.length > 0 && chartData.dataVal.dataList[0].data.some(num => num < 0)) {
              chartData.dataVal.gridLeft = '-7%';
            }
          }
          let paramsCpus = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [chartData]});
          this.$set(this.mapDataList[keyVal], titleName, paramsCpus);
          return true;
        }).catch(() => {
          return true;
        });
      },

      chartFnEvent(valData, fnName, tabName, unit, keyVal, interCardName) {
        // 检查函数是否存在，避免报错
        if (typeof this[fnName] === 'function') {
          let unitData = unit ? {unit: unit} : {};
          // 调用实际函数，并传递参数（如选中的值、当前项）
          this[fnName](valData, keyVal, tabName, interCardName, unitData);
        } else {
          console.warn(`函数 ${fnName} 未定义`);
        }
      },

      // 滚动监听事件
      fnLazyLoad(val) {
        if (val) {
          if (this.mapDataList[this.activeName]) {
            if (this.mapDataList[this.activeName][val.key] && !(this.mapDataList[this.activeName][val.key].echartList[0] && this.mapDataList[this.activeName][val.key].echartList[0].title)) {
              if (this.activeName === '挂载文件系统监控' && !this.eventKeyName[val.key]) {
                this.getSpaceRate(val.currTimeList, this.activeName, val.key);
              }
              // else if (this.activeName === '硬盘设备监控' && !this.eventKeyName[val.key]) {
              //   this.getSpeedEcharts(val.currTimeList, this.activeName, val.key);
              // }
            }
          }
        }
      },

      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'cancel':
              // if (this.paramsData && this.paramsData.type === 'alarmLog') {
              //   // this.$router.push("/resource/alarmLog");
              //   history.go(-1);
              // } else {
              //   this.$router.push("/resource/serverRegister");
              // }
              break;
            default:
          }
        }
      },
    }
  }
</script>

<style scoped>
  .headerBox {
    display: inline-block;
    height: 120px;
    padding: 0 10px;
    vertical-align: top;
  }
  .boxChild {
    border: 1px solid #ddd;
    padding: 15px 5px 15px 15px;
  }
</style>
