<template>
  <div>
    <div style="width: 100%;min-height: 32px;background-color: #f8f8f9;border-top:1px solid #dcdee2 ;border-left:1px solid #dcdee2;border-right:1px solid #dcdee2">
      <Row type="flex" style="margin-top: 5px">
        <Col span="13" order="1" style="text-align: left">
          <bc-custom-sort ref="customSort" :sortParams.sync="sortParams" :searchForm="searchForm" @reload-data="reloadData"></bc-custom-sort>
        </Col>
        <Col span="9" order="2" style="text-align: right">
          <bc-export-excel :dataColumns="columnsShow" :selectedData="selectedData" :tableData="tableData"
                       :excelName="'测试导出'"
                       :searchForm="searchForm" @export-data="exportData"
                       :getData="this.getList"></bc-export-excel>
        </Col>
        <Col span="2" order="3" style="text-align: center">
          <bc-table-ex :dataColumns.sync='dataColumns' :columnsShow.sync="columnsShow" firstColumn="selection" :pageKey="this.$options.name"
          layout ex></bc-table-ex>
        </Col>
      </Row>
    </div>
    <Table ref="tables" border :columns="columnsShow" :data="tableData" @on-sort-change="sortChange"  @on-selection-change="selectedChange">
      <template #label slot-scope="{row}">
        <a>{{row.label}}</a>
      </template>
    </Table>
    <page ref="tableLay-page" @reload-data="reloadData" :dataCount="dataCount" size="small"
          :pageSize.sync="pageSize"></page>
  </div>
</template>
<script>
import bcTableEx from './bc-table-ex/bc-table-ex'
import bcCustomSort from './bc-custom-sort'
import { getBaseSeniorPage,getBaseSeniorList} from './bc-senior/senior.js'
import page from '_c/page'
import bcExportExcel from './bc-export-excel'

  export default {
    name:'tableLay',
    components: {
      bcTableEx,
      bcCustomSort,
      page,
      bcExportExcel
    },
    data() {
      return {
        sortParams:[],
        searchForm:{},
        getList:getBaseSeniorList,
        dataColumns: [
          {title: '名称', key: 'label', headCenter: true, slot: 'label', sortable: 'custom',show:true},
          {title: '页面名称', key: 'pageName',show:true},
          {title: '用户id', key: 'userId', ifText:true,show:true},
          {title: '名称2', key: 'label', headCenter: true, slot: 'label',show:true},
          //{title: '查询条件', key: 'findItem', headCenter: true, sortable: 'custom'},
          {title: '页面名称2', key: 'pageName',show:false},
          {title: '用户id2', key: 'userId',show:true},
          {title: '名称3', key: 'label', headCenter: true, slot: 'label',show:true},
          //{title: '查询条件', key: 'findItem', headCenter: true, sortable: 'custom'},
          {title: '页面名称3', key: 'pageName',show:true},
          {title: '用户id3', key: 'userId',show:true},
          {title: '名称4', key: 'label', headCenter: true, slot: 'label',show:true},
          //{title: '查询条件', key: 'findItem', headCenter: true, sortable: 'custom'},
          {title: '页面名称4', key: 'pageName',show:true},
          {title: '用户id4', key: 'userId',show:true},
          {title: '查询条件', key: 'findItem', headCenter: true, sortable: 'custom', ifText:true, ifNotExport:true,show:true},
        ],
        dataCount:0,
        pageSize:10,
        columnsShow: [],
        tableData: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ],
        selectedData:[],
        loading:false,
      }
    },
    methods:{
      reloadData(pageSize, pageNo){
        this.loading = true;
        //处理表单查询参数及分页
        if (!pageNo) {
          this.dataCount = 0
        }
        if (!pageSize) {
          pageSize = this.pageSize;
        }
        let page_params = {'pageSize': pageSize, 'pageNo': pageNo};
        let params = Object.assign({}, page_params, this.searchForm); // 这样不会改变原对象
        getBaseSeniorPage(params).then(res => {
          if (res.data.result && res.data.result.totalSize) {
            this.dataCount = parseInt(res.data.result.totalSize);
          }
          if (res.data.result && res.data.result.datas && res.data.result.datas.length > 0) {
            this.tableData = res.data.result.datas;
          } else {
            this.tableData = [];
          }
          this.loading = false;
        }).catch(err => {
          this.tableData = [];
          this.loading = false;
          this.$Message.error('查询失败！');
          console.log(err)
        })
      },
      sortChange(column) {
        this.$refs.customSort.sortChange(column);
      },
      exportData(params) {
        this.$refs.tables.exportCsv(params);
      },
      selectedChange(selection) {
        this.selectedData = selection;
      },
    },
    mounted() {
      this.reloadData();
    }
  }
</script>
