<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-form"
        cache-key="certificateTable"
      >
        <!-- 工具栏 -->
        <template v-slot:toolbar>
          <el-button type="primary" icon="el-icon-plus" @click="handleUpload()">新建</el-button>
          <!-- <el-button type="primary" @click="handleUpload">导入</el-button> -->
        </template>
        <template v-slot:code="{ row }">
          <el-link type="primary" :underline="false" @click="openDetail(row)">{{row.code}}</el-link>
          <p class="ele-text-info">
             {{getDictValue('证件类型', row.type)}}
          </p>
        </template>
        <template v-slot:time="{ row }">
          <p>起：{{row.validityStartTime}}</p>
          <p class="ele-text-info">止：{{row.validityEndTime}}</p>
        </template>
        <template v-slot:createUser="{ row }">
          <p>{{row.createUserName}}</p>
          <p>{{row.createUserDeptName}}</p>
          <p class="ele-text-info">{{row.createTime}}</p>
        </template>
        <template v-slot:picture="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.imageUrl"
            :preview-src-list="[row.imageUrl]"
          />
        </template>
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="handleUpload(row)"
          >
            修改
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <addDialog ref="addDialogRef" @success="reload" />
    <detailDialog ref="detailDialogRef" />
  </div>
</template>

<script>
  import { getFile, getFileList } from '@/api/system/file/index.js';
  import certificateSearch from './components/certificate-search';
  import addDialog from './components/add-dialog.vue';
  import detailDialog from './components/detail-dialog.vue';
  import { getPhotoList } from '@/api/documentManagement';
  import dictMixins from '@/mixins/dictMixins';
  import { getImageUrl } from '@/utils/file.js';
  import { deepClone } from '@/utils';
  export default {
    mixins: [dictMixins],
    components: { certificateSearch, addDialog , detailDialog },
    data () {
      return {
        columns: [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          {
            label: '证照编号',
            prop: 'code',
            slot: 'code',
            width:180
          },
          {
            label: '状态',
            prop: 'status',
            formatter: (row) => {
              return this.getDictValue('规则状态', row.status);
            }
          },
          {
            label: '执证人',
            prop:'holder'
          },
          {
            label: '有效期限',
            prop: 'time',
            slot: 'time',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            label: '创建人信息',
            prop: 'createUser',
            slot: 'createUser',
            minWidth: '200',
            showOverflowTooltip: true
          },
          {
            label: '证照',
            prop: 'picture',
            slot: 'picture'
          },
          {
            label: '备注',
            prop: 'remark',
            minWidth: '100',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 80,
            align: 'left',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ]
      };
    },
    created () {
       this.requestDict('证件类型');
       this.requestDict('规则状态');
    },
    methods: {
      async datasource ({ page, where, limit }) {
        const data = await getPhotoList({  ...where, pageNum: page, size: limit });
        const res = deepClone(data)
        res.list.map(item=>{
           item.imageUrl  = getImageUrl(item.fileObj.storePath)
        })
        return res
      },
      reload (where = {}) {
        this.$refs.table.reload({ where });
      },
      handleUpload (row) {
        this.$refs.addDialogRef.open(row);
      },
      openDetail(row){
        this.$refs.detailDialogRef.open(row);
      }
    }
  };
</script>

<style class=""></style>
