<template>
  <div class="generalRules-wrap">
    <div class="left-main">
      <h2 class="title">质量规则</h2>
      <Menu :menuData="menuData" @screenList="screenList"/>
    </div>
    <div class="right-main">
      <!-- <h2 class="title">通用规则</h2> -->

      <div class="button-wrap">
        <a-button type="add" @click="addForm">创建</a-button>

        <a-button type="edit" @click="editForm" :disabled="!isShowStop">编辑</a-button>
        <a-button type="delete" :disabled="!isShowStart" @click="getDelete()">删除</a-button>
      </div>
      <a-modal title="Title" :visible="visible" @ok="delItem" @cancel="handleCancel">
        <p>确认删除所选中数据</p>
      </a-modal>
      <div class="table-content">
        <FilterTable
          ref="table"
          :columns="columns"
          :searchInput="searchInput"
          :dataSource="dataSource"
          :total="total"
          @changeParams="changeParams" />
      </div>

      <a-modal width="800px" v-model="modalVisible" title="新增目标系统" :footer="null" @ok="handleOk">
        <FormModalAdd ref="model" @handleOk="handleOk" />
      </a-modal>

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import FilterTable from '@/components/filterTable'
import Menu from './components/Menu'
import FormModalAdd from './components/FormModalAdd'
import { getList, getRemove, getRuleTypeNumApi } from '@/api/quality/rules'
export default {
  components: {
    FilterTable,
    FormModalAdd,
    Menu
  },
  data() {
    return {
      menuData: [
        { title: '完整性', nums: '1', type: '0' },
        { title: '准确性', nums: '2', type: '1' },
        { title: '一致性', nums: '0', type: '2' },
        { title: '及时性', nums: '0', type: '3' },
        { title: '唯一性', nums: '1', type: '4' },
        { title: '合法性', nums: '6', type: '5' }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'orderNum',
          key: 'orderNum',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'orderNum' }
        },
        {
          title: '规则名称',
          dataIndex: 'ruleName',
          key: 'ruleName',
          align: 'center',
          width: 290,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '规则类型',
          dataIndex: 'ruleTypeStr',
          key: 'ruleTypeStr',
          align: 'center'
        },
        {
          title: 'SQL模板语句',
          dataIndex: 'sqlString',
          key: 'sqlString',
          align: 'center'
        }
      ],

      dataSource: [],

      total: 0,
      searchInput: null,
      modalVisible: false,
      selectedRowsId: [],

      params: {
        // ruleType: 0,
        pageSize: 10,
        pageNum: 1
      },
      visible: false,
      initState: true
    }
  },
  mounted() {
    this.initState = false
    this.getListArr()
    this.getRuleTypeNum()
  },
  computed: {
    isShowStart() {
      if (this.initState) {
        return false
      } else {
         if (this.$refs.table.selectedRows.length === 1) {
           return this.$refs.table.selectedRows[0].ruleType !== 0 && this.$refs.table.selectedRows[0].isDel !== 0
         } else {
           return false
         }
      }
    },
    isShowStop() {
      if (this.initState) {
        return false
      } else {
        return this.$refs.table.selectedRows.length === 1 && this.$refs.table.selectedRows[0].ruleType !== 0
      }
    }
  },
  methods: {
    // 列表及查询
    getListArr() {
      getList(this.params).then((res) => {
        if (res.code === 200) {
          const resRows = res.rows
          resRows.forEach((i, index) => {
            i.orderNum = index + 1
          })
          this.dataSource = resRows
          // console.log(`this.dataSource: `, this.dataSource)
        }
      })
    },

    // 创建
    addForm() {
      this.modalVisible = true
      setTimeout(() => {
        this.$refs.model.submitType = 'add'
        this.$refs.table.selectedRows[0] = {
          ruleName: '',
          ruleType: 1,
          ruleTypeStr: '',
          dimensionStr: '',
          sqlString: '',
          ruleDescribe: ''
        }
        this.$refs.model.form = Object.assign({}, this.$refs.table.selectedRows[0])
      }, 300)
    },
    // 编辑
    editForm() {
      this.modalVisible = true
      setTimeout(() => {
        this.$refs.model.submitType = 'edit'
        this.$refs.model.form = Object.assign({}, this.$refs.table.selectedRows[0])
      }, 300)
    },

    // 删除
    getDelete() {
      this.visible = true
    },
    delItem() {
      var that = this
      this.$refs.table.selectedRows.forEach((item) => {
        console.log(`=============item.id`, item.id)
        const { id } = this.$refs.table.selectedRows[0]
        console.log(`id`, item.id === id)
        // if (item.status === '0') {
        getRemove({ id }).then((res) => {
          console.log(`this.res: `, res)

          that.clearSelectedRows()
          that.getListArr('')
          that.$message.success('删除成功', 3)
          that.visible = false
          that.confirmLoading = false
        })
        // } else {
        //   that.$message.error('被引用的不能删除')
        //   that.visible = false
        // }
      })
    },

    // 确认删除所选中数据
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.modalVisible = false
      this.getListArr('')
    },
    changeParams(key, value) {
      this.$set(this.params, key, value)
    },
    // 筛选
    screenList(type) {
      console.log('type:', type)
      this.$set(this.params, 'dimension', type)
      console.log('====:', this.params)
      getList(this.params).then((res) => {
        if (res.code === 200) {
          const resRows = res.rows
          resRows.forEach((i, index) => {
            i.orderNum = index + 1
          })
          this.dataSource = resRows
        }
      })
    },

    clearSelectedRows() {
      this.$refs.table.selectedRows = []
      this.$refs.table.selectedRowKeys = []
    },
    getRuleTypeNum() {
      getRuleTypeNumApi().then(res => {
        if (res.code === 200) {
          this.menuData = res.data
        }
      })
    }
  },
  watch: {
    params: {
      deep: true,
      immediate: true,
      handler(val) {
        this.getListArr('')
      }
    }
  }
}
</script>

<style lang='less' scoped>
.generalRules-wrap {
  padding: 0 40px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 0 20px;

  .left-main {
    background: #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 25px;
    box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  }
  .right-main {
    background: #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 25px;
    box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
    .button-wrap {
      margin: 20px 0 15px;
    }
  }
}
</style>
