<template>
  <div class="app-container">
    <Form :formList="formList" :ruleFormData="ruleForm" :config="config" @fnClick="callback">
      <template #tempConfigVal="{field, model, formModel}">
        <div style="margin-left: -120px">
          <TableList id="tabHeadCenter" ref="tabRef" :columns="columns" :config="tableConfig" :queryParams="{total: 0}" :tableList="roleList"  @fnClick="callback">
            <template #tempEditModel="{ row, valueKey, column }">
              {{column.min}}
              <el-input-number v-if="column.type === 'number'" v-model="row[valueKey]" style="width: 90%;" :min="0" />
              <el-select style="width: 90%;" v-else v-model="row[valueKey]" clearable @change="callback({fnCode: valueKey}, column, row)">
                <el-option v-for="item in column.options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </template>
          </TableList>
        </div>
      </template>
    </Form>
  </div>
</template>

<script setup name="Handle">
  import Form from '@/components/form/index.vue';
  import {getAlarmLog, getAlarmThreshold, addAlarmThreshold} from "@/api/disRevenue/resource"
  import TableList from '@/components/table/index.vue';
  export default {
    name: 'AlarmLogDetails',
    components: {Form, TableList},
    dicts: ['alarm_type', 'compare_operator', 'condition_item'],
    data() {
      return {
        ruleForm: {},
        formList: [],
        config: {},
        paramsData: {},
        roleList: [{alarmType: '', conditionItem: '', compareOperator: '', thresholdValue: ''}],
        columns: {},
        tableConfig: {},
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.type === 'alarmThreshold') {
        this.fnGetAlarmThreshold();
      } else if (this.paramsData && this.paramsData.id) {
         this.getFormDataList(this.paramsData.id);
      }
      this.fnFormList();
    },
    methods: {
      // formList集合
      fnFormList(objVal) {
        if (this.paramsData.readonly) {
          this.formList = [{
            config: {title: '基本信息',readonly: true},
            controls: {
              id: {label: 'ID',hidden: true},
              groupName: {label: '资源名称', span: 24, type: 'input', rules: [{required: true, message: '请输入名称', trigger: 'blur'}]},
              ip: {label: '源IP', span: 24, type: 'input'},
              time: {label: '发生时间', span: 24, type: 'date'},
              num: {label: '重复次数', span: 24, type: 'input'},
              type: {label: '状态', span: 24, type: 'input'},
              description: {label: '内容', span: 24, type: 'textarea'}
            }
          }];
          this.config = {buttonGroup: [{title: '返回', fnCode: 'goBack'}]};
        } else {
          this.formList = [{
            config: {title: '基本信息'},
            controls: {
              id: {label: 'ID',hidden: true},
              configVal: {label: '', span: 24, slotName: 'tempConfigVal'},
            }
          }];
          this.columns = {
            id: { label: `ID`,width: '50'},
            alarmType: { label: `告警类别`, minWidth: '100',type: 'select', options: this.dict.type.alarm_type, slotName: 'tempEditModel', visible: true},
            conditionItem: { label: `条件项`, minWidth: '100',type: 'select', options: this.dict.type.condition_item, slotName: 'tempEditModel', visible: true},
            compareOperator: { label: `运算符`, minWidth: '100',visible: true, type: 'select', options: this.dict.type.compare_operator, slotName: 'tempEditModel'},
            thresholdValue: { label: `值`, minWidth: '100',visible: true, type: 'number', slotName: 'tempEditModel'},
          };
          this.tableConfig = {
            colHiddenCheck: true, colTopHiddenIcon: true,
            tableButton: {
              line: [
                {content: ' ', fnCode: 'add', icon: 'el-icon-plus', type: 'primary'},
                {content: ' ', fnCode: 'delete', icon: 'el-icon-minus', type: 'danger', showName: 'showNum', showVal: '1'},
              ]
            }
          };
        }
      },
      // 获取详情
      getFormDataList(id) {
        getAlarmLog(id).then(val => {
          if (val && val.data) {
            this.ruleForm = val.data;
          }
        }).catch(() => {
          this.$modal.msgError("操作失败")
        });
      },
      // 告警阈值配置列表
      fnGetAlarmThreshold() {
        getAlarmThreshold().then(res => {
          if (res && res.data && res.data.length > 0) {
            this.roleList = res.data.map((item,index) => {
              return Object.assign({}, item, {targetIndexNum: index+1, showNum: index > 0 ? '1' : null});
            });
          }
        });
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'add':
              this.roleList.push({targetIndexNum: this.roleList.length + 1, showNum: '1', alarmType: '', conditionItem: '', compareOperator: '', thresholdValue: ''});
              break;
            case 'delete':
              this.roleList.splice(this.roleList.findIndex(item => item.targetIndexNum === dataVal.targetIndexNum), 1);
              break;
            case 'submit':
              addAlarmThreshold({thresholdList: this.roleList}).then(res => {
                this.$router.push("/resource/alarmLog");
              });
              break;
            case 'cancel':
              this.$router.push("/resource/alarmLog");
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style scoped>
  ::v-deep .el-table--medium .el-table__cell {
    text-align: center!important;
    /*vertical-align: top;*/
  }
</style>
