<template>
  <div class="ele-body">
    <el-card shadow="never">
      <certificate-search @search="reload" />
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 350px)"
        class="dict-table"
        tool-class="ele-toolbar-actions"
      >
        <!-- 工具栏 -->
        <template v-slot:toolbar>
          <el-button type="primary" @click="handleUpload">新建</el-button>
          <el-button type="primary" @click="handleUpload">导入</el-button>
        </template>

        <template v-slot:code="{ row }">
          <el-link>2222</el-link>
          <p class="ele-text-info">身份证</p>
        </template>
        <template v-slot:time="{ row }">
          <p>起：2023-02-15 00:00</p>
          <p class="ele-text-info">止：2023-02-15 00:00</p>
        </template>
        <template v-slot:createUser="{ row }">
          <p>黄凯</p>
          <p>株洲硬质合金集团型材分公司</p>
          <p class="ele-text-info">2023-02-15 00:00</p>
        </template>
        <template v-slot:picture="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.url"
            :preview-src-list="[row.url]"
          />
        </template>
      </ele-pro-table>
    </el-card>
    <uploadDialog ref="uploadDialogRef" @success="reload" />
  </div>
</template>

<script>
  import { getFile, getFileList } from '@/api/system/file/index.js';

  import certificateSearch from './components/certificate-search';
  import uploadDialog from './components/upload-dialog.vue';
  export default {
    components: { certificateSearch, uploadDialog },
    data () {
      return {
        columns: [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '证照编号',
            slot: 'code'
          },
          {
            label: '状态',
            prop: 'type'
          },
          {
            label: '执证人'
          },
          {
            label: '颁发机构',
            prop: 'storePath',
            showOverflowTooltip: true
          },
          {
            label: '有效期限',
            slot: 'time'
          },
          {
            label: '创建人信息',
            slot: 'createUser'
          },
          {
            label: '证照',
            slot: 'picture'
          },
          {
            label: '备注',
            prop: 'remark',
            minWidth: '200',
            showOverflowTooltip: true
          }
        ]
      };
    },
    methods: {
      datasource ({ page, where, limit }) {
        return getFileList({
          ...where,
          pageNum: page,
          size: limit
        });
      },
      reload (where = {}) {
        this.$refs.table.reload({ where });
      },
      handleUpload () {
        this.$refs.uploadDialogRef.open();
      },
      handleDownload (row) {
        getFile({ objectName: row.storePath }, row.name);
      }
    }
  };
</script>

<style class=""></style>
