<template>
  <!-- 标准文件 -->
  <div id="tableWrap">
    <a-table
      :data-source="tableData"
      :columns="columns"
      :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :bordered="true"
      :scroll="{ x: xscroll }"
      :pagination="{
        total:total,
        'show-less-items':true,
        'show-quick-jumper':true,
        'onChange':onPageChange,
        'hideOnSinglePage':true
      }"
    >
      <span slot="processStatus" slot-scope="text,record">
        {{ statusFormat(record) }}
      </span>
      <span slot="operationType" slot-scope="text,record">
        {{ operationFormat(record) }}
      </span>
      <span slot="dataStatus" slot-scope="text,record">
        {{ dataStatusFormat(record) }}
      </span>
      <div
        class="table-search-bar"
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, column }">
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`请输入${column.title}`"
          :value="selectedKeys[0]"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <div class="">
          <a-button
            type="primary"
            size="small"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" @click="() => handleReset(clearFilters)">
            重置
          </a-button>
        </div>
      </div>
      <a-icon
        slot="filterIcon"
        slot-scope="filtered"
        type="search"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
    </a-table>
  </div>

</template>

<script type="text/ecmascript-6">

export default {
  data() {
    return {
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      selectedState: [],
      columnsArr: [],
      xscroll: 1300
    }
  },
  props: {
    tableData: {
      type: Array,
      required: true
    },
    selectedRowKeys: {
      type: Array,
      required: true
    },
    selectedRows: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      default() {
          return 0
      }
    },
    statusFormat: {
        type: Function,
        default: null
    },
    operationFormat: {
        type: Function,
        default: null
    },
    dataStatusFormat: {
        type: Function,
        default: null
    }

  },

  mounted() {
    // this.getColumnsOption()
  },
  methods: {
    setHasSelected() {
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },

    handleReset(clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    onPageChange(e) {
      // this.$emit('getChangeList', e)
      this.$emit('changeParams', e)
      const selectedRowKeys = []
      const selectedRows = []
      this.onSelectChange(selectedRowKeys, selectedRows)
      // console.log('清空啦！！！！！')
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // this.selectedRowKeys = selectedRowKeys
      // console.log('选中： ', selectedRowKeys, 'selectedRows: ', selectedRows)

      this.$emit('getSelectedRowKeys', selectedRowKeys, selectedRows)
    }
  },
  watch: {
      columns: {
        deep: true,
        immediate: true,
        handler(val) {
          const length = this.columns.length
          if (length > 9) {
            this.xscroll = this.columns.length * 200 - 400
          }
        }
      }
    }

}
</script>
<style lang="less">
@import "/src/assets/globalTableStyle/filterTable.less";

</style>
