<template>
  <div class="app-container">
    <div>
      <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;">
        <!--    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">
          <el-tabs type="border-card">
            <!--    2-1    -->
            <el-tab-pane v-if="ruleFormData.monitorTemp === 1" label="Linux系统">
              <el-tabs v-model="linuxActiveName">
                <!--    2-1-1    -->
                <el-tab-pane label="监控项" name="first">
                  <el-collapse v-model="activeNames">
                    <el-collapse-item v-for="(item,index) of linuxSystem.monitorList" :title="item.title" :name="index">
                      <template v-if="item.modelName === 'other'">
                        <div class="plr-50">
                          <div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
                            <div class="disInlineBlock w45">
                              <span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
                              <span>{{city.towName}}</span>
                            </div>
                            <div class="disInlineBlock" style="color: #606266">
                              采集周期：<el-select v-model="city['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
                              <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
                            </el-select>
                            </div>
                          </div>
                        </div>
                      </template>
                      <template v-else>
                        <template slot="title">
                          {{item.title}}
                          <div style="font-size: 13px;margin-left: 15%;">
                            采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
                            <el-option v-for="val in option" :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="w45 mt10 mb10 disInlineBlock fontSize15">
                            <span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
                            <span>{{city.towName}}</span>
                          </div>
                        </div>
                      </template>
                    </el-collapse-item>
                  </el-collapse>
                </el-tab-pane>
                <!--    2-1-2    -->
                <el-tab-pane label="自动发现项" name="second">
                  <el-collapse v-model="activeNames">
                    <el-collapse-item v-for="(item,index) of linuxSystem.autoFindList" :title="item.title" :name="index">
                      <template slot="title">
                        {{item.title}}
                        <div style="font-size: 13px;margin-left: 15%;">
                          采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
                          <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
                        </el-select>
                        </div>
                      </template>
                      <div style="display: flex;justify-content: center;">
                        <div class="plr-50">
                          <div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
                            <span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
                            <span>{{city.towName}}</span>
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
            <!--    2-2    -->
            <el-tab-pane v-if="ruleFormData.monitorTemp === 2" label="华为交换机">
              <span slot="label">
                华为交换机
                <el-tooltip trigger="click" effect="dark" placement="top">
                  <template #content>针对CloudEngine 58&68&78&88&98系列</template>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-tabs v-model="hwActiveName">
                <!--    2-2-1    -->
                <el-tab-pane label="监控项" name="first">
                  <template v-for="(item,index) of monitorTable['nodeOne']">
                    <div class="plr-50">
                      <div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
                        <div class="disInlineBlock w45">
                          <span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
                          <span>{{city.towName}}</span>
                        </div>
                        <div class="disInlineBlock" style="color: #606266">
                          采集周期：<el-select v-model="city['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
                          <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
                        </el-select>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-tab-pane>
                <!--    2-2-2    -->
                <el-tab-pane label="自动发现项" name="second">
                  <el-collapse v-model="activeNames">
                    <el-collapse-item v-for="(item,index) of monitorTable['nodeTow']" :title="item.title" :name="index">
                      <template slot="title">
                        {{item.title}}
                        <div style="font-size: 13px;margin-left: 15%;">
                          采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
                          <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
                        </el-select>
                        </div>
                      </template>
                      <div style="display: flex;justify-content: center;">
                        <div class="plr-50">
                          <div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
                            <span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
                            <span>{{city.towName}}</span>
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!--    active:3    -->
        <div v-show="active === 2">
          <MonitorStategyView :ruleForm="ruleFormData" :otherList="synthesisList"></MonitorStategyView>
        </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 MonitorStategyView from './view'
  export default {
    name: 'MonitorStategyDetails',
    components: {Form, TableList, MonitorStategyView},
    data() {
      return {
        active: 0,
        activeNames: [0, 1],
        linuxActiveName: 'first',
        hwActiveName: 'first',
        checkAllParams: {},
        checkParams: {week: '',cpu: [], other: [], mount: [], netPort:[]},
        allSelectedData: {},
        synthesisList: {},
        // 第一节点
        ruleFormData: {
          monitorTemp: 2,
        },
        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;'},
            resourceGroup: {label: '关联资源组', span: 12, type: 'select'}
          }
        }],
        // 第二节点 1栏
        option: [{label: '60min', value: '60'},{label: '15min', value: '15'}],
        linuxSystem: {
          monitorList: [{
            firstTitle: 'Linux系统', secondTitle: '监控项', title: 'CPU监控', modelName: 'cpu',time: '',
            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分钟负载'},
            ]
          },{
            firstTitle: 'Linux系统', secondTitle: '监控项', title: '其他监控', modelName: 'other',
            checkList: [
              {id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间（字节）',time: ''},
              {id: '7', name: 'proc.num.run', towName: '正在运行的进程数',time: ''},
              {id: '8', name: 'memory.utilization', towName: '内存利用率',time: ''},
              {id: '9', name: 'system.users.num', towName: '登录用户数',time: ''},
              {id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比',time: ''},
            ]
          }],
          autoFindList: [{
            firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现挂载文件系统', modelName: 'mount', time: '',
            checkList: [
              {id: '1', name: 'vfs.fs.type', towName: '某个挂载点（如/）的文件系统类型'},
              {id: '2', name: 'vfs.fs.size.free', towName: '某个挂载点（如/）的可用空间'},
              {id: '3', name: 'vfs.fs.size.total', towName: '某个挂载点（如/）的总空间'},
              {id: '4', name: 'vfs.fs.util', towName: '某个挂载点（如/）的空间利用率'},
            ]},{
            firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现网络接口', modelName: 'netPort', time: '',
            checkList: [
              {id: '1', name: 'net.if.in.dropped', towName: '某个网络接口（如interface eth0）的入站丢包'},
              {id: '2', name: 'net.if.out.dropped', towName: '某个网络接口（如interface eth0）的出站丢包'},
              {id: '3', name: 'net.if.out', towName: '某个网络接口（如interface eth0）的发送流量'},
              {id: '4', name: 'net.if.out.type', towName: '某个网络接口（如interface eth0）的接口类型'},
              {id: '5', name: 'net.if.in', towName: '某个网络接口（如interface eth0）的接收流量'}
            ]
          }],
        },
        // 第二节点 2栏 列显隐信息
        monitorTable: {
          nodeOne: [{
            firstTitle: '华为交换机', secondTitle: '监控项', modelName: 'other',
            checkList: [
              {id: '1', name: 'net.if.in.dropped', towName: '某个网络接口（如interface eth0）的入站丢包',time: ''},
              {id: '2', name: 'net.if.out.dropped', towName: '某个网络接口（如interface eth0）的出站丢包',time: ''},
              {id: '3', name: 'net.if.out', towName: '某个网络接口（如interface eth0）的发送流量',time: ''},
              {id: '4', name: 'net.if.out.type', towName: '某个网络接口（如interface eth0）的接口类型',time: ''},
              {id: '5', name: 'net.if.in', towName: '某个网络接口（如interface eth0）的接收流量',time: ''}
            ]
          }],
          nodeTow: [
            {
              firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', modelName: 'server', time: '',
              checkList: [
                {id: '1', name: 'vfs.fs.type', towName: '某个挂载点（如/）的文件系统类型'},
                {id: '2', name: 'vfs.fs.size.free', towName: '某个挂载点（如/）的可用空间'},
                {id: '3', name: 'vfs.fs.size.total', towName: '某个挂载点（如/）的总空间'},
                {id: '4', name: 'vfs.fs.util', towName: '某个挂载点（如/）的空间利用率'},
              ]
            },
            {
              firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现', modelName: 'light', time: '',
              checkList: [
                {id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间（字节）'},
                {id: '7', name: 'proc.num.run', towName: '正在运行的进程数'},
                {id: '8', name: 'memory.utilization', towName: '内存利用率'},
                {id: '9', name: 'system.users.num', towName: '登录用户数'},
                {id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比'},
              ]
            },
        ]},
      }
    },
    created() {},
    methods: {
      async next(num) {
        if (num === '-1') {
          this.active--;
        } else {
          if (this.active === 0) {
            if (!await this.fnFormValid()) {
              return;
            } else {
              this.dataProcess();
            }
          }
          if (this.active === 1) {
            this.selectAllChange();
          }
          this.active++;
        }
      },
      // 数据处理
      dataProcess() {
        let typeVal = {};
        if (this.ruleFormData && this.ruleFormData['monitorTemp'] === 1) {
          typeVal = this.linuxSystem;
        } else {
          typeVal = this.monitorTable;
        }
        Object.keys(typeVal).forEach(res => {
          typeVal[res].forEach(item => {
            this.checkParams[item.modelName] = [];
            this.checkAllParams[item.modelName] = {
              firstTitle: item.firstTitle,
              secondTitle: item.secondTitle,
              lastTitle: item.title,
              data: []
            };
          });
        })
      },
      // 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.allSelectedData = {};
        // Object.keys(this.monitorTable).forEach(res => {
        //   this.monitorTable[res].forEach(item => {
        //     // 获取子组件的ref（格式：tableRef_${tableKey}）
        //     const tableRef = this.$refs[`tableRef_${item.config.tableKey}`];
        //     if (tableRef && tableRef.length && tableRef[0].ids.length) {
        //       // 调用子组件的方法获取选中数据
        //       const selectedData = tableRef[0].getSelectedData();
        //       // firstTitle: '华为交换机', secondTitle: '监控项',
        //       selectedData['firstTitle'] = item.firstTitle;
        //       selectedData['secondTitle'] = item.secondTitle;
        //       selectedData['lastTitle'] = item.title;
        //       this.allSelectedData[selectedData.tableKey] = selectedData;
        //     }
        //   });
        // });
        this.lastStepView();
      },
      // 最后一步展示
      lastStepView() {
        this.synthesisList = Object.assign({}, this.checkAllParams);
      },
      // 单个选择按钮
      handleCheckedCitiesChange(changeVal,iteListAll) {
        if (iteListAll && iteListAll.time) {
          this.checkAllParams[iteListAll.modelName].time = iteListAll && iteListAll.time;
        }
        this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'];
      },
      // 提交
      submit() {
        console.log('ruleFormData==',this.ruleFormData);
        console.log('synthesisList==',this.synthesisList);
      },
      // 返回
      goBack() {
        this.$router.push({path:'/resource/monitorStategy'});
      },
      // 监听事件
      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;
  }
</style>
