<template>
  <div class="app-container">
    <div style="width: 80%; margin: auto;">
      <Form ref="formRef" :formList="formList" :config="{labelWidth: '140px',buttonGroup: []}" :ruleFormData="ruleFormData" @fnClick="callback"></Form>
    </div>
    <div>
      <h3 style="background: #d4e3fc;padding: 15px 10px;">策略内容</h3>
      <el-tabs v-model="activeName" class="plr-20">
        <el-tab-pane label="监控项" name="first">
          <div v-for="item of firstData">
            <div class="plr-50">
              <div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
                <div class="disInlineBlock w50">
                  <span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
                  <span>{{city.metricName}}</span>
                </div>
                <div class="disInlineBlock" style="color: #606266">
                  采集周期：<el-select v-model="city['time']" placeholder="请选择" clearable>
                  <el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
                </el-select>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="自动发现项" name="second">
          <el-collapse v-model="activeTwoName">
            <el-collapse-item v-for="(item,key,index) of secondData" :title="item.title" :name="index">
              <template slot="title">
                <span class="disInlineBlock" style="width: 15%;">{{item.title}}</span>
                <div style="font-size: 13px;margin-left: 10%;">
                  采集周期：<el-select v-model="item['time']" id="selDisabled" :disabled="key === 'switchNet' ? true : false" clearable placeholder="请选择">
                  <el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
                </el-select>
                </div>
              </template>
              <div class="plr-50">
                <div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
                  <span style="width: 300px" class="disInlineBlock">{{city.metricKey}}</span>
                  <span>{{city.metricName}}</span>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-button style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">取消</el-button>
    <el-button type="primary" style="float: right;margin-top: 12px;" @click="submit">提交</el-button>
  </div>
</template>

