<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="开始日期"
          @change="() => queryParams.endTime = ''"
          style="width: 130px"
        />
      </el-form-item>
      <el-form-item>-</el-form-item>
      <el-form-item prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="结束日期"
          :picker-options="{ disabledDate: (t) => t.getTime() < new Date(queryParams.startTime).getTime() - 86400000}"
          style="width: 130px"
        />
      </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"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></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-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">领料申请</el-button>
      </el-col>
      <el-col :span="1.5" v-hasPermi="['purchase:person:notice']">
        <el-button type="success" plain icon="el-icon-plus" size="mini" @click="handleSendAll">发布</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="typeList" row-key="id" @selection-change="handleSelectionChange" border :max-height="650">
      <el-table-column type="selection" align="center" :selectable="selectable" />
      <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 label="申请时间" align="center" prop="createTime" width="100" />
      <el-table-column label="申请人" align="center" prop="createBy" :show-overflow-tooltip="true" />
      <el-table-column label="实施单位" align="center" prop="impUnitName" width="120px" :show-overflow-tooltip="true" />
      <!-- <el-table-column
        label="合同主体"
        align="center"
        prop="contractPart"
        width="120px"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column label="租赁单位" align="center" prop="leaseUnit" width="180px" />
      <el-table-column label="租赁工程" align="center" prop="leaseProject" width="180px" />
      <!-- <el-table-column label="领料物资类型" align="center" prop="maTypeNames" width="110px" :show-overflow-tooltip="true"/> -->
      <el-table-column label="协议号" align="center" prop="agreementCode" width="140" />
      <el-table-column label="租赁申请单号" align="center" prop="code" width="140px"></el-table-column>
      <el-table-column label="领料人" align="center" prop="leasePerson" />
      <!-- <el-table-column label="领料人电话" align="center" prop="phone" width="120px" :show-overflow-tooltip="true"/> -->
      <el-table-column label="状态" align="center" prop="taskStatus" :show-overflow-tooltip="true" width="110">
        <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="100" prop="remark" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" width="300" 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="handleUpdate(scope.row)"
            v-if="scope.row.taskStatus != 4"
            v-hasPermi="['purchase:info:edit']"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            style="margin-bottom: 10px"
            type="success"
            @click="handleSend(scope.row)"
            v-if="scope.row.taskStatus == 1"
            v-hasPermi="['purchase:person:notice']"
          >
            发布
          </el-button>
          <!-- <el-button size="mini" type="warning" v-if="scope.row.taskStatus != 1" @click="handleLld(scope.row)">
            领料单
          </el-button> -->
          <el-button size="mini" type="warning" @click="handlePrint(scope.row)" v-if="scope.row.taskStatus == 4">
            出库检验单
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDeletePurchase(scope.row)"
            v-if="scope.row.alNum == 0"
            v-hasPermi="['purchase:info:remove']"
          >
            删除
          </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="title" :visible.sync="openPrint" width="70%" append-to-body>
      <div style="height: 600px; overflow-y: scroll; padding: 0 20px">
        <!-- <vue-easy-print tableShow ref="remarksPrintRefCheck" class="print" :printable="'checkId3'"> -->
        <div id="checkId3">
          <div class="title" style="text-align: center; font-weight: 600; font-size: 16px">
            施工机具设备出库检验记录表
          </div>
          <div class="info" style="margin-top: 10px; display: flex; align-items: center">
            <div class="item" style="width: 60%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>领用工程：</span>
              {{ checkDataInfo.leaseProject }}
            </div>
            <div class="item" style="width: 40%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>使用单位：</span>
              {{ checkDataInfo.leaseUnit }}
            </div>
          </div>
          <!-- <el-table :data="printTableData" class="table" style="margin-top: 20px;width: 100%;" border>
            <el-table-column label="机具名称" align="center" prop="typeName"/>
            <el-table-column label="规格型号" align="center" prop="typeModelName" />
            <el-table-column label="单位" align="center" prop="unit" />
            <el-table-column label="数量" align="center" prop="num" />
            <el-table-column label="设备编码" align="center" prop="maCode"/>
            <el-table-column label="额定载荷KN" align="center" prop="ratedLoad" />
            <el-table-column label="试验载荷KN" align="center" prop="testLoad" />
            <el-table-column label="持荷时间min" align="center" prop="holdingTime" />
            <el-table-column label="试验日期" align="center" prop="testTime" />
            <el-table-column label="下次试验日期" align="center" prop="nextTestTime" />
            <el-table-column label="检验结论" align="center" prop="checkResult" />
            <el-table-column label="备注" align="center" prop="remark"/>
          </el-table> -->
          <table class="print-table" style="margin-top: 20px; width: 100%; border-collapse: collapse" border="1">
            <thead>
              <tr>
                <th style="text-align: center">机具名称</th>
                <th style="text-align: center">规格型号</th>
                <th style="text-align: center">单位</th>
                <th style="text-align: center">数量</th>
                <th style="text-align: center">设备编码</th>
                <th style="text-align: center">额定载荷KN</th>
                <th style="text-align: center">试验载荷KN</th>
                <th style="text-align: center">持荷时间min</th>
                <th style="text-align: center; width: 100px">试验日期</th>
                <th style="text-align: center; width: 100px">下次试验日期</th>
                <th style="text-align: center">检验结论</th>
                <th style="text-align: center">备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in printTableData" :key="index">
                <td style="text-align: center">{{ item.typeName }}</td>
                <td style="text-align: center">{{ item.typeModelName }}</td>
                <td style="text-align: center">{{ item.unit }}</td>
                <td style="text-align: center">{{ item.num }}</td>
                <td style="text-align: center">{{ item.maCode }}</td>
                <td style="text-align: center">{{ item.ratedLoad }}</td>
                <td style="text-align: center">{{ item.testLoad }}</td>
                <td style="text-align: center">{{ item.holdingTime }}</td>
                <td style="text-align: center">{{ item.testTime }}</td>
                <td style="text-align: center">{{ item.nextTestTime }}</td>
                <td style="text-align: center">{{ item.checkResult }}</td>
                <td style="text-align: center">{{ item.remark }}</td>
              </tr>
            </tbody>
          </table>

          <div class="fillIn" style="margin-top: 20px; display: flex; align-items: center; justify-content: right">
            <div class="item" style="width: 30%; align-items: center; position: relative">
              <div>
                <span>检验单位：</span>
              </div>
              <div>
                <canvas
                  id="canvas"
                  width="165"
                  height="165"
                  style="position: absolute; top: 50%; left: 90%; transform: translate(-100%, -50%); z-index: 9999"
                ></canvas>
              </div>
            </div>
          </div>
        </div>
        <!-- </vue-easy-print> -->
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="handleExportCheck">导出</el-button>
        <el-button type="primary" @click="printCheck">打 印</el-button>
        <el-button @click="closeDialogAndRefresh">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 领料单弹窗 -->
    <el-dialog :visible.sync="open" width="1090px" :title="title" 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.leaseUnit }}
              </div>
              <div class="item" style="width: 40%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
                <span>工程名称：</span>
                {{ leaseApplyData.leaseProject }}
              </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="preNum" />
              <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;" @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.preNum }}</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: 30px; display: flex; justify-content: space-between">
              <div class="item" style="width: 23%; display: flex; align-items: center; 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"
                    v-for="(item, index) in approveSignList"
                    :key="index"
                  >
                    <img
                      :src="item.outSignUrl"
                      :class="{ 'is-rotate': item.outSignType == 0 }"
                      style="width: 40px; height: 90px; max-width: 100%"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
                <div style="width: 30%">领料：</div>
                <div
                  style="width: 70%; display: flex; align-items: center; flex-wrap: wrap"
                  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%"
                      :class="{ 'is-rotate': item.outSignType == 0 }"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div class="item" style="width: 28%; display: flex; align-items: center">
                <div style="width: 25%">库管：</div>
                <div
                  style="width: 75%; display: flex; align-items: center; flex-wrap: wrap"
                  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"
                      :class="{ 'is-rotate': item.outSignType == 0 }"
                      style="width: 40px; height: 90px; max-width: 100%"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div class="item" style="width: 25%; display: flex; align-items: center">
                <div style="width: 25%">制单：</div>
                  <div style="width: 75%" v-if="leaseApplyData.leaseSignUrl">
                    <img
                      :src="leaseApplyData.leaseSignUrl"
                      :class="{ 'is-rotate': leaseApplyData.leaseSignType == 0 }"
                      style="width: 40px; height: 90px; max-width: 100%"
                      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 :title="titleView" :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="true" />
            <el-table-column label="规格型号" align="center" prop="typeName" :show-overflow-tooltip="true" />
            <el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true" />
          </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>
  </div>
