<template>
  <el-dialog
    v-dialogDrag
    v-loading.fullscreen.lock="fullscreenLoading"
    :before-close="cancel"
    :title="dialogTitle"
    :visible.sync="dialogShowFlag"
    append-to-body
    width="1090px"
  >
    <div id="printcontent" style="height: 600px;overflow-y: scroll;padding: 0 20px;">
      <!-- <vue-easy-print tableShow ref="printRef"> -->
        <div id="checkId">
        <div 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: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
            <div>
              <span>工程名称：</span><span>{{ rowObj.proName }}</span>
            </div>
            <div>
              <span>退料时间：</span><span>{{ rowObj.createTime }}</span>
            </div>
          </div>
          <div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;text-align: right;">
            <div>
              <span>退料单位：</span><span>{{ rowObj.unitName }}</span>
            </div>
            <div>
              <span>单号：</span><span>{{ rowObj.code }}</span>
            </div>
          </div>
        </div>
        <el-table :data="tableData" border style="width: 100%;">
          <el-table-column label="编号" align="center" type="index" width="60px"/>
          <el-table-column label="物资类型"
            align="center"
            prop="materialType"
            :show-overflow-tooltip="true"
            width="120px"
          />
          <el-table-column
            label="物资名称"
            align="center"
            prop="typeName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="规格型号"
            align="center"
            prop="typeModel"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="计量单位"
            align="center"
            prop="unitName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="退料数量"
            align="center"
            class-name="small-padding fixed-width"
            width="200"
            prop="preNum"
          >
          </el-table-column>
          <el-table-column
            label="编号"
            align="center"
            class-name="small-padding fixed-width"
            width="200"
            prop="num"
          >
          <template slot-scope="scope">
              <span v-if="scope.row.manageType==1">无编码</span>
              <span v-if="scope.row.manageType==0" style="color: rgb(2, 167, 240);" @click="checkDetail(scope.row)">查看明细</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="remarks" label="备注" align="center">
            <template slot-scope="scope">
              <span
                @click="remarksClick"
                style="color: #1890ff; cursor: pointer"
                >{{ scope.row.remarks }}</span
              >
            </template>
          </el-table-column> -->
        </el-table>
        <div class="order_footer">
          <!-- <div>审核人：</div> -->
          <div class="item" style="width: 28%;display: flex;align-items: center;flex-wrap: wrap;">
            <div style="width: 35%;">审核人：</div>
                <!-- <div style="width: 65%;display: flex;align-items: center;flex-wrap: wrap;" v-if="directAuditSignUrl">
                                    <div style="width: 80%;margin-left: 10px;">
                                        <img :src="directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);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="rowObj.backSignUrl">
                <div style="width: 80%;margin-left: 20px;">
                    <img :src="rowObj.backSignUrl" style="width: 40px;height: 100px;max-width: 100%;" :class="{'is-rotate': rowObj.backSignType == 0}"  alt="">
                </div>
              </div>
          </div>
          <div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
              <span>制单：</span>
           </div>
        </div>
      </div>
      <!-- </vue-easy-print> -->
      <div>
        <el-button type="primary" @click="print">打印</el-button>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <div style="height: 500px;overflow-y: scroll;padding: 0 20px;">
      <!-- <vue-easy-print tableShow ref="remarksPrintRef"> -->
        <div id="checkIdTwo">
        <div class="remarks_box">
          <div class="remarks_box_title">退料编码明细</div>
        </div>
        <div  class="info" style="margin-top: 10px; display: flex; align-items: center;">
          <div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
            <div>
              <span>工程名称：</span><span>{{ rowObj.proName }}</span>
            </div>
            <div>
              <span>退料时间：</span><span>{{ rowObj.createTime }}</span>
            </div>
          </div>
          <div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;text-align: right;">
            <div>
              <span>退料单位：</span><span>{{ rowObj.unitName }}</span>
            </div>
            <div>
              <span>单号：</span><span>{{ rowObj.code }}</span>
            </div>
          </div>
        </div>
        <el-table :data="tableSubData" border style="width: 100%;">
          <el-table-column label="序号" align="center" type="index" width="60px"/>
          <el-table-column prop="materialType" label="物资类型" align="center">
          </el-table-column>
          <el-table-column prop="typeName" label="物资名称" align="center">
          </el-table-column>
          <el-table-column prop="materialName" label="规格型号" align="center">
          </el-table-column>
          <el-table-column prop="maCode" label="设备编号" align="center">
          </el-table-column>
        </el-table>
        <div class="order_footer">
          <div class="item" style="width: 28%;display: flex;align-items: center;flex-wrap: wrap;">
            <div style="width: 35%;">审核人：</div>
                <div style="width: 65%;display: flex;align-items: center;flex-wrap: wrap;" v-if="directAuditSignUrl">
                                    <div style="width: 80%;margin-left: 10px;">
                                        <img :src="directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);max-width: 100%;"  alt="">
                                    </div>
                </div>
          </div>
          <div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
              <span>退料人：</span>
          </div>
          <div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
              <span>制单：</span>
           </div>
        </div>
      </div>
      <!-- </vue-easy-print> -->
      </div>
      <div style="margin-top: 10px">
        <el-button type="primary" @click="remarksPrint">打印</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import vueEasyPrint from 'vue-easy-print';
