<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: 50px">
      <div v-if="item.data && item.data.length > 0">
<!--        {{item}}-->
        <div class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
          <div class="disInlineBlock w30" style="color: #000;font-weight: 600;">
            {{item.firstTitle}}>>{{item.secondTitle}}<span v-if="item && item.lastTitle">>>{{item.lastTitle}}</span>
          </div>
          <span class="disInlineBlock" style="font-size: 14px;color: #000;" v-if="item.hasOwnProperty('timeLabel')">当前所有子项的采集周期均为{{item.timeLabel || 0}}</span>
        </div>
        <div class="w70" style="margin: auto;">
          <div class="plr-50">
            <div v-for="city of item.data" class="w100 mt10 mb10 disInlineBlock fontSize15">
              <div class="disInlineBlock w80">
                <span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
                <span>{{city.metricName}}</span>
              </div>
              <div v-if="city && city['timeLabel']" class="disInlineBlock" style="color: #606266">
                采集周期为{{city['timeLabel']}}
              </div>
            </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 {getMonitorPolicyTemp, getResMonitorGroup,getMonitorPolicy} from "@/api/disRevenue/resource"
  export default {
    name: 'MonitorStategyView',
    dicts: ['collection_cycle'],
    components: {Form,TableList},
    props: {
      ruleForm: {
        type: Object,
        default: () => ({})
      },
      otherList: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        formList: [],
        paramsData: {},
        ruleFormData: {},
        option: [],
        resourceType: '',
        checkAllParams: {},
        otherListData: {},
        linuxSystem: {
          monitorItem: [
            {firstTitle: 'Linux系统', secondTitle: '监控项', title: 'CPU监控', modelName: 'cpu',time: '', checkList: []},
            {firstTitle: 'Linux系统', secondTitle: '监控项', title: '其他监控', modelName: 'other', checkList: []}
          ],
          autodiscoverItem: [
            {firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现挂载文件系统', modelName: 'vfs', time: '', checkList: []},
            {firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现网络接口', modelName: 'net', time: '300', checkList: []},
            {firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现硬盘设备', modelName: 'disk', time: '', checkList: []},
            {firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现docker', modelName: 'docker', time: '', checkList: []}
          ],
        },
        // 第二节点 2栏 列显隐信息
        monitorTable: {
          nodeOne: [{firstTitle: '华为交换机', secondTitle: '监控项', modelName: 'switchOther', checkList: []}],
          nodeTow: [
            {firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', modelName: 'switchNet', time: '300', checkList: []},
            {firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现', modelName: 'switchModule', time: '', checkList: []},
            {firstTitle: '华为交换机', secondTitle: '自动发现项',title: 'MPU发现', modelName: 'switchMpu', time: '', checkList: []},
            {firstTitle: '华为交换机', secondTitle: '自动发现项',title: '电源发现', modelName: 'switchPwr', time: '', checkList: []},
            {firstTitle: '华为交换机', secondTitle: '自动发现项',title: '风扇发现', modelName: 'switchFan', time: '', checkList: []},
          ]},
      }
    },
    computed: {
      renderList() {
        // 优先用 props 传入的 otherList，其次用接口加载的 otherListData
        const sourceList = this.paramsData && this.paramsData.readonly ? this.otherListData : this.otherList;
        // 将 Object 转为 Array（键名作为 key，值作为 item），避免循环顺序问题
        return sourceList;
      }
    },
    created() {
      this.option = this.dict.type.collection_cycle;
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.readonly) {
        this.getFormDataList(this.paramsData.id);
      } else {
        this.fnFormList();
        this.fnResMonitorGroup();
      }
      // this.fnMonitorPolicyTemp();
    },
    methods: {
      fnFormList(){
        this.formList = [{
          config: {title: '', readonly: true},
          controls: {
            id: {label: 'ID',hidden: true},
            policyName: {label: '策略名称', span: this.paramsData && this.paramsData.readonly ? 12 : 24, type: 'input', required: true},
            // templateId: {label: '关联监控模版', span: 24, type: 'select',options: [], eventName: 'change', style: 'display: block;margin: 0 auto;'},
            resourceGroupId: {label: '关联资源组', span: this.paramsData && this.paramsData.readonly ? 12 : 24, type: 'select', options:[]},
            updateTime: {label: '修改时间', span: this.paramsData && this.paramsData.readonly ? 12 : 24, type: 'date'},
            deployTime: {label: '下发策略时间', span: 12, type: 'date',hidden: !(this.resourceType === 'switch' && this.paramsData && this.paramsData.readonly)},
            includedDevicesName: {label: '包含设备', span: 24, type: 'input', hidden: !(this.resourceType === 'switch' && this.paramsData && this.paramsData.readonly)},
            description: {label: '描述', span: 24, type: 'textarea'},
          }
        }];
      },
      // 获取详情
      getFormDataList(id) {
        getMonitorPolicy(id).then(val => {
          if (val && val.data) {
            this.ruleFormData = val.data.policy;
            this.resourceType = val.data.resourceType;
            this.fnFormList();
            this.fnResMonitorGroup();
            this.dataProcess();
            let obj = {};
            this.option.forEach(item => {
              obj[item.value] = item.label;
            });
            if (val.data.resourceType === 'linux') {
              Object.keys(this.checkAllParams).forEach(item => {
                if (item === 'other' && val.data['linux'] && val.data['linux'][item] && val.data['linux'][item].length > 0) {
                  let otherTimes = [];
                  val.data['linux'] && val.data['linux'][item].forEach(timeVal => {
                    if (timeVal && timeVal.collectionCycle) {
                      timeVal['timeLabel'] = obj[timeVal.collectionCycle.toString()];
                      otherTimes.push(timeVal);
                    }
                  });
                  this.checkAllParams[item].data = otherTimes || [];
                } else {
                  if(item && val.data['linux'][item] && val.data['linux'][item].length > 0) {
                    if (val.data['linux'][item][0] && val.data['linux'][item][0].collectionCycle) {
                      this.checkAllParams[item]['timeLabel'] =  obj[val.data['linux'][item][0].collectionCycle.toString()];
                      this.checkAllParams[item].data = val.data['linux'][item];
                    }
                  }
                }
              });
            } else {
              Object.keys(this.checkAllParams).forEach(item => {
                if (item === 'switchOther' && val.data['switch'] && val.data['switch'][item] && val.data['switch'][item].length > 0) {
                  let switchOtherTime = [];
                  val.data['switch'] && val.data['switch'][item].forEach(timeVal => {
                    if (timeVal && timeVal.collectionCycle) {
                      timeVal['timeLabel'] = obj[timeVal.collectionCycle.toString()];
                      switchOtherTime.push(timeVal);
                    }
                  });
                  this.checkAllParams[item].data = switchOtherTime || [];
                } else {
                  if(item && val.data['switch'][item] && val.data['switch'][item].length > 0) {
                    if (val.data['switch'][item][0] && val.data['switch'][item][0].collectionCycle) {
                      this.checkAllParams[item]['timeLabel'] = obj[val.data['switch'][item][0].collectionCycle.toString()];
                      this.checkAllParams[item].data = val.data['switch'][item];
                    }
                  }
                }
              });
            }
            this.otherListData = {...this.checkAllParams};
          }
        }).catch(() => {
          // this.$modal.msgError("操作失败")
        });
      },
      // 数据处理
      dataProcess() {
        let typeVal = {};
        if (this.resourceType === 'linux') {
          typeVal = this.linuxSystem;
        } else {
          typeVal = this.monitorTable;
        }
        Object.keys(typeVal).forEach(res => {
          typeVal[res].forEach(item => {
            this.checkAllParams[item.modelName] = {
              firstTitle: item.firstTitle,
              secondTitle: item.secondTitle,
              lastTitle: item.title,
              data: []
            };
          });
        })
      },
      // 资源组
      fnResMonitorGroup(){
        getResMonitorGroup().then(res => {
          if (res && res.data) {
            this.formList[0].controls['resourceGroupId']['options']= res && res.data.map(item => {
              return Object.assign({label: item.groupName, value: item.id});
            });
          }
        });
      },
      // // 监控模版
      // fnMonitorPolicyTemp(){
      //   getMonitorPolicyTemp().then(res => {
      //     if (res && res.data) {
      //       this.policyTemp = {};
      //       this.formList[0].controls['templateId']['options']= res && res.data.map(item => {
      //         this.policyTemp[item.id] = item;
      //         return Object.assign({label: item.templateName, value: item.id});
      //       });
      //     }
      //   });
      // },
      // 返回
      handleReset() {
        this.$router.push("/resource/monitorStategy");
      },
      // 监听事件
      callback(result, dataVal, formVal) {}
    }
  }
</script>
<style>
</style>
