<template>
  <div>
    <a-table
      ref="table"
      :row-selection="rowSelection"
      :pagination="{
        total:total,
        'show-less-items':true,
        'show-quick-jumper':true,
        'onChange':onPageChange,
        'hideOnSinglePage':true
      }"
      :rowKey="(record,index)=>{return record.id}"
      :customRow="customRow"
      :columns="columns"
      :data-source="dataSource"
      :scroll="{x:xscroll}">
      <div
        class="table-search-bar"
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm,clearFilters, 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 {
		props: {
			columns: {
				type: Array,
				default: () => []
			},
			dataSource: {
				type: Array,
				default: () => []
			},
      total: {
        type: Number,
				required: true
      },
      isSelected: {
        type: Boolean,
        default: true
      }
		},
		data() {
			return {
				searchInput: null,
				searchText: '',
				selectedRowKeys: [],
				selectedRows: [],
        xscroll: 1300
			}
		},
    computed: {
      rowSelection() {
        if (this.isSelected) {
          return {
            onChange: (selectedRowKeys, selectedRows) => {
              // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
              this.onSelectChange(selectedRowKeys, selectedRows)
            },
            selectedRowKeys: this.selectedRowKeys,
            getCheckboxProps: record => ({
              props: {
                // disabled: record.name === 'Disabled User', // Column configuration not to be checked
                // name: record.name
              }
            })
          }
        } else {
          return null
        }
      }
    },
		methods: {
			handleReset(clearFilters) {
				clearFilters()
				this.searchText = ''
			},
			onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleSearch(selectedKeys, confirm, dataIndex) {
        confirm()
        console.log(`object`, selectedKeys, dataIndex)
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$emit('changeParams', dataIndex, selectedKeys[0])
      },
			onPageChange(e) {
				console.log(`e`, e)
        this.$emit('changeParams', 'pageNum', e)
			},
      customRow(record, index) {
        return {
          style: {
            // 字体颜色
            color: record.remarkDesc ? record.remarkDesc.fontColor : '#262626',
            // 行背景色
            'background-color': index % 2 === 0 ? '#FFFFFF' : '#FAFAFA'
          }
        }
      }

		},
    watch: {
      dataSource: {/* 当数据发生变化是置空选择的行 */
        deep: true,
        immediate: true,
        handler(val) {
          this.selectedRowKeys = []
          this.selectedRows = []
          // this.$set(this.$data, 'selectedRowKeys', [])
          // this.$set(this.$data, 'selectedRows', [])
        }
      },
      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">
.ant-table-pagination.ant-pagination{
	float: unset;
	display: flex;
	justify-content: center;
	width: 100%;
}
.table-search-bar{
  border-radius: 5px;
  padding: 10px 10px;
  box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  & > input{
    margin-bottom: 8px;
    border-radius: 5px;
  }
  & > div{
    display: flex;
    justify-content: space-between;

    button{
      width: 80px;
      height: 28px;
      border-radius: 5px;
    }
  }
}
</style>