<script>
  import Form from '@/components/form/index.vue';
  export default {
    name: "MonitorStrategy",
    components: {Form},
    dicts: ['rm_register_resource_type', 'collection_cycle'],
    props: {
      open: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      open: {
        handler(val) {
          if (!val) {
            // 清空form
            this.$refs['formRef'].$refs.ruleForm.resetFields();
          }
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        activeName: 'first',
        activeTwoName: [0,1,2,3,4],
        timeOptions: [],
        ruleFormData: {},
        formList: [],
        firstData: [
          {checkList: [
            {id: '1', metricKey: 'sysDescr', metricName: '系统描述', time: ''},
            {id: '2', metricKey: 'sysObjectID', metricName: '系统ObjectID', time: ''},
            {id: '3', metricKey: 'sysUpTime', metricName: '系统运行时间', time: ''},
            {id: '4', metricKey: 'hwStackSystemMac', metricName: '系统MAC地址', time: ''},
            {id: '5', metricKey: 'entPhysicalSoftwareRev', metricName: '设备软件版本', time: ''},
            {id: '6', metricKey: 'hwEntityMemUsage', metricName: '设备内存使用率(%)', time: ''},
          ]}
        ],
        secondData: {
          switchNet: {title: '网络端口发现', time: '300',
            checkList: [
              {id: '11', metricKey: 'ifIndex', metricName: '端口索引'},
              {id: '12', metricKey: 'ifHCOutOctets', metricName: '端口发送Bites总数'},
              {id: '13', metricKey: 'ifRevRate', metricName: '端口实时接收速率(bites/sec)'},
              {id: '14', metricKey: 'ifSentRate', metricName: '端口实时发送速率(bites/sec)'},
            ]
          },
          switchModule: {title: '光模块发现', time: '',
            checkList: [
              {id: '15', metricKey: 'fiberEntIndex', metricName: '光模块端口索引'},
              {id: '16', metricKey: 'hwEntityOpticalTxLowThreshold', metricName: '光模块发送光衰阈值(dBm)'},
              {id: '17', metricKey: 'hwEntityOpticalRxLowThreshold', metricName: '光模块接收光衰阈值(dBm)'},
              {id: '18', metricKey: 'hwEntityOpticalTxPower', metricName: '光模块发送功率(dBm)'},
            ]
          },
          switchMpu: {title: 'MPU发现', time: '',
            checkList: [
              {id: '19', metricKey: 'mpuEntIndex', metricName: 'MPU索引'},
              {id: '20', metricKey: 'mpuEntityCpuUsage', metricName: 'MPU的CPU使用率'},
              {id: '21', metricKey: 'mpuEntityMemUsage', metricName: 'MPU的内存使用率'},
              {id: '22', metricKey: 'mpuPhysicalSoftwareRev', metricName: 'MPU的操作系统'},
            ]
          },
          switchPwr: {title: '电源发现', time: '',
            checkList: [
              {id: '23', metricKey: 'pwrEntIndex', metricName: '电源索引'},
              {id: '24', metricKey: 'pwrName', metricName: '电源名称'},
              {id: '25', metricKey: 'pwrEntityPwrState', metricName: '电源状态'},
              {id: '26', metricKey: 'pwrEntityPwrCurrent', metricName: '电源电流(mA)'},
            ]
          },
          switchFan: {title: '风扇发现', time: '',
            checkList: [
              {id: '27', metricKey: 'fanEntIndex', metricName: '风扇索引'},
              {id: '28', metricKey: 'pwrEntityPwrState', metricName: '电源状态'},
              {id: '29', metricKey: 'pwrEntityPwrCurrent', metricName: '电源电流(mA)'},
              {id: '30', metricKey: 'pwrEntityPwrVoltage', metricName: '电源电压(mV)'},
            ]
          },
        }
      }
    },
    created() {
      console.log('dddd===');
      this.timeOptions = this.dict.type.collection_cycle;
      this.fnFormList();
    },
    methods: {
      // formList集合
      fnFormList(objVal) {
        this.formList = [{
          config: {},
          controls: {
            id: {label: 'ID',hidden: true},
            switchName: {label: '策略名称', span: 24, type: 'input', required: true},
            hardwareSn: {label: '描述', span: 24, type: 'textarea'},
            resourceType: {label: '交换机类型', span: 24, type: 'select', required: true, options: this.dict.type.rm_register_resource_type},
            bushu: {label: '部署设备', span: 24, type: 'textarea', rows: 15},
          }
        }];
      },
      // form验证
      fnFormValid() {
        return new Promise((resolve) => {
          this.ruleFormData = {};
          const formValid = this.$refs.formRef.$refs.ruleForm;
          // 3. 操作form（如验证）
          formValid.validate((valid) => {
            if (valid) {
              this.ruleFormData = formValid.model;
              resolve(true);
            } else {
              resolve(false);
            }
          });
        });
      },
      async submit() {
        if (!await this.fnFormValid()) return;
        // 监控项
        let idsList = [];
        this.firstData.forEach(item => {
          item && item.checkList.forEach(ids => {
            if (ids && ids.time) {
              idsList.push({id: ids.id, collectionCycle: ids.time});
            }
          });
        });
        // 自动发现项
        let autoIds = [];
        Object.keys(this.secondData).forEach(key => {
          if (this.secondData[key].time) {
            this.secondData[key] && this.secondData[key].checkList.forEach(ids => {
              autoIds.push({id: ids.id, collectionCycle: this.secondData[key].time});
            });
          }
        });
        console.log('ruleFormData===',this.ruleFormData);
        console.log('idsList===',idsList);
        console.log('autoIds===',autoIds);
        this.$emit("dialogResult", {open: false});
      },
      cancel() {
        this.$emit("dialogResult", {open: false});
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'submit':
              let fnType = addHandle;
              if (dataVal && dataVal.id) {
                fnType = updateHandle;
              }
              fnType(dataVal).then(response => {
                this.$modal.msgSuccess(response.msg);
                this.$router.push("/resource/switchRegister");
              }).catch(() => {
                this.$modal.msgError("操作失败")
              });
              break;
            case 'cancel':
              this.$router.push("/resource/switchRegister");
              break;
            default:

          }
        }
      },
    }
  }
</script>

<style scoped>
  ::v-deep #selDisabled{
    color: #303133!important;
  }
  ::v-deep .el-collapse-item__header {
    background-color: #d4e3fc!important;
    /*color: #fff!important;*/
    padding-left: 20px;
    font-size: 1rem;
  }
</style>
