<template>
  <!-- 规则库 -->
  <div id="OperModal">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="通用规则">
        <RulesModal
          ref="generalRules"
          :columns="columns"
          :dataSource="dataSource"
          @getRulesList="getRulesList"
          @operModalHandleOk="operModalHandleOk"
          @getOperationData="getOperationData" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="自定义规则" :forceRender="true">
        <RulesModal
          ref="defindRules"
          :columns="columns"
          :dataSource="dataSource"
          @getRulesList="getRulesList"
          @operModalHandleOk="operModalHandleOk"
          @getOperationData="getOperationData"
        />
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script type="text/ecmascript-6">
import RulesModal from './RulesModal'
import { getList } from '@/api/quality/rules'

export default {
  props: {},
  components: {
    RulesModal
  },
  data() {
    return {
      key: '1',
      columns: [
        {
          title: '维度',
          dataIndex: 'dimensionStr',
          key: 'dimensionStr',
          align: 'center'
        },
        {
          title: '规则名称',
          dataIndex: 'ruleName',
          key: 'ruleName',
          align: 'center'
        }
      ],
      generalDataSource: [],
      defindDataSource: [],
      dataSource: [],
      params: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted() {
    this.getRulesList()
  },
  methods: {
    operModalHandleOk() {
      this.$emit('operModalHandleOk')
    },
    getOperationData(data) {
      this.$emit('getOperationData', data)
    },
    // 查询规则
    getRulesList() {
      if (this.key === '1') {
        this.getRulesArr({ ruleType: 0, ...this.params })
      } else if (this.key === '2') {
        this.getRulesArr({ ruleType: 1, ...this.params })
      }
    },
    getRulesArr(params) {
      getList(params).then((res) => {
        if (res.code === 200) {
          const resRows = res.rows
          this.dataSource = resRows
          // console.log(`this.dataSource: `, this.dataSource)
        }
      })
    },
    // 标签切换
    callback(key) {
      this.key = key
      this.getRulesList()
      console.log('key:', typeof key)
    }
  }
}
</script>

<style scoped lang='less'>
// #OperModal {

// }
</style>
