<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item>
        <el-date-picker
          v-model="queryParams.time"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
        ></el-date-picker>
      </el-form-item>

      <el-form-item prop="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入关键字"
          clearable
          maxlength="50"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <!-- <el-form-item prop="taskStatus">
                <el-select
                    v-model="queryParams.taskStatus"
                    placeholder="请选择状态"
                    clearable
                    filterable
                    style="width: 240px"
                >
                    <el-option
                        v-for="dict in dict.type.lease_task_status"
                        v-show="dict.value != 1 && dict.value != 2"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                </el-select>
            </el-form-item> -->

      <el-form-item prop="isConfirm">
        <el-select v-model="queryParams.isConfirm" placeholder="请选择确认状态" clearable style="width: 240px">
          <el-option label="待确认" :value="1"></el-option>
          <el-option label="已确认" :value="2"></el-option>
        </el-select>
      </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-table v-loading="loading" :data="typeList" border :max-height="650">
      <el-table-column align="center" label="序号" type="index">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" width="100" label="申请时间" prop="createTime" />
            <el-table-column label="申请人" width="100" align="center" prop="createBy" show-overflow-tooltip /> -->
      <el-table-column label="实施单位" align="center" prop="impUnitName" width="150px" show-overflow-tooltip />
      <!-- <el-table-column label="合同主体" align="center" prop="contractPart" width="150px" show-overflow-tooltip /> -->
      <el-table-column label="租赁单位" align="center" prop="unitName" width="180px" />
      <el-table-column label="租赁工程" align="center" prop="projectName" width="180px" />
      <el-table-column label="协议号" align="center" prop="agreementCode" width="140px" show-overflow-tooltip />
      <el-table-column
        label="租赁申请单号"
        align="center"
        prop="code"
        width="140px"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        label="发布数量"
        align="center"
        prop="preCountNum"
        width="80px"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        label="已出库数量"
        align="center"
        prop="alNum"
        width="90px"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column label="领料人" align="center" prop="leasePerson" />
      <el-table-column label="备注" align="center" width="100" prop="remark" show-overflow-tooltip />

      <!-- <el-table-column label="状态" align="center" prop="taskStatus" width="120px" show-overflow-tooltip>
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.lease_task_status" :value="scope.row.taskStatus" />
                </template>
            </el-table-column> -->
      <el-table-column label="确认状态" align="center" width="120px" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isConfirm == 2">已确认</el-tag>
          <el-tag type="danger" v-else>待确认</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="确认备注" align="center" width="100" prop="confirmRemark" show-overflow-tooltip /> -->

      <el-table-column label="操作" align="center" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" style="margin-bottom: 10px" type="normal" @click="handleView(scope.row)">
            查看
          </el-button>
          <!-- <el-button
            size="mini"
            style="margin-bottom: 10px"
            type="primary"
            @click="handleOpenConfirm(scope.row)"
            v-if="scope.row.isConfirm != 2"
          >
            确认
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 确认弹窗 -->
    <el-dialog title="材料员确认" :visible.sync="confirmDialogVisible" width="500px" append-to-body>
      <el-form :model="confirmForm" ref="confirmForm" label-width="100px">
        <el-form-item label="备注" prop="confirmRemark">
          <el-input
            v-model="confirmForm.confirmRemark"
            type="textarea"
            placeholder="请输入备注信息"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitConfirm">确 认</el-button>
      </div>
    </el-dialog>

    <!-- 确认详情 -->
    <el-dialog title="确认详情" :visible.sync="confirmVisible" width="80%" append-to-body>
      <el-form :model="confirmForm2" label-width="80px" size="small" inline @submit.native.prevent>
        <el-form-item label="" prop="keyWord">
          <el-input
            v-model="confirmForm2.keyWord"
            placeholder="请输入关键字"
            clearable
            @keyup.enter.native="getConfirmList"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getConfirmList">查询</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="confirmList" fit highlight-current-row style="width: 100%; min-height: 450px">
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column
          v-for="(column, index) in tableColumns"
          show-overflow-tooltip
          :key="index"
          :label="column.label"
          :prop="column.prop"
          align="center"
        >
          <!-- 插槽 -->
          <template v-slot="{ row }" v-if="column.prop == 'isConfirm'">
            <el-tag v-if="row.isConfirm == 2" type="success">已确认</el-tag>
            <el-tag v-else type="danger">未确认</el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="240" v-if="isView">
          <template slot-scope="{ row }">
            <!-- <el-button v-if="row.isConfirm != 2" type="primary" size="mini" @click="handleConfirm(row)">确认</el-button> -->
            <el-button type="" size="mini" @click="openBills(row)">领料单</el-button>
            <el-button type="" size="mini" @click="openPass(row)">出门证</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 领料单弹窗 -->
    <el-dialog :visible.sync="open" width="1090px" append-to-body>
      <div style="height: 500px; overflow-y: scroll; padding: 0 20px">
        <!-- <vue-easy-print tableShow ref="remarksPrintRef" > -->
        <div id="checkIdTwo">
          <div class="title" style="text-align: center; font-weight: 600; font-size: 16px">领料单</div>
          <div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap">
            <div class="item" style="width: 60%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>领料单位：</span>
              {{ leaseApplyData.unitName }}
            </div>
            <div class="item" style="width: 40%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>工程名称：</span>
              {{ leaseApplyData.projectName }}
            </div>
            <div class="item" style="width: 40%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>发料单位：</span>
              {{ '机具（物流）分公司' }}
            </div>
            <div class="item" style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>时间：</span>
              <span v-if="leaseApplyData.createTime">{{ leaseApplyData.createTime.split(' ')[0] }}</span>
            </div>
            <div class="item" style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>编号：</span>
              {{ leaseApplyData.code }}
            </div>
          </div>

          <!-- <el-table :data="leaseApplyDetails" class="table" border style="width: 100%">
            <el-table-column label="序号" align="center" type="index" width="60px" />
            <el-table-column label="物资名称" align="center" prop="maTypeName" />
            <el-table-column label="规格型号" align="center" prop="typeName" />
            <el-table-column label="计量单位" align="center" prop="unitName" />
            <el-table-column label="领用数量" align="center" prop="outNum" />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="出库方式" align="center" prop="manageType">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.manageType == 0"
                  style="color: blue; cursor: pointer"
                  @click="codeInfo(scope.row)"
                >
                  编码出库
                </span>
                <span v-if="scope.row.manageType == 1">数量出库</span>
              </template>
            </el-table-column>
          </el-table> -->
          <table class="print-table" style="margin-top: 20px; width: 100%; border-collapse: collapse" border>
            <thead>
              <tr>
                <th align="center">序号</th>
                <th align="center">物资名称</th>
                <th align="center">规格型号</th>
                <th align="center">计量单位</th>
                <th align="center">出库数量</th>
                <th align="center">备注</th>
                <th align="center">出库方式</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in leaseApplyDetails" :key="index">
                <td align="center">{{ index + 1 }}</td>
                <td align="center">{{ item.maTypeName }}</td>
                <td align="center">{{ item.typeName }}</td>
                <td align="center">{{ item.unitName }}</td>
                <td align="center">{{ item.outNum }}</td>
                <td align="center">{{ item.remark }}</td>
                <td align="center">
                  <span v-if="item.manageType == 0" style="color: blue; cursor: pointer" @click="codeInfo(item)">
                    编码出库
                  </span>
                  <span v-if="item.manageType == 1">数量出库</span>
                </td>
              </tr>
            </tbody>
          </table>

          <div class="fillIn" style="margin-top: 50px; display: flex; justify-content: space-between">
            <div class="item" style="width: 23%; display: flex; align-items: flex-start; flex-wrap: wrap">
              <div style="width: 25%">审核：</div>
              <div
                style="width: 75%; display: flex; align-items: center; flex-wrap: wrap"
                v-if="approveSignList.length > 0"
              >
                <div
                  style="width: 80%; margin-left: 20px; height: 40px;transform: translateY(-30px)"
                  v-for="(item, index) in approveSignList"
                  :key="index"
                >
                  <img
                    :src="item.outSignUrl"
                    style="width: 40px; height: 90px; max-width: 100%"
                    :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="item" style="width: 24%; display: flex; align-items: flex-start; flex-wrap: wrap">
              <div style="width: 30%">领料：</div>
              <div
                style="width: 70%; display: flex; align-items: center; flex-wrap: wrap;transform: translateY(-30px)"
                v-if="outSignList.length > 0"
              >
                <div
                  style="width: 80%; margin-left: 20px; height: 40px"
                  v-for="(item, index) in outSignList"
                  :key="index"
                >
                  <img
                    :src="item.outSignUrl"
                    style="width: 40px; height: 90px; max-width: 100%"
                    :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="item" style="width: 24%; display: flex; align-items: flex-start; flex-wrap: wrap">
              <div style="width: 30%">材料员：</div>
              <div
                style="width: 70%; display: flex; align-items: center; flex-wrap: wrap;transform: translateY(-30px)"
                v-if="confirmSign && confirmSign.confirmSignUrl"
              >
                <div style="width: 80%; margin-left: 25px">
                  <img
                    :src="confirmSign.confirmSignUrl"
                    style="width: 40px; height: 100px; max-width: 100%"
                    :style="{ transform: confirmSign.confirmSignType == 0 ? 'rotate(-90deg)' : '' }"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="item" style="width: 28%; display: flex; align-items: flex-start">
              <div style="width: 25%">库管：</div>
              <div style="width: 75%; display: flex; align-items: center; flex-wrap: wrap;transform: translateY(-30px)" v-if="kgSignList.length > 0">
                <div
                  style="width: 80%; margin-left: 20px; height: 40px"
                  v-for="(item, index) in kgSignList"
                  :key="index"
                >
                  <img
                    :src="item.outSignUrl"
                    style="width: 40px; height: 90px"
                    :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="item" style="width: 25%; display: flex; align-items: flex-start">
              <div style="width: 25%">制单：</div>
              <div style="width: 75%;margin-left: 20px;transform: translateY(-30px)" v-if="leaseApplyData.leaseSignUrl">
                <img
                  :src="leaseApplyData.leaseSignUrl"
                  style="width: 40px; height: 90px; max-width: 100%"
                  :style="{ transform: leaseApplyData.leaseSignType == 0 ? 'rotate(-90deg)' : '' }"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <!-- </vue-easy-print> -->
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="print">打 印</el-button>
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 编码管理查看弹窗 -->
    <el-dialog :visible.sync="showView" width="800px" append-to-body>
      <div style="overflow-y: scroll">
        <vue-easy-print tableShow ref="remarksPrintRefView" class="print">
          <div class="title" style="text-align: center; font-weight: 600; font-size: 16px; margin-bottom: 20px">
            领料单编号明细
          </div>
          <!-- <el-table :data="getListViewInfo" style="padding: 1px">
            <el-table-column align="center" label="序号" type="index" width="55" />
            <el-table-column label="类型名称" align="center" prop="materialName" show-overflow-tooltip />
            <el-table-column label="规格型号" align="center" prop="typeName" show-overflow-tooltip />
            <el-table-column label="设备编码" align="center" prop="maCode" show-overflow-tooltip />
          </el-table> -->
          <table class="print-table" style="margin-top: 20px; width: 100%; border-collapse: collapse" border>
            <thead>
              <tr>
                <th align="center" width="55">序号</th>
                <th align="center">类型名称</th>
                <th align="center">规格型号</th>
                <th align="center">设备编码</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in getListViewInfo" :key="index">
                <td align="center">{{ index + 1 }}</td>
                <td align="center">{{ item.materialName }}</td>
                <td align="center">{{ item.typeName }}</td>
                <td align="center">{{ item.maCode }}</td>
              </tr>
            </tbody>
          </table>
        </vue-easy-print>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="printView">打 印</el-button>
        <el-button @click="showView = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 出门证 -->
    <el-dialog :visible.sync="showPass" width="800px" append-to-body @close="handleDialogClose">
      <el-form :model="passForm" label-width="80px" size="small" inline @submit.native.prevent>
        <el-form-item label="车牌号:">
          <el-input v-model="passForm.carNumber" placeholder="请输入车牌号" clearable style="width: 240px" />
        </el-form-item>
      </el-form>
      <div>
        <vue-easy-print tableShow ref="remarksPrintRefPass" style="padding: 0 20px; font-size: 18px">
        <div id="passId" style="padding: 0 20px; font-size: 18px">
          <div style="text-align: center; font-weight: 600; font-size: 36px; margin-bottom: 40px">
            出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div style="text-align: end">{{ passCode }}</div>
          <div style="line-height: 1.96">
            <div>门卫:</div>
            <div>
              <span style="margin-left: 25px">现有</span>
              <span style="min-width: 80px; border-bottom: 1px solid #000; padding: 0 5px">
                {{ passForm.carNumber }}
              </span>
              携带
              <span style="min-width: 80px; border-bottom: 1px solid #000; padding: 0 5px">{{ passContent }}</span>
              出门，请予放行。
            </div>
          </div>
          <div style="margin: 60px 0 15px; text-align: end">（公章）</div>
          <div style="text-align: end">{{ passTime }}</div>
          <div>此证盖章有效</div>
          <div v-if="showPass" style="position: absolute; top: 120px; left: 590px">
            <canvas id="canvas" width="200" height="200"></canvas>
          </div>
          <div v-if="showImg" style="position: absolute; top: 110px; left: 590px">
            <img :src="canvasImgUrl" width="200" height="200" />
          </div>
        </div>
        </vue-easy-print>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="printPass">打 印</el-button>
        <el-button @click="handleDialogClose">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCompleteOutTaskList,
  outInfoList,
  confirmMaterial,
  getInfoApi,
  getLeaseRequestVoApi,
  getCompleteTaskList
} from '@/api/lease/out'
import vueEasyPrint from 'vue-easy-print'
import printJS from 'print-js'
import chapter from '@/utils/chapter'

