<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24" style="height: calc(100vh - 130px); overflow: hidden;">
<!--        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"-->
<!--                 label-width="68px" @submit.native.prevent>-->
<!--          <el-form-item label="受理编号" prop="serialNumber">-->
<!--            <el-input v-model="queryParams.serialNumber" placeholder="请输入受理编号" clearable style="width: 240px"-->
<!--                      @keyup.enter.native="handleQuery"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-upload
              class="upload-demo"
              :show-file-list="false"
              :http-request="handleUpload"
              :before-upload="beforeUpload"
              :action="''">
              <el-button size="small" type="primary" icon="el-icon-upload">上传证照</el-button>
            </el-upload>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" size="small" icon="el-icon-printer" @click="handlePrint">打印</el-button>
            <el-button id="print_certificate" type="info" v-print="printObj" style="display: none;">打印</el-button>
          </el-col>
        </el-row>
        <el-row style="height: calc(100% - 40px); padding: 10px;overflow: auto;">
          <el-table v-loading="loading" :data="certificateList"
                    :row-key="getRowKey"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
            <el-table-column label="证照类型" align="center" prop="certificateType">
              <template slot-scope="scope">
                <span v-if="scope.row.certificateType === 1">个人</span>
                <span v-if="scope.row.certificateType === 2">企业</span>
              </template>
            </el-table-column>
            <el-table-column label="证照名称" align="center" prop="certificateName"/>
            <el-table-column label="证照号码" align="center" prop="certificateNo"/>
            <el-table-column label="联系电话" align="center" prop="phone" width="120"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="160">
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize" @pagination="getList"/>
        </el-row>
        <el-row id="print_cert">
          <el-row style="overflow: auto; height: calc(100% - 120px);">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <h1>证照列表</h1>
              <el-image :src="'data:image/png;base64,' + barcode" style="width: 200px;"></el-image>
            </div>
            <el-table
              :data="selectionList"
              style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="certificateType" label="证照类型" width="80">
                <template slot-scope="scope">
                  <span v-if="scope.row.certificateType === 1">个人</span>
                  <span v-if="scope.row.certificateType === 2">企业</span>
                </template>
              </el-table-column>
              <el-table-column prop="certificateName" label="证照名称" width="300"></el-table-column>
              <el-table-column prop="certificateNo" label="证照号码" width="150"></el-table-column>
              <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
            </el-table>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addCertificateSend, getSerialNumberBarcode, importCertificate, listCertificate} from "@/api/matter/record";

export default {
  name: "Certificate",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      dealDetailDialog: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 总条数
      total: 0,
      // 证照数据
      certificateList: [],
      selectionList: [],
      barcode: '',
      barcodeNum: '',
      printObj: {
        id: "print_cert",
        popTitle: "打印证照",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback() {
        },
        openCallback(vue) {
          vue.saveCertificateSend()
        },
        closeCallback(vue) {
        }
      },
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    /** 查询物料流转数据 */
    getList() {
      this.loading = true;
      listCertificate(this.queryParams).then(response => {
        this.certificateList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getRowKey(row) {
      return row.id;
    },
    /** 多选框选中数据 **/
    handleSelectionChange(selection) {
      this.selectionList = selection
    },
    handlePrint() {
      this.barcode = ''
      if (this.selectionList.length == 0) {
        this.$modal.msgError("至少选择一条数据");
        return
      }
      getSerialNumberBarcode().then(response => {
        if (response.code != 200) {
          this.$modal.msgError("生成条形码失败，请重试");
          return
        }
        this.barcode = response.data.barcode
        this.barcodeNum = response.data.serialNumber
        setTimeout(() => {
          document.getElementById('print_certificate').click()
        },100)
      });
    },
    saveCertificateSend() {
      let certificateSendList = JSON.parse(JSON.stringify(this.selectionList))
      certificateSendList.forEach(item => {
        item.certId = item.id
        item.serialNumber = this.barcodeNum
      })
      addCertificateSend(certificateSendList).then(response => {
      });
    },
    beforeUpload(file) {
      let ext = file.name.substring(file.name.lastIndexOf(".") + 1)
      let fileType = ['xls', 'xlsx']
      if (fileType.indexOf(ext) < 0) {
        this.$modal.msgError("只能上传Excel文件");
        return
      }
    },
    handleUpload(file) {
      let formData = new FormData()
      formData.append('file', file.file)
      importCertificate(formData).then((response) => {
        this.$modal.msgSuccess(response.msg);
        this.getList();
      })
    }
  }
};
</script>
<style scoped>
</style>
