<template>
  <div>
    <Print ref="printf" :printId="id"></Print>
    <div id="main" align="center" style="font-size: 12px">
      <h1 style="text-align: center">日照港港口物资材料出库单</h1>

      <div class="header-container">
        <el-descriptions class="flex-grow">
          <el-descriptions-item style="margin-bottom: 20px;" label="领料单号">
            {{ qrCodeText }}
          </el-descriptions-item>
          <el-descriptions-item label="申请组织">
            {{ data.c.deptName }}
          </el-descriptions-item>
          <el-descriptions-item label="打印日期">
            {{ currentTime }}
          </el-descriptions-item>
          <el-descriptions-item label="申请人">
            {{ data.c.recordPerson }}
          </el-descriptions-item>
          <el-descriptions-item label="班组">
            {{ deptLabel }}
          </el-descriptions-item>
          <el-descriptions-item label="所在仓库">
            {{ data.tckOrderdetailList[0]?.storageShortName }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="qr-code-container">
          <qrcode-vue v-if="qrCodeText" :value="qrCodeText" :size="70" level="H" />
        </div>
      </div>

      <table class="custom-table">
        <thead>
        <tr>
          <th v-for="column in tableColumns" :key="column.prop">
            {{ column.label }}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(row, index) in data.tckOrderdetailList" :key="index">
          <td v-for="column in tableColumns" :key="column.prop">
            <template v-if="column.prop === 'levelType'">
              {{ formatLevelType(row[column.prop]) }}
            </template>
            <template v-else>
              {{ formatValue(row[column.prop]) }}
            </template>
          </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td>总计</td>
          <td
            v-for="(column, index) in tableColumns.slice(1)"
            :key="column.prop"
          >
            {{ getSummary(column.prop, index) }}
          </td>
        </tr>
        </tfoot>
      </table>

      <div class="signatures">
        <p>
          <span>发料人签字：</span><span class="signature-line"></span>
        </p>
        <p>
          <span>收料人签字：</span><span class="signature-line"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Print from "@/components/Print/index.vue";
import QrcodeVue from 'qrcode.vue';

export default {
  name: "PrintPage",
  dicts: [
    "data_source"
  ],
  components: {
    Print,
    QrcodeVue
  },
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      id: "main",
      currentTime: "",
      deptLabel: "",
      qrCodeText: "",
      tableColumns: [
        { prop: "goodsId", label: "物料编码" },
        { prop: "goodsName", label: "物料名称" },
        { prop: "recoil", label: "物料描述" },
        { prop: "stockNum", label: "库存数量" },
        { prop: "shelvesNum", label: "需求数量" },
        { prop: "specification", label: "规格" },
        { prop: "price", label: "单价" },
        { prop: "toMoney", label: "金额" },
        { prop: "unit", label: "单位" },
        { prop: "goodsTo", label: "物资流向" },
        { prop: "levelType", label: "库级" },
        { prop: "remark", label: "备注" },
      ],
    };
  },
  watch: {
    data: {
      handler(newData) {
        this.updateQRCode(newData);
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    const now = new Date();
    this.currentTime = now.toLocaleString();
    this.updateQRCode(this.data);
  },
  mounted() {
    this.deptLabel =
      this.$store.state.user.dept.length > 0
        ? this.$store.state.user.dept[0].label
        : "";
  },
  methods: {
    updateQRCode(data) {
      if(data.c.orderId != null){
        this.qrCodeText = data.c.id;
      }
      else{
        this.qrCodeText = 0;
      }
    },
    formatValue(value) {
      return value === null || value === undefined || value === "null"
        ? ""
        : value;
    },
    formatLevelType(value) {
      if (value === null || value === undefined || value === "null") {
        return "";
      }
      const dictData = this.dict.type.data_source;
      if (dictData) {
        const dictItem = dictData.find(item => item.value === value);
        return dictItem ? dictItem.label : value;
      }
      return value;
    },
    getSummary(prop) {
      if (prop === "shelvesNum") {
        return this.data.tckOrderdetailList.reduce(
          (sum, row) => sum + parseFloat(row.shelvesNum || 0),
          0
        );
      } else if (prop === "toMoney") {
        const total = this.data.tckOrderdetailList.reduce(
          (sum, row) => sum + parseFloat(row.toMoney || 0),
          0
        );
        return "￥" + total.toFixed(2);
      }
      return "";
    },
    printClick() {
      this.$nextTick(() => {
        if (this.$refs.printf) {
          this.$refs.printf.clickBtn();
        } else {
          console.error("打印组件未找到");
          this.$modal.msgError("打印组件未找到，请稍后重试");
        }
      });
    },
  },
};
</script>

<style scoped>
@media print {
  body {
    width: 210mm; /* A4 width */
    height: 297mm; /* A4 height */
    margin: 0;
    padding: 0;
    font-size: 10px;
  }

  #main {
    padding: 2mm;
  }

  .custom-table {
    width: 110%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .custom-table th,
  .custom-table td {
    border: 1px solid #000;
    padding: 2px;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .custom-table th {
    background-color: #f0f0f0;
  }

  .signatures {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }

  .signature-line {
    display: inline-block;
    width: 150px;
    border-bottom: 1px solid #000;
    margin-left: 10px;
  }
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
}

.flex-grow {
  flex-grow: 1;
  margin-right: 20px;
}

.qr-code-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.custom-table th,
.custom-table td {
  border: 1px solid #000;
  padding: 4px;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.custom-table th {
  background-color: #f0f0f0;
}

.signatures {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}

.signature-line {
  display: inline-block;
  width: 150px;
  border-bottom: 1px solid #000;
  margin-left: 10px;
}
</style>