export default {
  components: { vueEasyPrint },
  name: 'ClerkConfirmation',
  dicts: ['lease_task_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      //查看的显示
      showOutView: false,
      // 确认弹窗
      confirmDialogVisible: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      ViewTotal: 0,
      // 弹出层标题
      title: '',
      typeList: [],
      //出库数量
      getListOutInfo: [],
      // 日期范围
      dateRange: [],
      statusDataRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: null, //申请时间
        taskStatus: '',
        keyWord: '',
        isConfirm: ''
      },
      //查看的搜索栏
      queryOutView: {
        pageNum: 1,
        pageSize: 10,
        keyWord: ''
      },
      // 确认表单
      confirmForm: {
        id: null,
        confirmRemark: '',
        isConfirm: 2
      },
      publishTask: '',
      confirmVisible: false,
      confirmForm2: {
        id: null,
        keyWord: ''
      },
      isView: false,
      tableColumns: [
        { label: '类型名称', prop: 'maTypeNames' },
        { label: '已出库数量', prop: 'outNum' },
        { label: '确认人', prop: 'confirmPerson' },
        { label: '确认时间', prop: 'confirmTime' },
        { label: '确认状态', prop: 'isConfirm' },
        { label: '确认备注', prop: 'confirmRemark' }
      ],
      // 确认列表
      confirmList: [],
      open: false,
      leaseApplyData: {},
      leaseApplyDetails: [],
      kgSignList: [],
      outSignList: [],
      approveSignList: [],
      confirmSign: {},
      showView: false,
      getListViewInfo: [],
      showPass: false,
      showImg: false,
      canvasImgUrl: '',
      passForm: {
        carNumber: '' // 车牌号
      },
      passCode: '', // 单号
      passContent: '', // 携带内容
      passTime: ''
    }
  },
  created() {
    if (this.$route.query.code) {
      this.queryParams.keyWord = this.$route.query.code
    }
    const end = new Date()
    let start = new Date()
    start.setMonth(start.getMonth() - 1)
    this.queryParams.time = [this.format(start), this.format(end)]
    this.getList()
  },
  methods: {
    format(date) {
      const y = date.getFullYear()
      const m = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${y}-${m}-${day}`
    },
    getList() {
      this.loading = true
      const params = {
        keyWord: this.queryParams.keyWord,
        startTime: this.queryParams.time && this.queryParams.time[0],
        endTime: this.queryParams.time && this.queryParams.time[1],
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        isConfirm: this.queryParams.isConfirm
      }
      if (!this.queryParams.taskStatus) {
        params.statusList = [3, 4, 5]
      } else {
        params.statusList = [this.queryParams.taskStatus]
      }
      getCompleteTaskList(this.addDateRange(params)).then(response => {
        this.typeList = response.data.rows
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      const end = new Date()
      let start = new Date()
      start.setMonth(start.getMonth() - 1)
      this.queryParams.time = [this.format(start), this.format(end)]
      this.queryParams.taskStatus = ''
      this.queryParams.keyWord = ''
      this.queryParams.isConfirm = ''
      this.handleQuery()
    },

    /** 查看按钮操作 */
    handleView(row) {
      this.isView = true
      this.confirmForm2.id = row.id
      this.confirmForm2.keyWord = ''
      this.getConfirmList()
      this.confirmVisible = true
    },
    //查看
    handleQueryOutView() {
      this.queryOutView.pageNum = 1
      this.getListView()
    },
    resetQueryOutView() {
      this.queryOutView.keyWord = ''
      this.getListView()
    },
    getListView() {
      outInfoList(this.queryOutView.id, {
        keyWord: this.queryOutView.keyWord,
        publishTask: this.publishTask
      }).then(response => {
        this.getListOutInfo = response.data.leaseApplyDetailsList
      })
    },
    handleOpenConfirm(row) {
      this.passCode = row.code
      this.isView = false
      this.confirmForm2.id = row.id
      this.confirmForm2.keyWord = ''
      this.getConfirmList()
      this.confirmVisible = true
    },
    getConfirmList() {
      getInfoApi(this.confirmForm2)
        .then(res => {
          this.confirmList = res.data
        })
        .catch(error => {
          console.error('Error fetching confirm list:', error)
        })
    },
    handleReset() {
      this.confirmForm2.keyWord = ''
      this.getConfirmList()
    },
    /** 确认按钮操作 */
    handleConfirm(row) {
      this.confirmForm.id = this.confirmForm2.id
      this.confirmForm.leaseSignId = row.leaseSignId
      this.confirmForm.confirmRemark = ''
      this.confirmForm.isConfirm = 2
      this.confirmDialogVisible = true
    },

    /** 提交确认 */
    submitConfirm() {
      this.$refs.confirmForm.validate(valid => {
        if (valid) {
          confirmMaterial(this.confirmForm).then(response => {
            this.$modal.msgSuccess('确认成功')
            this.confirmDialogVisible = false
            this.getList()
            this.getConfirmList()
          })
        }
      })
    },
    openBills(row) {
      console.log('🚀 ~ openBills ~ row:', row)
      const params = {
        id: this.confirmForm2.id,
        leaseSignId: row.leaseSignId,
        publishTask: row.publishTask
      }
      getLeaseRequestVoApi(params).then(res => {
        this.leaseApplyData = res.data.leaseApplyInfo
        this.leaseApplyDetails = res.data.leaseApplyDetailsList
        this.kgSignList = res.data.kgSignList || []
        this.outSignList = res.data.outSignList || []
        this.confirmSign = res.data.confirmSign || {}
        this.approveSignList = res.data.approveSignList || []
        this.open = true
      })
    },
    print() {
      // this.$refs.remarksPrintRef.print()
      const element = document.getElementById('checkIdTwo')

      // 确保元素存在
      if (!element) {
        this.$message.error('未找到要打印的元素')
        return
      }
      printJS({
        printable: 'checkIdTwo',
        type: 'html',
        targetStyles: ['*'],
        maxWidth: '1400'
      })
    },
    codeInfo(row) {
      this.showView = true
      this.getListViewInfo = row.maCodeVoList
    },
    printView() {
      this.$refs.remarksPrintRefView.print()
    },
    // 出门证
    openPass(row) {
      setTimeout(() => {
        chapter('出门证专用章', '安徽送变电工程有限公司机具（物流）分公司')
      }, 500)
      this.showPass = true
      this.showImg = false
      const passArray = row.maTypeNames.split(',')
      this.passContent = passArray.slice(0, 3).join(',')
      const date = new Date(row.confirmTime || Date.now())
      this.passTime = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    },
    printPass() {
      this.showImg = true
      const canvas = document.getElementById('canvas')
      this.canvasImgUrl = canvas.toDataURL('image/png') // base64 图像
      this.$nextTick(() => {
        this.$refs.remarksPrintRefPass.print()
        this.showImg = false
      })
      // /passId
      // printJS({
      //   printable: 'passId',
      //   type: 'html',
      //   targetStyles: ['*'],
      //   scanStyles: true
      // })
      
    },
    handleDialogClose() {
      this.showPass = false
      this.passForm = {
        passCode: '',
        passContent: '',
        passTime: ''
      }
    }
  },

  watch: {
    $route: {
      handler(to) {
        if (to.query.keyWord) {
          this.queryParams.keyWord = to.query.keyWord
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
  width: 70px !important;
  margin-bottom: 10px;
}
.print-table {
  table,
  th,
  td {
    border: 1.5px solid black;
    border-collapse: collapse;
  }
}
</style>
