<template>
  <div class="tableBox">
    <PublicTable
      ref="PublicTableRef"
      class="table"
      row-key="id"
      :loading="loading"
      :has-index="true"
      :need-select="true"
      :table-data="tableData"
      :table-info="tableInfo"
      :table-column="columns"
      :events="events"
      operation-width="100px"
      :btn-button="operations"
      :table-top-button="tableTopButton"
      :operation-fixed="true"
      :is-need-pagination="true"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      :operated-string="operatedString"
      is-need-customcolumn
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @customColumnChange="handleCustomColumnChange"
      @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
      @handleSelectionChange="handleSelectionChange"
    />
  </div>
</template>

<script>
import PublicTable from '@/components/table/index.vue';
import mockData from './mockData';
import mockData2 from './mockData2';
export default {
  components: {
    PublicTable,
  },
  data() {
    return {
      // 获取列表前是否loading加载
      loading: false,
      // table数据源
      tableData: mockData,
      // 表格项绑定的属性
      columns: [
        {
          prop: 'title',
          label: '固定左边',
          minWidth: '100px',
          align: 'center',
          fixed: 'left',
          formatter: (row) => (row.title ? row.title : '暂无标题'),
        },
        {
          tableTopColumnIcon: 'el-icon-s-home', // 列表头图标
          prop: 'statusDesc',
          minWidth: '100px',
          align: 'center',
          label: '计算总量',
        },
        {
          sortable: true, // 排序
          prop: 'createBy',
          minWidth: '100px',
          align: 'center',
          label: '排序',
        },
        {
          prop: 'createdTime',
          minWidth: '200px',
          align: 'center',
          label: '申请时间',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
      ],
      // 表格行单机双击事件
      events: {
        'row-dblclick': (row) => {
          // 双击表格 行 触发的函数
          // console.log('row-dblclick',row);
        },
        'row-click': (row) => {
          // 单机表格 行 触发的函数
          // console.log("row-click", row);
        },
      },
      // 操作栏自定义按钮
      operations: [
        {
          text: '新增',
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.handleAddOrEdit('add', row);
          },
        },
        {
          text: '编辑',
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
      ],
      tableTopButton: [
        {
          text: '自定义数据导入',
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value);
          },
        },
        {
          text: '自定义数据导出',
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value);
          },
        },
      ],
      // 搜索查询的参数
      pageNum: 1,
      pageSize: 20,
      total: 100,
      operatedString: '',
      tableInfo: {
        fileConfig: {
          uploadParams: {
            moduleName: 'pubCurrency',
            param: { 'multiple': false },
          },
        },
        tableHeight: document.documentElement.clientHeight - 286,
      },
    };
  },
  mounted() {},
  methods: {
    // 页面展示条数改变事件-pageSize
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    // 页面切换事件-pageNum
    handleCurrentChange(pageNum) {
      console.log('');
      this.pageNum = pageNum;
    },
    handleAddOrEdit(type, row) {
      // console.log('新增编辑',type, row);
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      this.tableData = mockData2;
    },
    // 导入按钮点击事件
    handleDataImport() {},
    // 导出按钮点击事件
    handleDataExport() {},
    // 点击当前列前的图标事件
    handleTableTopColumnIconClick(val) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
    },
    // 自定义按钮 点击事件
    handletableTopButton(val) {
      console.log('自定义按钮', val);
    },
  },
};
</script>
