<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">
          <Form v-for="item of formListTow" ref="formTowRef" :formList="[item]" :ruleFormData="item.ruleFormData" :config="item.config" @fnClick="callback">
            <template v-slot:btnType="scope">
              <el-button type="primary" @click="btnClick(scope)">{{scope.field.btnName}}</el-button>
            </template>
          </Form>
        </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: 'ServerScriptDetails',
    components: {Form, TableList},
    data() {
      return {
        active: 0,
        synthesisList: {},
        // 第一节点
        ruleFormData: {
          monitorTemp: 1,
        },
        config: {
          buttonGroup: []
        },
        formList: [{
          config: {title: '', colSpan: 'disBlock m0Auto'},
          controls: {
            id: {label: 'ID',hidden: true},
            switchName: {label: '策略名称', span: 12, type: 'input', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
            serverPort: {label: '描述', span: 12, type: 'textarea'},
            monitorTemp: {label: '关联资源组', span: 12, type: 'select'},
            resourceGroup: {label: '包含设备', span: 12, type: 'select', multiple: true}
          }
        }],
        // 第二节点 1栏
        formListTow: [],
        ruleFormDataTow: {},
        addNum: 0
      }
    },
    created() {
      this.formRender();
    },
    methods: {
      formRender(){
        this.formListTow = [
          {
            config: {title: '', key: Math.floor(Math.random() * 9000),buttonGroup: []},
            controls: {
              id: {label: 'ID',hidden: true},
              localAddress: {label: '源文件1地址格式', span: 12, type: 'radio', required: true,
                warningTitle: '注意：当文件大小超过100M时，请选择【外网HTTP(S)】地址格式',
                options: [{value: '1', label: '平台文件地址'}, {value: '2', label: '外网HTTP(s)'}]},
              btn: {label: '', span: 12, slotName: 'btnType', btnName: '添加', btnType: 'add'},
              serverPort: {label: '源文件1地址', span: 12, type: 'select'}
            },
            ruleFormData: {
              id: '',
              localAddress: '',
              serverPort: ''
            }
          },{
            config: {title: '', key: Math.floor(Math.random() * 9000),buttonGroup: []},
            controls: {
              id: {label: 'ID',hidden: true},
              fileAddress: {label: '目标目录', span: 12, type: 'input'},
            },
            ruleFormData: {
              id: '',
              fileAddress: ''
            }
          },{
            config: {title: '', key: Math.floor(Math.random() * 9000),buttonGroup: []},
            controls: {
              id: {label: 'ID',hidden: true},
              content: {label: '命令内容1', span: 24, type: 'input'},
              // btn: {label: '添加', span: 12, type: 'btn'},
            },
            ruleFormData: {
              id: '',
              content: ''
            }
          },
          {
            config: {title: '', key: Math.floor(Math.random() * 9000),buttonGroup: []},
            controls: {
              id: {label: 'ID',hidden: true},
              type: {label: '执行方式', span: 24, type: 'select'},
              date: {label: '定时时间', span: 12, type: 'date'},
              time: {label: '', span: 12, type: 'time'},
            },
            ruleFormData: {
              id: '',
              type: '',
              date: '',
              time: ''
            }
          }
        ];
      },
      async next(num) {
        if (num === '-1') {
          this.active--;
        } else {
          if (this.active === 0) {
            if (!await this.fnFormValid()) {
              return;
            }
          }
          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);
            }
          });
        });
      },
      // 插槽按钮操作
      btnClick(row){
        const { field } = row;
        // 找到当前点击项在 formListTow 中的索引
        const currentIndex = this.formListTow.findIndex(
          item => item.config.key === field.parentKey  // 需在子组件传递当前项的key
        );
        console.log('field===',field,'currentIndex===',currentIndex);
        if (field.btnType === 'add') {
          this.addNum++;
          const newKey = Math.floor(Math.random() * 9000);
          let slotForm = {
            config: {title: '', key: newKey,buttonGroup: []},
            index: this.addNum,
            controls: {
              id: {label: 'ID',hidden: true},
              localAddress: {label: `源文件${currentIndex + 1 + this.addNum}地址格式`, span: 12, type: 'radio', required: true,
                warningTitle: '注意：当文件大小超过100M时，请选择【外网HTTP(S)】地址格式', options: [{value: '1', label: '平台文件地址'}, {value: '2', label: '外网HTTP(s)'}]},
              btn: {label: '', span: 12, slotName: 'btnType', btnName: '删除', btnType: 'delete', parentKey: newKey},
              serverPort: {label: `源文件${currentIndex + 1 + this.addNum}地址`, span: 12, type: 'input'}
            },
            ruleFormData: {
              localAddress: '',
              serverPort: ''
            }
          };
          this.formListTow.splice(currentIndex + 1 + this.addNum, 0, slotForm);
        } else if (row && row.field.btnType === 'delete'){
          // this.addNum--;
          this.formListTow = this.formListTow.filter(
            item => item.config.key !== field.parentKey
          );
        }
      },
      // 提交
      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>