import {
    getBackApplyInfo,
    updatePrintStatus,
} from '@/api/back/index.js'
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import printJS from 'print-js';
import request from "@/utils/request";
// import { getViewByApply,materialReturnNoteByApply } from "@/api/claimAndRefund/return.js"
export default {
  components: { vueEasyPrint },
  props: {
    // 弹窗是否显示
    isShowFlag: {
      type: Boolean,
      default: false
    },
    // 对应操作数据键值
    priKey: {
      type: [String, Number],
      default: ""
    },
    //弹窗标题
    dialogTitle: {
      type: String,
      default: ""
    },
    rowObj: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isShowFlag(val) {
      if (val) {
        this.init();
      }
    }
  },
  computed: {
    dialogShowFlag: {
      get() {
        return this.isShowFlag;
      },
      set(v) {
        this.$emit("update:isShowFlag", v);
      }
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      tableData: [],
      tableSubData: [],
      open: false,
      title: "",
      directAuditSignUrl: '',
    };
  },
  methods: {
    init() {
      // let params = {
      //   id: this.rowObj.id,
      // }

      getBackApplyInfo(this.rowObj.id).then(res => {
        console.log(res)
        this.tableData = res.data.backApplyDetailsList
        this.directAuditSignUrl = res.data.backApplyInfo.directAuditSignUrl
        console.log('222222222',this.directAuditSignUrl)
      })
    },
    // 取消按钮
    cancel() {
      this.dialogShowFlag = false;
    },



    print() {
      const element = document.getElementById('checkId');

      // 确保元素存在
      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.rowObj.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.rowObj.proId);

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

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

              // 上传成功后执行打印
              printJS({
                printable: 'checkId',
                type: 'html',
                targetStyles: ['*'],
                maxWidth:'1400'
              });

              // 更新打印状态
              updatePrintStatus(this.rowObj.id).then(response => {
                if (response.code === 200) {
                  // 如果需要刷新列表
                  this.$emit('refresh');
                }
              }).catch(() => {
                this.$modal.msgError("打印状态更新失败");
              });
            } else {
              this.$modal.msgError('保存单据文件失败');
            }
          }).catch(() => {
            this.$modal.msgError('上传单据文件时发生错误');

            // 即使上传失败也执行打印
            printJS({
              printable: 'checkId',
              type: 'html',
              targetStyles: ['*'],
              maxWidth:'1400'
            });

            // 更新打印状态
            updatePrintStatus(this.rowObj.id).then(response => {
              if (response.code === 200) {
                // 如果需要刷新列表
                this.$emit('refresh');
              }
            }).catch(() => {
              this.$modal.msgError("打印状态更新失败");
            });
          });
        }).catch(error => {
          this.$modal.closeLoading();
          this.$modal.msgError('生成单据时发生错误');
          console.error('生成单据错误:', error);
        });
      }).catch(error => {
        this.$modal.closeLoading();
        this.$modal.msgError('处理图片时发生错误');
        console.error('处理图片错误:', error);
      });
    },
    checkDetail(row) {
      this.title = '查看'
      this.tableSubData = row.maCodeList
      this.open = true
    },
    remarksPrint() {
      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.rowObj.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.rowObj.proId);

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

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

              // 上传成功后执行打印
              printJS({
                printable: 'checkIdTwo',
                type: 'html',
                targetStyles: ['*'],
                maxWidth:'1400'
              });
            } else {
              this.$modal.msgError('保存明细单据文件失败');
            }
          }).catch(() => {
            this.$modal.msgError('上传明细单据文件时发生错误');

            // 即使上传失败也执行打印
            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);
      });
    },

  }
};
</script>
<style lang="scss" scoped>
// .order_box {
//   display: flex;
//   flex-direction: column;
//   .order_box_one {
//     width: 100%;
//     display: flex;
//     align-content: center;
//     justify-content: space-between;
//     margin-bottom: 10px;
//     :last-child {
//       margin-right: 20px;
//     }
//   }
// }
.is-rotate {
  transform: rotate(-90deg);
}
.order_footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.remarks_box {
  display: flex;
  // align-items: center;
  justify-content: center;
  .remarks_box_title {
    margin-bottom: 10px;

    font-size: 18px;
  }
}
@media print {
  .no-print {
    display: none;
  }

  .print-content {
    /* 打印内容的样式 */
  }
}
</style>
