<template>
  <!-- 标准文件 -->
  <div id="tableWrap">
    <a-table
      :rowKey="(record,index)=>{return index}"
      :pagination="pagination"
      :customRow="customRow"
      :data-source="tableData"
      :columns="columns"
      :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
    >
      <span slot="fileName" slot-scope="text, record" >
        <a :title="record.fileName" @click="myDownload(record)">{{ record.fileName }}</a>
      </span>

      <span slot="fileDesc" slot-scope="text, record" >
        <a :title="record.fileDesc">{{ record.fileDesc }}</a>
      </span>

      <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(selectedKeys,clearFilters,column.dataIndex)">
            重置
          </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">
import '@/assets/globalTableStyle/filterTable.less'

export default {
  data() {
    return {
      searchText: '',
      searchedColumn: '',
      searchInput: null,
      status: [],

      pagination: {
        pageSize: 10, // 默认每页显示数量
        defaultCurrent: 1,
        current: 1,
        showQuickJumper: true,
				showSizeChanger: true, // 显示可改变每页数量
        hideOnSinglePage: true,
				pageSizeOptions: ['10', '20', '30', '40'], // 每页数量选项
				showTotal: total => `共 ${ Math.ceil(total / this.pagination.pageSize)} 页   共 ${total} 条`, // 显示总数
				onChange: this.onPageChange,
				onShowSizeChange: this.onShowSizeChange // 改变每页数量时更新显示
			}

    }
  },
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    selectedRowKeys: {
      type: Array,
      required: true
    },
    selectedRows: {
      type: Array,
      required: true
    }
  },

  methods: {
    onPageChange(current) {
      this.pagination.current = current
      const selectedRowKeys = []
      const selectedRows = []
      this.onSelectChange(selectedRowKeys, selectedRows)
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.current = current
    },

    myDownload(record) {
      window.open(`/api${record.fileUrl}`, '_blank')
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      // console.log('-------------')

      this.$emit('changeParams', dataIndex, selectedKeys[0])
    },

    handleReset(selectedKeys, clearFilters, dataIndex) {
      clearFilters()
      this.searchText = ''
      this.searchedColumn = ''

      // console.log(selectedKeys[0], dataIndex)
      this.$emit('changeParams', dataIndex, '')
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRows-------------', selectedRows)
      this.$emit('getSelectedRowKeys', selectedRowKeys, selectedRows)
    },

    customRow(record, index) {
      return {
        style: {
          // 字体颜色
          color: record.remarkDesc ? record.remarkDesc.fontColor : '#262626',
          // 行背景色
          'background-color': index % 2 === 0 ? '#FFFFFF' : '#FAFAFA'
        }
      }
    }
  }

}
</script>
<style lang="less">
#tableWrap {
  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    text-align: center;
  }
  .ant-spin-nested-loading {
    background: #fff;
  }
  .ant-table-pagination.ant-pagination {
    margin: 50px auto 20px;
    text-align: center;
    float: none;
  }
  .ant-table{
    border: 1px solid #e8e8e8;
  }

}
.tableSeachBar{
  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>
