<template>
  <div class="pages">
    <gen-table ref="table" :sticky="searchH" :loading="loading" :table-model="tableModel" :table-data="tableData" :table-options="tableOptions" :table-options-width="tableOptionsWidth" :table-data-count="tableDataCount" :search-data="searchData" :refresh="refresh" v-bind="tableProps" :has-selec-items="value" @scrolltoggle="toggle" @select="select" v-on="$listeners">
      <template #status><span>自定义插槽</span> </template>
      <template #dicveit>
        <span>自定义按钮</span>
      </template>
      <template #bottomBar>
        <el-button type="small">自定义按钮</el-button>
      </template>
      <!-- bottomBar -->
    </gen-table>
  </div>
</template>

<script>
export default {
  name: 'BillsManage',
  components: {
    // DebitNoteDia: () => import('./dialogs/DebitNoteDia/index'),
    // BillsMethods: () => import('./dialogs/BillsMethods/index')
  },
  data() {
    return {
      searchData: {
        type: 1,
        name: 123
      },
      selects: [],
      value: [],
      searchH: 50,
      tableOptionsWidth: 220,
      tableData: [
        {
          createTime: 123,
          createBy: 456,
          typeName: 1,
          status: '哈哈',
          fileExpireTime: 12123
        }
      ],
      tableDataCount: 10,
      // 事件配置
      events: {
        down(row) {
          console.log(row)
          alert('操作')
        }
      },
      //表格配置
      tableOptions: [
        {
          eventName: 'down',
          label: '下载文件'
        },
        {
          template: 'dicveit'
        }
      ],
      tableModel: [
        {
          prop: 'billId',
          label: 'id',
          width: 150,
          attrs: {
            fixed: true
          }
        },
        {
          prop: 'createTime',
          label: '操作时间',
          width: 150,
          attrs: {
            fixed: true
          }
        },
        {
          prop: 'createBy',
          label: '操作人',
          width: 150
        },
        {
          prop: 'typeName',
          label: '导出类型'
        },
        // {
        //   prop: 'billAmount',
        //   label: '操作内容',
        //   renderColumn: (row) => `￥${row.billAmount || 0}`
        // },
        {
          prop: 'status',
          label: '状态',
          width: '100px',
          template: 'status'
        },
        {
          prop: 'fileExpireTime',
          label: '内容'
          // renderColumn: (row) => `￥${row.billAmount || 0}`
        }
      ],
      tableProps: {
        showSelect: true,
        rowKey: 'billId'
      },

      //搜索相关
      searchModel: [
        {
          label: '导出状态',
          type: 'select',
          attrs: { size: 'small', clearable: true },
          prop: 'status',
          optionAttrs: {
            labelKey: 'value',
            valueKey: 'key'
          },
          options: () => new Promise.resolve(this.staticDicts.dataExportStatus)
        },

        // {
        //   type: 'select',
        //   attrs: { size: 'small', clearable: true },
        //   prop: 'adjustType',
        //   options: () => new Promise.resolve(this.staticDicts.importOrExportSelection),

        //   label: '导出类型'
        // },
        {
          type: 'daterange',
          prop: 'createTime',
          label: '导出时间',
          attrs: {
            size: 'small',
            'start-placeholder': '创建开始日期',
            'end-placeholder': '创建结束日期'
          }

          // rangeKeys: ['createBeginTime', 'createEndTime']
        }
      ],
      //自定义相关
      loading: false
    }
  },
  computed: {
    // ...mapGetters(['staticDicts', 'staticDictsFilters', 'userDictList'])
  },
  methods: {
    toggle(v) {
      alert(v)
    },
    listAfter() {},
    select() {},
    // 下载文件
    downFileBtn() {},
    // 操作回调
    refresh() {
      this.selects = []
      this.$refs.pageContainer?.handleReset()
      this.$refs.pageContainer?.clearSelection()
    }
  }
}
</script>

<style lang="scss" scoped>
.pages {
  width: 100%;
  height: 700px;
}
</style>
