<template>
  <div>
    <!-- 表号和批号行 -->
    <div class="sale-header-container">
      <div class="sale-header-info">
        <span class="sale-table-number">表号: JLB-13-1</span>
        <span class="sale-batch-number"
          >批号: {{ saleModel.workOrderCode }}</span
        >
      </div>
      <div class="sale-header">检验报告</div>
    </div>

    <table border-collapse="collapse">
      <!-- 定义6列布局 -->
      <colgroup>
        <col style="width: 16.6%" />
        <col style="width: 16.6%" />
        <col style="width: 16.6%" />
        <col style="width: 16.6%" />
        <col style="width: 16.6%" />
        <col style="width: 16.6%" />
      </colgroup>

      <!-- 产品信息 -->
      <tr>
        <td>产品名称</td>
        <td colspan="2">{{ saleModel.materialName }}</td>
        <td>规格型号</td>
        <td colspan="2">{{ saleModel.materialModel }}</td>
      </tr>

      <!-- 生产信息 -->
      <tr>
        <td>生产厂家/部门</td>
        <td colspan="2">微电子车间</td>
        <td>材料/生产批号</td>
        <td colspan="2">{{ saleModel.workOrderCode }}</td>
      </tr>

      <!-- 检验日期 -->
      <tr>
        <td></td>
        <td colspan="2"></td>
        <td>检验日期</td>
        <td colspan="2">{{ saleModel.created && saleModel.created.split(' ')[0] }}</td>
      </tr>

      <!-- 数量信息 -->
      <tr>
        <td>批 量</td>
        <td colspan="2">{{ saleModel.batchNum }}</td>
        <td>抽样数量</td>
        <td colspan="2">{{ saleModel.seqNum }}</td>
      </tr>

      <!-- 环境信息 -->
      <tr>
        <td>温 度</td>
        <td colspan="2">{{ saleModel.temperature }}</td>
        <td>湿 度</td>
        <td colspan="2">{{ saleModel.humidity }}</td>
      </tr>

      <!-- 检验依据 -->
      <tr>
        <td>检验依据/技术要求</td>
        <td colspan="5">{{ saleModel.pursuant }}</td>
      </tr>

      <!-- 测试设备 -->
      <tr>
        <td>主要测试仪器及设备</td>
        <td colspan="5">{{ saleModel.device }}</td>
      </tr>

      <!-- 检验情况 -->
      <tr>
        <td colspan="6" style="text-align: left">检验情况：</td>
      </tr>
      <tr>
        <td>检验项目</td>
        <td colspan="2">检验要求</td>
        <td colspan="3">检验结果/实测数据</td>
      </tr>
      <tr v-for="(item, index) in projectItems" :key="'project-row-' + index">
        <td style="height: 50px">
          {{ item.checkProject }}
        </td>
        <td colspan="2" style="height: 50px">{{ item.checkRequired }}</td>
        <td colspan="3" style="height: 50px">{{ item.checkResult }}</td>
      </tr>

      <!-- 签名区域 -->
      <tr>
        <td colspan="2" style="text-align: left">
          使用人员意见及签字（需要时）
        </td>
        <td colspan="4">{{ saleModel.remark1 }}</td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: left">
          检验人员意见及签字（需要时）
        </td>
        <td colspan="4">{{ saleModel.remark2 }}</td>
      </tr>

      <!-- 检验结论 -->
      <tr v-if="contentArray[0]?.content">
        <td>检验结论</td>
        <td>{{ contentArray[0].content }}</td>
        <td>检验人</td>
        <td>{{ contentArray[0].user1 }}</td>
        <td>日期</td>
        <td>{{ contentArray[0].time }}</td>
      </tr>

      <!-- 备注 -->
      <tr v-if="contentArray[0]?.content">
        <td>备 注</td>
        <td colspan="5">{{ contentArray[0].notes }}</td>
      </tr>

      <!-- 审核批准 -->
      <tr
        v-if="
          (contentArray[1]?.content || contentArray[2]?.content) &&
          saleModel.state != 2
        "
      >
        <td style="height: 70px">审 核</td>
        <td>{{ contentArray[1]?.user }}</td>
        <td>批准</td>
        <td>{{ contentArray[2]?.user }}</td>
        <td colspan="2" style="position: relative; height: 70px">
          <span
            style="
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              z-index: 1;
              font-size: 18px;
            "
          >
            (盖章)
          </span>
          <img
            v-if="contentArray[2]?.content"
            :src="contentArray[2].sinature"
            style="
              position: absolute;
              left: 50%;
              top: -70px;
              transform: translateX(-50%);
              width: 250px;
              height: 150px;
              object-fit: contain;
              opacity: 0.7;
            "
          />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref } from "vue";

const saleModel = ref({});
const contentArray = ref([]);
const projectItems = ref([]);

const refreshView = (row) => {
  saleModel.value = row;
  contentArray.value = [];

  if (row.projectInfo) {
    try {
      projectItems.value = JSON.parse(row.projectInfo);
    } catch (e) {
      console.error("解析projectInfo失败:", e);
      projectItems.value = [];
    }
  } else {
    projectItems.value = [];
  }

  if (row.remark3 && JSON.parse(row.remark3).content) {
    contentArray.value.push({
      ...JSON.parse(row.remark3),
    });
  }
  if (row.remark4 && JSON.parse(row.remark4).content) {
    contentArray.value.push({
      ...JSON.parse(row.remark4),
    });
  }
  if (row.remark5 && JSON.parse(row.remark5).content) {
    contentArray.value.push({
      ...JSON.parse(row.remark5),
    });
  }
};

const handleDownload = (item) => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + item.fileUrl;
  var link = document.createElement("a");
  link.href = url;
  link.download = item.fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

defineExpose({ refreshView });
</script>

<style scoped lang="scss">
.sale-header-container {
  width: 800px;
  margin: 0 auto 10px;
}

.sale-header-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 5px;
}

.sale-table-number {
  margin-left: calc(16.6% - 10px); /* 与第一列对齐，减去默认padding */
  text-align: left;
}

.sale-batch-number {
  margin-right: calc(16.6% - 10px); /* 与最后一列对齐，减去默认padding */
  text-align: right;
}

.sale-header {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  letter-spacing: 0.3em;
}

table {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #000000;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #000000;
  text-align: center;
  padding: 3px;
}

.sale-box {
  .sale-title {
    font-size: 16px;
    margin-bottom: 5px;
    text-align: start;
  }
  .sale-content {
    font-size: 16px;
    min-height: 60px;
    margin-bottom: 10px;
    text-align: start;
    padding: 0 8px;
  }
  .sale-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .desc {
    margin-right: 20px;
  }
}
</style>
