<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
      }"
      @change="handleChange"
    >
      <span slot="dataStatus" slot-scope="text,record">
        {{ dataStatusFormat(record) }}
      </span>
      <span slot="time" slot-scope="time">
        {{ time | filterTime(time) }}
      </span>
      <div
        class="table-search-bar"
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys,clearFilters, 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">
import moment from 'moment'
// const tableData = [
//   {
//     key: '1',
//     fileName: 'title1',
//     fileType: '国家标准',
//     fileIntroduce: 'qqqq',
//     createBy: 'John Brown',
//     createTime: '2021-12-01',
//     status: '停用'
//   }
// ]

export default {
  data() {
    return {
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      // selectedRowKeys: [],
      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
      }
    },

    dataStatusFormat: {
      type: Function,
      default() {
          return null
      }
      }
  },

  mounted() {
    // this.getColumnsOption()
  },
  methods: {
    onPageChange(e) {
      // this.$emit('getSerachList', e)
      this.$emit('changeParams', e)
      const selectedRowKeys = []
      const selectedRows = []
      this.onSelectChange(selectedRowKeys, selectedRows)
      // console.log('清空啦！！！！！')
    },
    setHasSelected() {
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      if (selectedKeys[0]) {
          this.$set(this.$parent.params, dataIndex, selectedKeys[0])
      }
    },

    handleReset(clearFilters) {
      clearFilters()
      this.searchText = ''
      this.$parent.params = {
        pageSize: 10,
        pageNum: 1
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // this.selectedRowKeys = selectedRowKeys
      // console.log('选中： ', selectedRowKeys, 'selectedRows: ', selectedRows)

      this.$emit('getSelectedRowKeys', selectedRowKeys, selectedRows)
    },
    handleChange(pagination, filters, sorter) {
      console.log('%c [ sorter ]-149', 'font-size:13px; background:pink; color:#bf2c9f;', sorter)
      console.log('%c [ filters ]-149', 'font-size:13px; background:pink; color:#bf2c9f;', filters)
      console.log('%c [ pagination ]-149', 'font-size:13px; background:pink; color:#bf2c9f;', pagination)
      this.$set(this.$parent.params, 'field', sorter.field)
      if (sorter.order === 'descend') {
        this.$set(this.$parent.params, 'order', 'desc')
      } else if (sorter.order === 'ascend') {
       this.$set(this.$parent.params, 'order', 'asc')
      } else {
        this.$set(this.$parent.params, 'order', '')
      }
    }
  },
  watch: {
      columns: {
        deep: true,
        immediate: true,
        handler(val) {
          const length = this.columns.length
          if (length > 9) {
            this.xscroll = this.columns.length * 200 - 200
          }
        }
      }
  },
  filters: {
      filterTime(time) {
          return moment(time).format('YYYY-MM-DD HH:mm:ss')
      }
  }
}
</script>
<style lang="less">
@import "/src/assets/globalTableStyle/filterTable.less";

</style>