</template>

<script>
import {
  getListLeaseApply,
  getPurchaseCheckInfo,
  getAcceptanceForm,
  purchaseCheckInfoRemove,
  queryStatusDataApi,
  getApplyInfo,
  applyRemove,
  applySend,
  applySendAll,
  getCheckInfo
} from '@/api/lease/apply'

import vueEasyPrint from 'vue-easy-print'
import printJS from 'print-js'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import request from '@/utils/request'

export default {
  name: 'Home',
  dicts: ['lease_task_status', 'ma_type_manage_type'],
  components: { vueEasyPrint },
  data() {
    return {
      // 遮罩层
      isSubmit: false,
      loading: true,
      loadingTwo: true,
      updateTime: '',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      showPeople: false,
      peopleOpen: false,
      // 总条数
      total: 0,
      totalTwo: 0,
      //搜索下拉数据
      typesList: [],
      modelList: [],
      // 字典表格数据
      typeList: [],
      getListPeople: [],
      configUserList: [],
      phoneNumbers: [],
      //选择人员
      chosenUserList: [],
      userList: [],
      // 弹出层标题
      title: '',
      // 日期范围
      dateRange: [],
      statusDataRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: null, //申请时间
        keyWord: '',
        taskStatus: null, //申请时间
        startTime: null,
        endTime: null
      },
      form: {
        remark: ''
      },
      // 表单校验
      rules: {
        remark: [{ required: true, message: '通知内容不能为空', trigger: 'blur' }]
      },
      openPrint: false,
      open: false,
      printData: {},
      printTableData: [],
      checkDataInfo: {},
      // 供应商
      supplierStr: '',

      //领料单
      leaseApplyDetails: [],
      // 领料任务详情数据
      leaseApplyData: {},
      outSignList: [], // 领料单签名
      sendTemp: [],
      // 编码管理查看弹窗
      showView: false,
      titleView: '',
      getListViewInfo: [],
      kgSignList: [], // 库管签名
      approveSignList: [], // 审核签名
    }
  },
  created() {
    const end = new Date()
    let start = new Date()
    start.setMonth(start.getMonth() - 1)
    this.queryParams.startTime = this.format(end)
    this.queryParams.endTime = this.format(end)

    // this.getStatusList();
    // 不在这里直接调用getList，等字典数据加载完成后再调用
    // this.getTypeList()
  },
  methods: {
    // 字典数据加载完成后的回调
    onDictReady(dict) {
      // 获取lease_task_status的所有选项
      const validOptions = dict.type.lease_task_status || []

      // 如果有有效选项，设置第一个为默认值
      // if (validOptions.length > 0) {
      //   this.queryParams.taskStatus = validOptions[0].value
      // }

      // 执行查询
      this.getList()
    },
    // getTypeList() {
    //     getTypeList({ level: '3' }).then((response) => {
    //         this.typesList = response.data
    //     })
    //     getTypeList({ level: '4' }).then((response) => {
    //         this.modelList = response.data
    //     })
    // },
    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}`
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.sendTemp = []
      this.ids = selection.map(item => item.id)
      selection.forEach(item => {
        this.sendTemp.push({ id: item.id, taskId: item.taskId,code: item.code })
      })
      this.single = selection.length != 1
      this.multiple = !selection.length
    },

    //是否可用勾选框
    selectable(row) {
      if (row.taskStatus == 1) {
        return true
      } else {
        return false
      }
    },
    getList() {
      this.loading = true
      const params = {
        keyWord: this.queryParams.keyWord,
        taskStatus: this.queryParams.taskStatus,
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        statusList: this.queryParams.taskStatus ? [this.queryParams.taskStatus] : [1, 2, 3, 4]
      }
      getListLeaseApply(params).then(response => {
        this.typeList = response.data.rows
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.keyWord = ''
      const end = new Date()
      let start = new Date()
      start.setMonth(start.getMonth() - 1)
      this.queryParams.startTime = this.format(end)
      this.queryParams.endTime = this.format(end)
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$emit('addTools')
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.$emit('queryTools', row.taskId, row.id)
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$emit('editTools', row.taskId, row.id)
    },

    //----消息通知
    getNowTime() {
      var today = new Date()
      var year = today.getFullYear() //获取年份
      var month = today.getMonth() + 1 //获取月份
      var day = today.getDate() //获取日期
      return year + '-' + month + '-' + day
    },

    // 表单重置
    reset() {
      this.form = {
        taskId: '',
        remark: ''
      }
      this.resetForm('form')
    },

    //获取验收单数据
    getPrintTable(taskId) {
      getAcceptanceForm({ taskId: taskId }).then(response => {
        this.printData = response.data
        this.printTableData = response.data.checkDetailsList

        let supplierList = []
        this.printTableData.forEach(e => {
          if (e.supplier) {
            supplierList.push(e.supplier)
          }
        })
        supplierList = [...new Set(supplierList)]

        this.supplierStr = supplierList.join(',')
      })
    },
    //查看验收单
    async handlePrint(row) {
      const res = await getCheckInfo({ id: row.id, publishTask: row.publishTask })
      this.idTemp = row.id
      this.checkDataInfo = res.data.leaseApplyInfo

      this.printTableData = res.data.leaseOutVoList
      setTimeout(() => {
        this.chapter('检验专用章', '安徽送变电工程有限公司机具(物流)分公司')
      }, 500)
      this.openPrint = true
      this.title = '出库检验单'
    },

    /** 导出按钮操作 */
    handleExportCheck() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      this.download('/material/lease_apply_info/exportInfo', { id: this.idTemp }, `出库检验单_${currentTime}.xlsx`)
    },

    //打开领料单
    async handleLld(row) {
      this.title = '领料单'
      this.open = true
      var ids = row.id
      const res = await getApplyInfo(ids)
      this.leaseApplyDetails = res.data.leaseApplyDetailsList
      this.leaseApplyData = res.data.leaseApplyInfo
      this.outSignList = res.data.outSignList || []
      console.log('🚀 ~ handleLld ~ this.outSignList:', this.outSignList)
      this.kgSignList = res.data.kgSignList || []
      this.approveSignList = res.data.approveSignList || []
      console.log('🚀 ~ handleLld ~ this.kgSignList:', this.kgSignList)
    },

    //出库检验单打印
    printCheck() {
      const element = document.getElementById('checkId3')

      // 确保元素存在
      if (!element) {
        this.$message.error('未找到要打印的元素')
        return
      }

      this.$modal.loading('正在生成单据，请稍候...')

      // 查找页面中所有图片并预加载
      const images = element.querySelectorAll('img')
      const imagePromises = []

      // 为每个图片创建加载或错误处理的Promise
      images.forEach(img => {
        // 如果图片已经加载完成，不需要处理
        if (img.complete) return

        const promise = new Promise(resolve => {
          const originalSrc = img.src

          // 图片加载成功
          img.onload = function () {
            resolve()
          }

          // 图片加载失败，使用空白图片替代
          img.onerror = function () {
            console.log('图片加载失败，使用空白图片替代:', originalSrc)
            img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1像素图片
            resolve()
          }
        })

        imagePromises.push(promise)
      })

      // 等待所有图片加载完成或失败后再生成PDF
      Promise.all(imagePromises)
        .then(() => {
          // 使用html2canvas将DOM元素转换为canvas
          html2canvas(element, {
            scale: 2, // 提高清晰度
            useCORS: true, // 允许加载跨域图片
            allowTaint: true,
            ignoreElements: element => {
              // 忽略所有图片加载错误
              return element.nodeName === 'IMG' && !element.complete
            },
            logging: false, // 关闭日志记录
            imageTimeout: 3000, // 图片加载超时时间
            backgroundColor: '#ffffff'
          })
            .then(canvas => {
              // 创建PDF文档
              const pdf = new jsPDF('p', 'mm', 'a4')

              // 获取canvas的宽度和高度
              const imgWidth = 210 // A4纸的宽度(mm)
              const pageHeight = 297 // A4纸的高度(mm)
              const imgHeight = (canvas.height * imgWidth) / canvas.width

              // 将canvas转换为图片
              const imgData = canvas.toDataURL('image/jpeg', 1.0)

              // 添加图片到PDF
              pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)

              // 生成PDF文件名
              const fileName = `出库检验单_${this.checkDataInfo.leaseProject || '未命名'}_${new Date().getTime()}.pdf`

              // 将PDF转换为Blob对象
              const pdfBlob = pdf.output('blob')

              // 创建FormData对象用于上传
              const formData = new FormData()
              formData.append('file', pdfBlob, fileName)
              formData.append('id', this.idTemp)

              // 上传到服务器
              this.$modal.closeLoading()

              // 调用上传API - 使用request
              request
                .post('/material/lease_apply_info/uploadCheckPdf', formData, {
                  headers: {
                    'Content-Type': 'multipart/form-data'
                  }
                })
                .then(response => {
                  if (response.code === 200) {
                    this.$modal.msgSuccess('单据文件已保存到服务器')

                    // 上传成功后执行打印
                    printJS({
                      printable: 'checkId3',
                      type: 'html',
                      targetStyles: ['*'],
                      maxWidth: '1400'
                    })
                  } else {
                    this.$modal.msgError('保存单据文件失败')

                    // 即使保存失败也执行打印
                    printJS({
                      printable: 'checkId3',
                      type: 'html',
                      targetStyles: ['*'],
                      maxWidth: '1400'
                    })
                  }
                })
                .catch(() => {
                  this.$modal.msgError('上传单据文件时发生错误')

                  // 即使上传失败也执行打印
                  printJS({
                    printable: 'checkId3',
                    type: 'html',
                    targetStyles: ['*'],
                    maxWidth: '1400'
                  })
                })
            })
            .catch(error => {
              this.$modal.closeLoading()
              this.$modal.msgError('生成单据时发生错误')
              console.error('生成PDF错误:', error)
            })
        })
        .catch(error => {
          this.$modal.closeLoading()
          this.$modal.msgError('处理图片时发生错误')
          console.error('处理图片错误:', error)
        })
    },

    // 关闭弹窗并刷新页面
    closeDialogAndRefresh() {
      this.openPrint = false
    },

    codeInfo(row) {
      this.showView = true
      this.titleView = '查看'
      this.getListViewInfo = row.maCodeVoList
    },

    //打印明细
    printView() {
      const element = document.getElementById('remarksPrintRefView')

      // 确保元素存在
      if (!element) {
        this.$message.error('未找到要打印的元素')
        return
      }

      this.$modal.loading('正在生成单据，请稍候...')

      // 查找页面中所有图片并预加载
      const images = element.querySelectorAll('img')
      const imagePromises = []

      // 为每个图片创建加载或错误处理的Promise
      images.forEach(img => {
        // 如果图片已经加载完成，不需要处理
        if (img.complete) return

        const promise = new Promise(resolve => {
          const originalSrc = img.src

          // 图片加载成功
          img.onload = function () {
            resolve()
          }

          // 图片加载失败，使用空白图片替代
          img.onerror = function () {
            console.log('图片加载失败，使用空白图片替代:', originalSrc)
            img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1像素图片
            resolve()
          }
        })

        imagePromises.push(promise)
      })

      // 等待所有图片加载完成或失败后再生成PDF
      Promise.all(imagePromises)
        .then(() => {
          // 使用html2canvas将DOM元素转换为canvas
          html2canvas(element, {
            scale: 2, // 提高清晰度
            useCORS: true, // 允许加载跨域图片
            allowTaint: true,
            ignoreElements: element => {
              // 忽略所有图片加载错误
              return element.nodeName === 'IMG' && !element.complete
            },
            logging: false, // 关闭日志记录
            imageTimeout: 3000, // 图片加载超时时间
            backgroundColor: '#ffffff'
          })
            .then(canvas => {
              // 创建PDF文档
              const pdf = new jsPDF('p', 'mm', 'a4')

              // 获取canvas的宽度和高度
              const imgWidth = 210 // A4纸的宽度(mm)
              const pageHeight = 297 // A4纸的高度(mm)
              const imgHeight = (canvas.height * imgWidth) / canvas.width

              // 将canvas转换为图片
              const imgData = canvas.toDataURL('image/jpeg', 1.0)

              // 添加图片到PDF
              pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)

              // 生成PDF文件名
              const fileName = `领料单编号明细_${new Date().getTime()}.pdf`

              // 将PDF转换为Blob对象
              const pdfBlob = pdf.output('blob')

              // 创建FormData对象用于上传
              const formData = new FormData()
              formData.append('file', pdfBlob, fileName)
              formData.append('id', this.leaseApplyData.leaseProjectId)

              // 上传到服务器
              this.$modal.closeLoading()

              // 调用上传API - 使用request
              request
                .post('/material/lease_apply_info/uploadDetailPdf', formData, {
                  headers: {
                    'Content-Type': 'multipart/form-data'
                  }
                })
                .then(response => {
                  if (response.code === 200) {
                    this.$modal.msgSuccess('单据文件已保存到服务器')

                    // 上传成功后执行打印
                    this.$refs.remarksPrintRefView.print()
                  } else {
                    this.$modal.msgError('保存单据文件失败')

                    // 即使保存失败也执行打印
                    this.$refs.remarksPrintRefView.print()
                  }
                })
                .catch(() => {
                  this.$modal.msgError('上传单据文件时发生错误')

                  // 即使上传失败也执行打印
                  this.$refs.remarksPrintRefView.print()
                })
            })
            .catch(error => {
              this.$modal.closeLoading()
              this.$modal.msgError('生成单据时发生错误')
              console.error('生成单据错误:', error)
            })
        })
        .catch(error => {
          this.$modal.closeLoading()
          this.$modal.msgError('处理图片时发生错误')
          console.error('处理图片错误:', error)
        })
    },

    //打印
    print() {
      console.log('正在执行领料单打印操作')

      const element = document.getElementById('checkIdTwo')

      // 确保元素存在
      if (!element) {
        this.$message.error('未找到要打印的元素')
        return
      }

      this.$modal.loading('正在生成单据，请稍候...')

      // 查找页面中所有图片并预加载
      const images = element.querySelectorAll('img')
      const imagePromises = []

      // 为每个图片创建加载或错误处理的Promise
      images.forEach(img => {
        // 如果图片已经加载完成，不需要处理
        if (img.complete) return

        const promise = new Promise(resolve => {
          const originalSrc = img.src

          // 图片加载成功
          img.onload = function () {
            resolve()
          }

          // 图片加载失败，使用空白图片替代
          img.onerror = function () {
            console.log('图片加载失败，使用空白图片替代:', originalSrc)
            img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1像素图片
            resolve()
          }
        })

        imagePromises.push(promise)
      })

      // 等待所有图片加载完成或失败后再生成PDF
      Promise.all(imagePromises)
        .then(() => {
          // 使用html2canvas将DOM元素转换为canvas
          html2canvas(element, {
            scale: 2, // 提高清晰度
            useCORS: true, // 允许加载跨域图片
            allowTaint: true,
            ignoreElements: element => {
              // 忽略所有图片加载错误
              return element.nodeName === 'IMG' && !element.complete
            },
            logging: false, // 关闭日志记录
            imageTimeout: 3000, // 图片加载超时时间
            backgroundColor: '#ffffff'
          })
            .then(canvas => {
              // 创建PDF文档
              const pdf = new jsPDF('p', 'mm', 'a4')

              // 获取canvas的宽度和高度
              const imgWidth = 210 // A4纸的宽度(mm)
              const pageHeight = 297 // A4纸的高度(mm)
              const imgHeight = (canvas.height * imgWidth) / canvas.width

              // 将canvas转换为图片
              const imgData = canvas.toDataURL('image/jpeg', 1.0)

              // 添加图片到PDF
              pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)

              // 生成PDF文件名
              const fileName = `领料单_${this.leaseApplyData.code || '未命名'}_${new Date().getTime()}.pdf`

              // 将PDF转换为Blob对象
              const pdfBlob = pdf.output('blob')

              // 创建FormData对象用于上传
              const formData = new FormData()
              formData.append('file', pdfBlob, fileName)
              formData.append('id', this.leaseApplyData.leaseProjectId)

              // 上传到服务器
              this.$modal.closeLoading()

              // 调用上传API - 使用request
              request
                .post('/material/lease_apply_info/uploadPdf', formData, {
                  headers: {
                    'Content-Type': 'multipart/form-data'
                  }
                })
                .then(response => {
                  if (response.code === 200) {
                    this.$modal.msgSuccess('单据文件已保存到服务器')

                    // 上传成功后执行打印
                    this.$refs.remarksPrintRef.print()
                    // printJS({
                    //   printable: 'checkIdTwo',
                    //   type: 'html',
                    //   targetStyles: ['*'],
                    //   maxWidth: '1400'
                    // })
                  } else {
                    this.$modal.msgError('保存单据文件失败')

                    // 即使保存失败也执行打印
                    this.$refs.remarksPrintRef.print()
                    // printJS({
                    //   printable: 'checkIdTwo',
                    //   type: 'html',
                    //   targetStyles: ['*'],
                    //   maxWidth: '1400'
                    // })
                  }
                })
                .catch(() => {
                  this.$modal.msgError('上传单据文件时发生错误')

                  // 即使上传失败也执行打印
                  this.$refs.remarksPrintRef.print()
                  // printJS({
                  //   printable: 'checkIdTwo',
                  //   type: 'html',
                  //   targetStyles: ['*'],
                  //   maxWidth: '1400'
                  // })
                })
            })
            .catch(error => {
              this.$modal.closeLoading()
              this.$modal.msgError('生成单据时发生错误')
              console.error('生成单据错误:', error)
            })
        })
        .catch(error => {
          this.$modal.closeLoading()
          this.$modal.msgError('处理图片时发生错误')
          console.error('处理图片错误:', error)
        })
    },

    /** 删除按钮操作 */
    handleDeletePurchase(row) {
      // console.log(row)
      let ids = []
      ids.push(row.id)
      console.log('ids', ids)
      this.$modal
        .confirm('是否确认删除所选择的数据项？')
        .then(function () {
          return applyRemove(ids)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },

    /** 导出按钮操作 */
    handleExport() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      const params = {
        keyWord: this.queryParams.keyWord,
        taskStatus: this.queryParams.taskStatus,
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        statusList: this.queryParams.taskStatus ? [this.queryParams.taskStatus] : [1, 2, 3, 4]
      }
      this.download('/material/lease_apply_info/export', { ...params }, `领料申请_${currentTime}.xlsx`)
    },

    //发布按钮
    handleSend(row) {
      const param = { id: row.id, taskId: row.taskId,code:row.code }
      this.$modal
        .confirm('是否确认发布所选择的数据项？')
        .then(async () => {
          try {
            if (this.isSubmit) return
            this.isSubmit = true
            this.loading = true
            await applySend(param)
            this.getList()
            this.$modal.msgSuccess('发布成功')
          } catch (error) {
            console.log('🚀 ~ handleSend ~ error:', error)
          } finally {
            this.isSubmit = false
            this.loading = false
          }
        })
        .catch(() => {})
    },

    handleSendAll() {
      if (this.ids.length == 0) {
        this.$alert('请至少勾选一个领料申请', '提示', {
          type: 'warning',
          confirmButtonText: '确定'
        })
        return
      } else {
        if (this.isSubmit) return
        this.isSubmit = true
        this.loading = true
        applySendAll(this.sendTemp).then(response => {
          this.isSubmit = false
          this.loading = false
          if (response.code == 200) {
            this.$modal.msgSuccess('发布成功')
          }
          this.getList()
        }).catch(() => {
          this.isSubmit = false
          this.loading = false
        })
      }
    },

    chapter(text, companyName) {
      let canvas = document.getElementById('canvas')
      let context = canvas.getContext('2d')
      canvas.width = canvas.width
      context.height = canvas.height
      // // 清除画布内容
      // context.clearRect(0, 0, canvas.width, canvas.height);
      //let text = "XXX专用章";
      //let companyName = "XXX科技股份有限公司";

      // 绘制印章边框
      let width = canvas.width / 2
      let height = canvas.height / 2
      context.lineWidth = 3
      context.strokeStyle = '#f00'
      context.beginPath()
      context.arc(width, height, 80, 0, Math.PI * 2) //宽、高、半径
      context.stroke()

      //画五角星
      this.create5star(context, width, height, 20, '#f00', 0)

      // 绘制印章名称
      context.font = '100 13px 宋体'
      context.textBaseline = 'middle' //设置文本的垂直对齐方式
      context.textAlign = 'center' //设置文本的水平对对齐方式
      context.lineWidth = 0.7
      context.strokeStyle = '#ff2323'
      context.strokeText(text, width, height + 50)

      // 绘制印章单位
      context.translate(width, height) // 平移到此位置,
      context.font = '100 13px 宋体'
      let count = companyName.length // 字数
      let angle = (4 * Math.PI) / (3 * (count - 1)) // 字间角度
      let chars = companyName.split('')
      let c
      for (let i = 0; i < count; i++) {
        c = chars[i] // 需要绘制的字符
        if (i == 0) {
          context.rotate((5 * Math.PI) / 6)
        } else {
          context.rotate(angle)
        }

        context.save()
        context.translate(65, 0) // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
        context.rotate(Math.PI / 2) // 旋转90度,让字平行于x轴
        context.strokeStyle = '#ff2323' // 设置印章单位字体颜色为较浅的红色
        context.strokeText(c, 0, 0) // 此点为字的中心点
        context.restore()
      }
    },

    //绘制五角星
    create5star(context, sx, sy, radius, color, rotato) {
      context.save()
      context.fillStyle = color
      context.translate(sx, sy) //移动坐标原点
      context.rotate(Math.PI + rotato) //旋转
      context.beginPath() //创建路径
      // let x = Math.sin(0);
      // let y = Math.cos(0);
      let dig = (Math.PI / 5) * 4
      for (let i = 0; i < 5; i++) {
        //画五角星的五条边
        let x = Math.sin(i * dig)
        let y = Math.cos(i * dig)
        context.lineTo(x * radius, y * radius)
      }
      context.closePath()
      context.stroke()
      context.fill()
      context.restore()
    }
  },

  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;
// }
.is-rotate {
  transform: rotate(-90deg);
}

.image-type {
  /* 旋转图片 */
  transform: rotate(-90deg);
  /* 确保旋转后的图片不会超出容器 */
  max-width: 100%;
  /* 保持图片的宽高比 */
  width: 40px;
  height: 100px;
}
.sign-type {
  width: 100px;
  height: 40px;
}
.print-table {
  table,
  th,
  td {
    border: 1.5px solid black;
    border-collapse: collapse;
  }
}
</style>
