<template>
  <div class="app-container">
    <Form :config="{buttonGroup: []}" :formList="formList" :ruleFormData="this.paramsData && this.paramsData.readonly ? ruleFormData : ruleForm" @fnClick="callback"></Form>
    <div v-for="(item, key, index) of renderList" style="margin-top: 20px">
      <div v-if="item.data && item.data.length > 0">
<!--        {{item}}-->
        <div v-if="item && item.lastTitle && item.tableKey" class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px;margin: unset;">
            {{item.lastTitle}}
        </div>
        <div v-else class="form-header h4" style="padding: 15px 10px;margin: unset;">
          {{item.firstTitle}}-{{item && item.lastTitle ? item.lastTitle : item.secondTitle}}
        </div>
        <div class="mt10 mb10">
          <div v-if="item && item.tableKey">
            <template v-if="item.lastTitle">
<!--              <div class="form-header">{{item.lastTitle}}</div>-->
              <TableList :config="config" :columns="columns" :queryParams="{total: 0}" :tableList="item.data"  @fnClick="callback"></TableList>
            </template>
            <template v-else>
              <TableList :config="config" :columns="columns" :queryParams="{total: 0}" :tableList="item.data"  @fnClick="callback"></TableList>
            </template>
          </div>
          <div v-else class="w80 plr-20 m0Auto">
            <div v-for="(val,valIndex) of item.data" class="disInlineBlock w100 mb10">
              <span style="width: 45%;color: #b3b3b3;" class="disInlineBlock">{{val.metricName}}</span>
              <span>{{val.metricKey}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-button v-if="this.paramsData && this.paramsData.readonly" type="primary" @click="handleReset" class="fr mb10">返回</el-button>
  </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import TableList from "@/components/table/index.vue";
  import {getMonitorTemp} from "@/api/disRevenue/resource";
  export default {
    name: 'MonitorTempView',
    components: {Form,TableList},
    props: {
      ruleForm: {
        type: Object,
        default: () => ({})
      },
      otherList: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        ruleFormData: {},
        otherListData: {},
        paramsData: {},
        formList: [],
        columns: {
          id: { label: `ID`, visible: false },
          metricKey: { label: `监控标识`, visible: true},
          metricName: { label: `监控名称`, visible: true},
          oid: { label: `监控OID`, visible: true },
          filterValue: { label: `过滤值`, visible: true},
          monitorDescription: { label: `自动监控说明`, visible: true}
        },
        config: {colHiddenCheck: true, colTopHiddenIcon: true},
        linuxSystem: {
          monitorItem: {
            firstTitle: 'Linux系统', title: '监控项',
            dataList: [{
              title: 'CPU监控', modelName: 'cpu', checkAll: true, isIndeterminate: false, disabled: true,
              checkList: [
                {id: '1', name: 'system.cpu.load.avg1', towName: 'CPU的1分钟负载'},
                {id: '2', name: 'system.cpu.util.normal', towName: 'CPU正常运行时间'},
                {id: '3', name: 'system.cpu.load.avg5', towName: 'CPU的5分钟负载'},
                {id: '4', name: 'system.cpu.utilee.idle', towName: 'CPU空闲时间'},
                {id: '5', name: 'system.cpu.load.avg15', towName: 'CPU的15分钟负载'},
              ]},
              {
                title: '其他监控', modelName: 'other', checkAll: false, isIndeterminate: false,
                checkList: []
              }
            ],
          },
          autodiscoverItem: {
            firstTitle: 'Linux系统', title: '自动发现项',
            dataList:[{
              title: '发现挂载文件系统', modelName: 'vfs', checkAll: true, isIndeterminate: false, disabled: true,
              checkList: []
            }, {
              title: '发现网络接口', modelName: 'net', checkAll: true, isIndeterminate: false, disabled: true,
              checkList: []
            }, {
              title: '发现硬盘设备', modelName: 'disk', checkAll: true, isIndeterminate: false, disabled: true,
              checkList: []
            }, {
              title: '发现docker', modelName: 'docker', checkAll: true, isIndeterminate: false, disabled: true,
              checkList: []
            }
            ]
          },
        },
        checkAllParams: {},
        checkSwitchParams: {},
        monitorTable: {
          nodeOne: [{
            firstTitle: '华为交换机', secondTitle: '监控项',
            tableList: [],
            config: {tableKey: 'web', colTopHiddenIcon: true}
          }],
          nodeTow: [
            {
              firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', classType: 'checkHidden',
              tableList: [],
              config: {tableKey: 'web1', colTopHiddenIcon: true, selectable: true}
            },
            {
              firstTitle: '华为交换机', secondTitle: '自动发现项',title: 'MPU发现', classType: 'checkHidden',
              tableList: [],
              config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
            },
            // {
            //   firstTitle: '华为交换机', secondTitle: '自动发现项',title: '电源发现', classType: 'checkHidden',
            //   tableList: [
            //     {id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
            //     {id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
            //     {id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
            //     {id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
            //     {id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
            //   ],
            //   config: {tableKey: 'web3', colTopHiddenIcon: true, selectable: true}
            // },
            {
              firstTitle: '华为交换机', secondTitle: '自动发现项',title: '风扇发现', classType: 'checkHidden',
              tableList: [],
              config: {tableKey: 'web3', colTopHiddenIcon: true, selectable: true}
            },
          ]},
      }
    },
    computed: {
      renderList() {
        // 优先用 props 传入的 otherList，其次用接口加载的 otherListData
        const sourceList = this.paramsData && this.paramsData.readonly ? this.otherListData : this.otherList;
        // 将 Object 转为 Array（键名作为 key，值作为 item），避免循环顺序问题
        return sourceList;
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.readonly) {
        this.getFormDataList(this.paramsData.id);
      }
      this.fnFormList();
      // linux
      Object.keys(this.linuxSystem).forEach(res => {
        this.linuxSystem[res]['dataList'].forEach(item => {
          this.checkAllParams[item.modelName] = {
            firstTitle: this.linuxSystem[res].firstTitle,
            secondTitle: this.linuxSystem[res].title,
            lastTitle: item.title,
            data: []
          }
        });
      });
      // switch
      Object.keys(this.monitorTable).forEach(res => {
        this.monitorTable[res].forEach(item => {
          this.checkSwitchParams[item.config.tableKey] = {
            firstTitle: item.firstTitle,
            secondTitle: item.secondTitle,
            lastTitle: item.title,
            tableKey: item.config.tableKey,
            data: []
          }
        });
      });
    },
    methods: {
      fnFormList(){
        this.formList = [{
          config: {title: '基本信息',readonly: true},
          controls: {
            id: {label: 'ID',hidden: true},
            templateName: {label: '模版名称', span: 24, type: 'input', required: true},
            description: {label: '描述', span: 24, type: 'textarea'},
            includedDevicesName: {label: '包含设备', span: 24, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true}
          }
        }]
      },
      // 获取详情
      getFormDataList(id) {
        this.$modal.loading();
        getMonitorTemp(id).then(val => {
          if (val && val.data) {
            this.ruleFormData = val.data.template;
            if (val.data.template.resourcyType === 'linux') {
              Object.keys(this.checkAllParams).forEach(item => {
                this.checkAllParams[item].data = item && val.data['linux'][item] || [];
              });
              this.otherListData = {...this.checkAllParams};
            } else {
              this.checkSwitchParams['web'].data = val.data['switch'].switchOther;
              this.checkSwitchParams['web1'].data = val.data['switch'].switchNet;
              this.checkSwitchParams['web2'].data = val.data['switch'].switchModule;
              this.checkSwitchParams['web3'].data = val.data['switch'].switchFan;
              this.otherListData = {...this.checkSwitchParams};
            }
          }
          this.$modal.closeLoading();
        }).catch(() => {
          this.$modal.closeLoading();
          // this.$modal.msgError("操作失败")
        });
      },
      // 返回
      handleReset() {
        this.$router.push("/resource/monitorTemp");
      },
      // 监听事件
      callback(result, dataVal, formVal) {}
    }
  }
</script>
<style>
</style>
