<template>
  <div class="app-container">
    <div class="w100">
      <el-steps :active="active" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="告警策略"></el-step>
        <el-step title="策略确认"></el-step>
      </el-steps>
      <!--    内容区   -->
      <div style="margin-top: 30px;height: 90%;">
        <!--    active:0    -->
        <div v-show="active === 0">
          <Form ref="formRef" style="text-align: center;" :formList="formList" :ruleFormData="ruleFormData" :config="config" @fnClick="callback"></Form>
        </div>
        <!--    active:2    -->
        <div v-show="active === 1" class="w100" style="height: 94%;">
          <el-tabs type="border-card" class="w100 h100">
            <!--    2-1   -->
            <el-tab-pane v-if="ruleFormData.monitorTemp === 1" label="Linux系统" class="w100 h100">
              <div v-for="(item,index) of linuxSystem" class="plr-50">
                <template v-for="city in item.checkList">
                  <div class="w100 h100 mt10">
                    <el-checkbox v-model="city.checked" :label="city.name" :key="city.name" class="disInlineBlock" style="width: 56%;margin-right: 0px!important;white-space: break-spaces;">
                      {{ city.name }}
                    </el-checkbox>
                    <div v-if="city && (city.num || city.towName)" class="disInlineBlock" style="color: #606266; width: 44%;">
                      <template v-if="city.num">
                        <el-select v-model="city['typeSelect']" size="small" placeholder="选择操作" style="width: 120px;" class="mr10">
                          <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
                        </el-select>
                        <el-input-number v-model="city['num']" :min="1" label="描述文字" size="small" class="mr10"></el-input-number>
                        <el-link :underline="false"><span v-if="city && city.numType === 'percent'">%</span>上报告警信息</el-link>
                      </template>
                      <template v-else>
                        <el-link :underline="false">{{city.towName}}: </el-link>
                        <el-input v-model="city.typeInput" style="width: 120px;margin-left: 5px"></el-input>
                        <el-link :underline="false" style="color: #e1e1e2;font-size: 12px;">{{city.title}}: </el-link>
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </el-tab-pane>
            <!--    2-2   -->
            <el-tab-pane v-if="ruleFormData.monitorTemp === 2" label="华为交换机" class="w100 h100">
              <div style="padding: 50px">
                接收来自交换机的snmp Trap信息:
                <el-radio-group v-model="switchType">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!--    active:3    -->
        <div v-if="active === 2" class="w100" style="height: 94%;margin-top: -15px;">
          <AlarmManageView :ruleForm="ruleFormData" :otherList="synthesisList"></AlarmManageView>
        </div>
      </div>
    </div>
    <el-button type="primary" v-show="active > 1" style="float: right;margin-top: 12px;margin-left: 10px;" @click="submit">提交</el-button>
    <el-button type="primary" v-show="active < 2" style="float: right;margin-top: 12px;" @click="next('1')">下一步</el-button>
    <el-button type="primary" v-show="active > 0" style="float: right;margin-top: 12px;" @click="next('-1')">上一步</el-button>
    <el-button type="primary" style="float: right;margin-top: 12px;" @click="goBack">返回</el-button>
  </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import TableList from "@/components/table/index.vue"
  import AlarmManageView from './alarmManageView'
  export default {
    name: 'AlarmManageDetails',
    components: {Form, TableList, AlarmManageView},
    data() {
      return {
        active: 0,
        checkParams: {other: []},
        synthesisList: {},
        // 第一节点
        ruleFormData: {
          monitorTemp: 1,
        },
        config: {
          buttonGroup: []
        },
        formList: [{
          config: {title: ''},
          controls: {
            id: {label: 'ID',hidden: true},
            switchName: {label: '策略名称', span: 12, type: 'input', style: 'display: block;margin: 0 auto;', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
            serverPort: {label: '描述', span: 12, type: 'textarea', style: 'display: block;margin: 0 auto;'},
            // monitorTemp: {label: '关联监控模版', span: 12, type: 'select', style: 'display: block;margin: 0 auto;'},
            monitorTemp: {label: '关联资源组', span: 12, type: 'select'}
          }
        }],
        // 第二节点 1栏
        option: [{label: '大于', value: '大于'},{label: '大于且等于', value: '大于且等于'},{label: '小于', value: '小于'},{label: '小于且等于', value: '小于且等于'}],
        linuxSystem: [{
          firstTitle: 'Linux系统', modelName: 'other',
          checkList: [
            {id: '1', name: 'Linux服务器的CPU使用率(system.cpu.uti)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
            {id: '2', name: 'Linux服务器的内存利用率(memory.utilization)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
            {id: '3', name: 'Linux服务器的可用交换空间百分比(system.swap.size.percent)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
            {id: '4', name: 'Linux服务器的登录用户数(system.users.num)', checked: false, typeSelect: '大于', num: '9'},
            {id: '5', name: 'Linux服务器的所有挂载点的空间利用率(vfs.fs.util)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
            {id: '6', name: 'Linux服务器的所有网络接口的运行状态由UP转为DOWN(net.if.status)上报告警信息', checked: false,},
            {id: '7', name: 'Linux服务器的所有的网络接口类型为【Ethernet】的且运行状态为【已连接】的网络接口的发送流量带宽使用率', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
            {id: '8', name: 'Linux服务器的所有的容器的内存使用率(container.mem.util)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
            {id: '9', name: 'Linux服务器开放多余的端口上报告警信息', checked: false, towName: '端口白名单', typeInput: '', title: '以;分割,可以使用-表示连续范围，例如1-1024'},
          ]
        }],
        // 第二节点 2栏 列显隐信息
        switchType: '',
      }
    },
    created() {},
    methods: {
      async next(num) {
        if (num === '-1') {
          this.active--;
        } else {
          if (this.active === 0) {
            if (!await this.fnFormValid()) {
              return;
            }
          }
          if (this.active === 1) {
            this.selectAllChange();
          }
          this.active++;
        }
      },
      // 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);
            }
          });
        });
      },
      // 点击下一步，获取多个table列表中所选中的行数据
      selectAllChange () {
        this.lastStepView();
      },
      // 最后一步展示
      lastStepView() {
        this.synthesisList = Object.assign({}, {data: this.linuxSystem}, {switchType: this.switchType});
      },
      // 提交
      submit() {
        console.log('ruleFormData==',this.ruleFormData);
        console.log('synthesisList==',this.synthesisList);
      },
      // 返回
      goBack() {
        this.$router.push({path:'/resource/alarmManage'});
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'submit':
              console.log('dataVal===',dataVal);
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style scoped>
  ::v-deep .el-collapse-item__header {
    background-color: #d4e3fc!important;
    /*color: #fff!important;*/
    padding-left: 20px;
    font-size: 1rem;
  }
  .el-tabs__content {
    height: 90%;
  }
  ::v-deep .el-checkbox__label {
    width: 97%!important;
    vertical-align: top;
  }
  .el-link.el-link--default:hover {
    color: #606266;
  }
 .el-link.el-link--default {
   vertical-align: sub;
 }
</style>
