<template>
  <!-- 配置规则 -->
  <a-form-model
    ref="ruleConfigSpecForm"
    :model="configSpecForm"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item ref="modelId" label="选择模型:" prop="modelId">
      <a-tree-select
        v-model="configSpecForm.modelId"
        :replaceFields="{
          title:'catalogName',
          key: 'catalogCode',
          children:'children',
          value:'catalogCode'
        }"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="deptOptions"
        placeholder="请选择选择模型"
        tree-default-expand-all
        @change="onClassSelect">
      </a-tree-select>
    </a-form-model-item>
    <a-form-model-item ref="dataObject" label="数据对象:" prop="dataObject">
      <a-select
        mode="multiple"
        v-model="configSpecForm.dataObject"
        style="width: 100%"
        placeholder="请选择数据对象"
        @select="handleChange"
        @deselect="getDeSelect">
        <a-select-option v-for="(v, i) in dataObjectArr" :key="i">
          {{ v.attrName }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <div class="table-content">
      <ConfigTable
        ref="table"
        :columns="columns"
        :searchInput="searchInput"
        :dataSource="configSpecForm.rules"
        :total="total"
        @delDefinedRules="delDefinedRules"
        @getAlarm="getAlarm"
        @getOperation="getOperation"
        @changeParams="changeParams" />
    </div>
    <a-modal
      width="600px"
      v-model="OperModalVisible"
      title="规则库"
      :footer="null"
      :destroyOnClose="true"
      @ok="operModalHandleOk">
      <OperationModal
        ref="operModal"
        @operModalHandleOk="operModalHandleOk"
        @getOperationData="getOperationData" />
    </a-modal>
    <a-modal
      width="600px"
      v-model="parameModalVisible"
      title="规则参数"
      :footer="null"
      :destroyOnClose="true"
      @ok="parameModalHandleOk">
      <ParameModal
        ref="parameModal"
        :parameterRuleMax="parameterRuleMax"
        :parameterRuleMin="parameterRuleMin"
        @parameModalHandleOk="parameModalHandleOk"
        @getRuleParameters="getRuleParameters" />
    </a-modal>
    <a-modal
      width="600px"
      v-model="alarmModalVisible"
      title="告警条件"
      :footer="null"
      :destroyOnClose="true"
      @ok="alarmHandleOk">
      <AlarmModal
        ref="alarmModal"
        :warnNum="warnNum"
        :warnSymbol="warnSymbol"
        @alarmHandleOk="alarmHandleOk"
        @getAlarmData="getAlarmData" />
    </a-modal>

  </a-form-model>
</template>

<script type="text/ecmascript-6">
import ConfigTable from './ConfigTable.vue'
import AvatarModal from '@/views/account/settings/AvatarModal'
import OperationModal from './OperationModal'
import ParameModal from './ParameModal'
import AlarmModal from './AlarmModal'
import { getModelTree } from '@/api/interfaceManager/interfaceManager'
import { getAttributeApi } from '@/api/model/attribute'

export default {
  components: {
    ConfigTable,
    AvatarModal,
    OperationModal,
    ParameModal,
    AlarmModal
  },
  props: {
    editState: {
      type: Number,
      default: () => {}
    }
  },
  data() {
    // var vm = this
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      columns: [
        {
          title: '序号',
          dataIndex: 'orderNum',
          key: 'orderNum',
          align: 'center',
          scopedSlots: { customRender: 'orderNum' }
        },
        {
          title: '字段名称',
          dataIndex: 'fieldName',
          key: 'fieldName',
          align: 'center',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '字段描述',
          dataIndex: 'attrDesc',
          key: 'attrDesc',
          align: 'center'
        },
        {
          title: '已定义规则',
          dataIndex: 'rulesName',
          key: 'rulesName',
          align: 'center',
          scopedSlots: { customRender: 'rulesName' }
          // customRender: (text, record, index) => {
          //   var child = vm.$createElement('span', {
          //     domProps: {
          //       innerHTML: text
          //     },
          //     on: {
          //       click: function() {
          //         vm.delDefinedRules(record)
          //       }
          //     },
          //     style: {
          //       cursor: 'pointer'
          //     }
          //   })
          //   var obj = {
          //     children: child,
          //     attrs: {}
          //   }
          //   return obj
          // }
        },
        // {
        //   title: '操作',
        //   dataIndex: 'operation',
        //   key: 'operation',
        //   align: 'center',
        //   customRender: (text, record, index) => {
        //     var child = vm.$createElement('button', {
        //       domProps: {
        //         innerHTML: '配置规则'
        //       },
        //       on: {
        //         click: function() {
        //           vm.getOperation(record, index)
        //         }
        //       },
        //       style: {
        //         cursor: 'pointer'
        //       }
        //     })
        //     var obj = {
        //       children: child,
        //       attrs: {}
        //     }
        //     return obj
        //   }
        // },
        // {
        //   title: '规则参数',
        //   dataIndex: 'ruleParameters',
        //   key: 'ruleParameters',
        //   align: 'center',
        //   customRender: (text, record, index) => {
        //     var child = vm.$createElement('button', {
        //       domProps: {
        //         innerHTML: '参数'
        //       },
        //       on: {
        //         click: function() {
        //           vm.getParame(record, index)
        //         }
        //       },
        //       style: {
        //         cursor: 'pointer'
        //       }
        //     })
        //     var obj = {
        //       children: child,
        //       attrs: {}
        //     }
        //     return obj
        //   }
        // },
        {
          title: '告警条件',
          dataIndex: 'alarmStatus',
          key: 'alarmStatus',
          align: 'center',
          scopedSlots: { customRender: 'alarmStatus' }
          // customRender: (text, record, index) => {
          //   if (record.alarmStatus === '0') {
          //     var child = vm.$createElement('button', {
          //       domProps: {
          //         innerHTML: '未配置'
          //       },
          //       on: {
          //         click: function() {
          //           vm.getAlarm(record, index)
          //         }
          //       },
          //       style: {
          //         cursor: 'pointer'
          //       }
          //     })
          //     var obj = {
          //       children: child,
          //       attrs: {}
          //     }
          //     return obj
          //   } else {
          //     var child1 = vm.$createElement('button', {
          //       domProps: {
          //         innerHTML: '已配置'
          //       },
          //       on: {
          //         click: function() {
          //           vm.getAlarm(record, index)
          //         }
          //       },
          //       style: {
          //         cursor: 'pointer'
          //       }
          //     })
          //     var obj1 = {
          //       children: child1,
          //       attrs: {}
          //     }
          //     return obj1
          //   }
          // }
        },
        {
          title: '权重',
          dataIndex: 'rulesWeight',
          key: 'rulesWeight',
          align: 'center',
          scopedSlots: { customRender: 'rulesWeight' }
        }
      ],
      deptOptions: [],
      dataObjectArr: [], // 数据对象集合
      dataObjIndex: [], // 已选择数据对象
      editData: [],
      total: 0,
      searchInput: null,
      modalVisible: false,
      selectedRowsId: [],
      params: {
        pageSize: 10,
        pageNum: 1
      },
      parameData: [],

      OperModalVisible: false,
      parameModalVisible: false,
      alarmModalVisible: false,
      checkedOperation: null,

      configSpecForm: {
        modelId: '',
        dataObject: [], // 已选择数据对象
        rules: []
      },
      rules: {
        modelId: [{ required: true, message: '请选择模型', trigger: ['blur', 'change'] }],
        dataObject: [{ required: true, message: '请选择数据对象', trigger: 'blur' }]
      },
      parameterRuleMax: null,
      parameterRuleMin: null,
      warnNum: null,
      warnSymbol: null,
      alarmConStatus: '0'
    }
  },
  mounted() {
    this.getModelTree()
  },
  methods: {
    // 选择选择模型
    getModelTree() {
      getModelTree().then((res) => {
        this.deptOptions = res.data.rows
      })
    },
    // 数据对象
    getAttribute(id) {
      getAttributeApi({ modelId: id, ...this.params }).then((res) => {
        if (res.code === 200) {
          const arr = []
          const resRows = res.rows
          resRows.forEach((v, i) => {
            var obj = {}
            obj.attrId = v.id
            obj.orderNum = i
            obj.attrName = v.attrName
            obj.attrCode = v.attrCode
            obj.fieldName = v.attrCode + v.attrName
            obj.attrDesc = v.attrDesc
            if (this.editState !== 1) {
              obj.parameterRuleMax = null
              obj.parameterRuleMin = null
              obj.warnNum = null
              obj.warnSymbol = null
              obj.rulesId = ''
              obj.alarmStatus = this.alarmConStatus
            }
            arr.push(obj)
          })
            this.dataObjectArr = arr
            // console.log('%c [ this.dataObjectArr ]-335', 'font-size:13px; background:pink; color:#bf2c9f;', this.dataObjectArr)
          if (this.editState === 1) {
            this.disposeData(this.editData)
          }
        }
      })
    },
    disposeData(data) {
      data.forEach((v, i) => {
        this.dataObjectArr.forEach((ov, oi) => {
          if (v.attrId === ov.attrId) {
            this.configSpecForm.dataObject.push(oi)
            v = { ...v, ...ov }
            this.configSpecForm.rules.push(v)
          }
        })
      })
    },
    // 选择数据对象
    handleChange(index) {
      const last = this.configSpecForm.rules.length - 1
      const data = this.dataObjectArr[index]
      data.orderNum = last + 1
      this.configSpecForm.rules.push(data)
      // console.log('选择数据对象', index)
    },
    getDeSelect(v) {
      // console.log('%c [ v ]-361', 'font-size:13px; background:pink; color:#bf2c9f;', v)
      // console.log('%c [ dataObjectArr ]-363', 'font-size:13px; background:pink; color:#bf2c9f;', this.dataObjectArr)
      const attrId = this.dataObjectArr[v].attrId
      this.configSpecForm.rules.forEach((v, i) => {
        if (attrId === v.attrId) {
          this.configSpecForm.rules.splice(i, 1)
        }
      })
    },
    onClassSelect(selectedKeys, info) {
      this.configSpecForm.modelId = selectedKeys
      selectedKeys[0] && this.getAttribute(selectedKeys)
      this.configSpecForm.dataObject = []
      this.configSpecForm.rules = []
      // console.log('selected', selectedKeys, info)
    },

    // 删除自定义规则
    delDefinedRules(record) {
      const rulesId = record.attrId
      this.configSpecForm.rules.forEach((item) => {
        if (rulesId === item.attrId) {
          item.rulesName = ''
          item.rulesId = ''
        }
      })
      // console.log('删除自定义规则', this.configSpecForm.rules)
    },
    // 重新配置规则
    getOperation(record, index) {
      this.OperModalVisible = true
      this.checkedOperation = index
      // console.log('重新配置规则', record)
    },
    operModalHandleOk() {
      this.OperModalVisible = false
    },

    getOperationData(data) {
      // console.log(data, '-----------------')
      this.OperModalVisible = false
      const index = this.checkedOperation
      // console.log('this.configSpecForm.rules', this.configSpecForm.rules)
      this.$set(this.configSpecForm.rules[index], 'rulesName', data.rulesName)
      this.$set(this.configSpecForm.rules[index], 'rulesId', data.rulesId)
    },
    // 规则参数
    getParame(record, index) {
      this.parameModalVisible = true
      this.checkedOperation = index
      // console.log('规则参数', record)
      this.parameterRuleMax = record.parameterRuleMax
      this.parameterRuleMin = record.parameterRuleMin
    },
    parameModalHandleOk() {
      this.parameModalVisible = false
    },
    getRuleParameters(data) {
      this.parameModalVisible = false
      const index = this.checkedOperation
      this.configSpecForm.rules[index] = { ...this.configSpecForm.rules[index], ...data }
      // console.log('最大最小：', this.configSpecForm.rules[index])
    },

    // 告警条件
    getAlarm(record, index) {
      this.alarmModalVisible = true
      this.checkedOperation = index
      this.warnNum = record.warnNum
      this.warnSymbol = record.warnSymbol
    },
    alarmHandleOk() {
      this.alarmModalVisible = false
    },
    getAlarmData(data) {
      this.alarmModalVisible = false
      const index = this.checkedOperation
       this.$set(this.configSpecForm.rules[index], 'warnNum', data.warnNum)
       this.$set(this.configSpecForm.rules[index], 'warnSymbol', data.warnSymbol)
       this.$set(this.configSpecForm.rules[index], 'alarmStatus', data.alarmStatus)
      // this.configSpecForm.rules[index] = { ...this.configSpecForm.rules[index], ...data }
      // this.alarmConStatus = data.alarmStatus
      // console.log('告警条件ed:', this.configSpecForm.rules)
    },

    changeParams(key, value) {
      this.$set(this.params, key, value)
    },

    // 子组件校验表单
    validataConfigForm() {
      var flag = false
      this.$refs.ruleConfigSpecForm.validate((valid) => {
        if (valid) {
          // console.log('成功！！')
          flag = true
        } else {
          console.log('error submit!!')
          flag = false
        }
      })
      return flag
    }
  }
}
</script>

<style scoped lang='less'>
.table-content {
  button {
    background: none;
    border: none;
    display: inline-block;
    margin: 0 5px;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #2f54eb;
  }
  td>div>span{
    padding-right: 18px;
    background: url('../../../../assets/close.png') no-repeat center right;
    background-size: 13px 13px;
  }
}
</style>
