<template>
  <!-- 规则库 -->
  <div id="rulesModal">
    <div class="selectBar">
      <div>
        <a-select
          show-search
          placeholder="请选择维度"
          option-filter-prop="children"
          style="width:100%"
          :filter-option="filterOption"
          @change="handleChange">
          <a-select-option v-for="(value, index) in dimensionData" :value="value" :key="index">
            {{ value }}
          </a-select-option>

        </a-select>
      </div>
      <div>
        <a-input-search placeholder="请输入规则名称" @search="onSearch" />
      </div>
    </div>
    <FilterTable
      ref="table"
      :columns="columns"
      :dataSource="newDataSource"
      :total="total"
      @changeParams="changeParams"
    />
    <div class="btn-list">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>
      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </div>
  </div>

</template>

<script type="text/ecmascript-6">
import FilterTable from './filterTable'

export default {
  components: {
    FilterTable
  },
  props: {
    dataSource: {
      type: Array,
      default: () => {}
    },
    columns: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      dimensionData: ['完整性', '唯一性', '合法性', '准确性', '一致性', '及时性'],
      total: 0,
      newDataSource: [],
      params: {
        pageSize: 10,
        pageNum: 1
      },
      checkedData: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.$emit('getRulesList')
      // console.log('this.getRulesArr:', this.dataSource)
    },

    // 取消
    handleOk() {
      this.$emit('operModalHandleOk')
    },
    // 提交
    onSubmit() {
      var data = this.$refs.table.selectedRows[0]
      this.checkedData.rulesId = data.id
      this.checkedData.rulesName = data.ruleName
      // console.log('提交data：', this.checkedData)
      this.$emit('getOperationData', this.checkedData)
    },
    changeParams(key, value) {
      this.$set(this.params, key, value)
      // console.log('changeParams:', key)
    },

    handleChange(value) {
      this.newDataSource = []
      this.dataSource.forEach((item) => {
        if (item.dimensionStr === value) {
          this.newDataSource.push(item)
        }
      })
    },
    onSearch(value) {
      this.newDataSource = []
      const _search = value.toLowerCase()
      if (_search) {
        this.dataSource.filter((item) => {
          if (item.ruleName.toLowerCase().indexOf(_search) !== -1) {
            this.newDataSource.push(item)
          }
        })
      }
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  },
  watch: {
    dataSource: {
      deep: true,
      immediate: true,
      handler(n, o) {
        this.newDataSource = n
      }
    }
  }
}
</script>

<style scoped lang='less'>
#rulesModal {
  .selectBar {
    width: 94%;
    margin: 15px auto 20px;
    display: flex;
    justify-content: flex-start;
    & > div {
      width: 200px;
      margin-right: 20px;
    }
  }
  /deep/.ant-table-thead > tr > th {
    display: none;
  }
  .ant-table-wrapper {
    width: 94%;
    margin: 0 auto;
  }
  .btn-list {
    margin: 20px 0 0;
    text-align: center;
  }
}
</style>
