<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" class="print-table">
          <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.teamName }}</span>
              </div>
              <div>
                <span>单号：</span>
                <span>{{ rowObj.code }}</span>
              </div>
            </div>
          </div>
          <!-- <el-table :data="tableData" border style="width: 100%; padding: 1px 0">
            <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="materialType" :show-overflow-tooltip="true" />
            <el-table-column label="规格型号" align="center" prop="typeName" :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); cursor: pointer"
                  @click="checkDetail(scope.row)"
                >
                  查看明细
                </span>
              </template>
            </el-table-column>
          </el-table> -->
          <table border="1" style="width: 100%; border-collapse: collapse; padding: 1px 0">
            <thead>
              <tr align="center">
                <th style="width: 60px">编号</th>
                <th>物资类型</th>
                <th>物资名称</th>
                <th>规格型号</th>
                <th>计量单位</th>
                <th>退料数量</th>
                <th>编号</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in tableData" :key="index" align="center">
                <td>{{ index + 1 }}</td>
                <td :title="row.materialType">{{ row.materialType }}</td>
                <td :title="row.materialName">{{ row.materialName }}</td>
                <td :title="row.typeName">{{ row.typeName }}</td>
                <td :title="row.unitName">{{ row.unitName }}</td>
                <td>{{ row.preNum }}</td>
                <td>
                  <span v-if="row.manageType == 1">无编码</span>
                  <span
                    v-if="row.manageType == 0"
                    style="color: rgb(2, 167, 240); cursor: pointer"
                    @click="checkDetail(row)"
                  >
                    查看明细
                  </span>
                </td>
              </tr>
            </tbody>
          </table>

          <div class="order_footer">
            <!-- <div>审核人：</div> -->
            <div class="item" style="width: 50%; 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="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: 100px; max-width: 100%"
                    :style="{transform: item.outSignType == 0 ? 'rotate(-90deg)' : ''}"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="item" style="width: 50%; 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="backSignUrl">
                <div style="width: 80%; margin-left: 20px; height: 40px; transform: translateY(-30px)">
                  <img
                    :src="backSignUrl"
                    style="width: 40px; height: 100px; max-width: 100%"
                    :style="{transform: backSignType == 0 ? 'rotate(-90deg)' : ''}"
                    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-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" class="print-table">
            <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.teamName }}</span>
                </div>
                <div>
                  <span>单号：</span>
                  <span>{{ rowObj.code }}</span>
                </div>
              </div>
            </div>
            <!-- <el-table :data="tableSubData" border style="width: 100%; padding: 1px 0">
              <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="materialName" label="物资名称" align="center"></el-table-column>
              <el-table-column prop="typeName" label="规格型号" align="center"></el-table-column>
              <el-table-column prop="maCode" label="设备编号" align="center"></el-table-column>
            </el-table> -->
            <table border="1" style="width: 100%; border-collapse: collapse; padding: 1px 0">
              <thead>
                <tr align="center">
                  <th style="width: 60px">序号</th>
                  <th>物资类型</th>
                  <th>物资名称</th>
                  <th>规格型号</th>
                  <th>设备编号</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, index) in tableSubData" :key="index" align="center">
                  <td>{{ index + 1 }}</td>
                  <td>{{ row.materialType }}</td>
                  <td>{{ row.materialName }}</td>
                  <td>{{ row.typeName }}</td>
                  <td>{{ row.maCode }}</td>
                </tr>
              </tbody>
            </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="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: 100px; max-width: 100%"
                      :style="{transform: item.outSignType == 0 ? 'rotate(-90deg)' : ''}"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div class="item" style="width: 24%; 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="backSignUrl">
                  <div style="width: 80%; margin-left: 20px; height: 40px; transform: translateY(-30px)">
                    <img
                      :src="backSignUrl"
                      style="width: 40px; height: 100px; max-width: 100%"
                      :style="{transform: backSignType == 0 ? 'rotate(-90deg)' : ''}"
                      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>
      <div style="margin-top: 10px">
        <el-button type="primary" @click="remarksPrint">打印</el-button>
      </div>
    </el-dialog>
    <div>
      <el-button type="primary" @click="print">打印</el-button>
    </div>
  </el-dialog>
</template>
<script>
import vueEasyPrint from 'vue-easy-print'
import { getBackApplyInfo, updatePrintStatus } from '@/api/materialsStation'

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: '',
      approveSignList: [],
      backSignUrl: '',
      backSignType: null
    }
  },
  methods: {
    init() {
      // let params = {
      //   id: this.rowObj.id,
      // }

      getBackApplyInfo(this.rowObj.id).then(res => {
        console.log(res)
        this.tableData = res.data.backApplyDetailsList
        this.approveSignList = res.data.backApplyInfo.approveSignList || []
        console.log('🚀 ~ 审核 ~ this.approveSignList:', this.approveSignList)
        this.backSignUrl = res.data.backApplyInfo.backSignUrl
        this.backSignType = res.data.backApplyInfo.backSignType
      })
    },
    // 取消按钮
    cancel() {
      this.dialogShowFlag = false
    },
    print() {
      this.$refs.printRef.print()
      // printJS({
      //   printable: 'checkId',
      //   type: 'html',
      //   targetStyles: ['*'],
      //   maxWidth:'1400'
      //   // 其他配置选项
      // });
      console.log(this.rowObj)
      updatePrintStatus(this.rowObj.id)
        .then(response => {
          if (response.code === 200) {
            //this.$modal.msgSuccess("打印成功");
            // 如果需要刷新列表
            this.$emit('refresh')
          }
        })
        .catch(() => {
          this.$modal.msgError('打印状态更新失败')
        })
    },
    checkDetail(row) {
      this.title = '查看'
      this.tableSubData = row.maCodeList
      this.open = true
    },
    remarksPrint() {
      this.$refs.remarksPrintRef.print()
      // printJS({
      //   printable: 'checkIdTwo',
      //   type: 'html',
      //   targetStyles: ['*'],
      //   maxWidth:'1400'
      //   // 其他配置选项
      // });
    }
  }
}
</script>
<style lang="scss" scoped>
.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 {
    /* 打印内容的样式 */
  }
}
.print-table {
  table,
  th,
  td {
    border: 1.5px solid black;
    border-collapse: collapse;
  }
}
</style>
