<template>
  <div class="certificate-content">
    <div class="pdf-header">
      <div class="header-left">
        <img src="@/assets/logo/logo.png" class="company-logo" alt="logo" />
        <div class="company-name-cn">科伦普</div>
        <div class="company-name-en">KE LUN PU</div>
      </div>
      <div class="header-center">
        <div class="main-title">产品质量证明书</div>
        <div class="main-title-en">PRODUCT QUALITY CERTIFICATE</div>
      </div>
      <div class="header-right">
        <div class="company-full-name">嘉祥科伦普重工有限公司</div>
        <div class="company-address">山东省济宁市嘉祥县化工园区</div>
      </div>
    </div>

    <div class="pdf-body">
      <table class="info-table">
        <tr>
          <td class="label-cell">执行标准(SPECIFICATION):</td>
          <td class="value-cell">{{ certificate.standard || '/' }}</td>
          <td class="label-cell">证明书号(CERTIFICATE NO.):</td>
          <td class="value-cell">{{ certificate.certificateNo || '' }}</td>
        </tr>
        <tr>
          <td class="label-cell">收货单位(CONSIGNEE):</td>
          <td class="value-cell">{{ certificate.consignee || '-' }}</td>
          <td class="label-cell">合同号(CONTRACT NO.):</td>
          <td class="value-cell">{{ certificate.contractNo || '' }}</td>
        </tr>
        <tr>
          <td class="label-cell">产品名称(PRODUCT):</td>
          <td class="value-cell">{{ certificate.productName || '' }}</td>
          <td class="label-cell">签发日期(DATE OF ISSUE):</td>
          <td class="value-cell">{{ formatDate(certificate.issueDate) || '' }}</td>
        </tr>
      </table>

      <table class="data-table">
        <thead>
          <tr>
            <th rowspan="2">序号</th>
            <th rowspan="2">钢卷号<br>Coil No.</th>
            <th rowspan="2">炉号<br>Heat No.</th>
            <th rowspan="2">材质<br>Type</th>
            <th rowspan="2">规格 Size<br>(mm)</th>
            <th rowspan="2">件数<br>Pieces</th>
            <th rowspan="2">重量<br>Weight(t)</th>
            <th colspan="14">化学成分(%)<br>Chemical Composition</th>
            <th colspan="3">拉伸试验 Tensile Test<br>(G.L=80mm)</th>
            <th rowspan="2">硬度试验<br>Hardness Test</th>
            <th rowspan="2">弯曲试验<br>180° B.T<br>D=0a</th>
            <th rowspan="2">表面质量</th>
            <th rowspan="2">表面结构</th>
            <th rowspan="2">边缘状态</th>
            <th rowspan="2">规定塑性延伸强度<br>(MPa)</th>
            <th rowspan="2">镀层表面结构</th>
            <th rowspan="2">镀层重量<br>(g/m²)</th>
          </tr>
          <tr>
            <th>C</th>
            <th>Si</th>
            <th>Mn</th>
            <th>P</th>
            <th>S</th>
            <th>Als</th>
            <th>Al</th>
            <th>Ti</th>
            <th>Cr</th>
            <th>Ni</th>
            <th>Cu</th>
            <th>N</th>
            <th>Fe</th>
            <th>B</th>
            <th>屈服 RP0.2<br>Y.S(MPa)</th>
            <th>抗拉 T.S<br>(MPa)</th>
            <th>伸长率 EL<br>(%)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in items" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.coilNo || '' }}</td>
            <td>{{ item.heatNo || '' }}</td>
            <td>{{ item.materialType || '' }}</td>
            <td>{{ item.size || '' }}</td>
            <td>{{ item.pieces || '' }}</td>
            <td>{{ item.weight || '' }}</td>
            <td>{{ item.c || '/' }}</td>
            <td>{{ item.si || '/' }}</td>
            <td>{{ item.mn || '/' }}</td>
            <td>{{ item.p || '/' }}</td>
            <td>{{ item.s || '/' }}</td>
            <td>{{ item.als || '/' }}</td>
            <td>{{ item.al || '/' }}</td>
            <td>{{ item.ti || '/' }}</td>
            <td>{{ item.cr || '/' }}</td>
            <td>{{ item.ni || '/' }}</td>
            <td>{{ item.cu || '/' }}</td>
            <td>{{ item.n || '/' }}</td>
            <td>{{ item.fe || '/' }}</td>
            <td>{{ item.b || '/' }}</td>
            <td>{{ item.yieldStrength || '/' }}</td>
            <td>{{ item.tensileStrength || '/' }}</td>
            <td>{{ item.elongation || '/' }}</td>
            <td>{{ item.hardness || '/' }}</td>
            <td>{{ item.bendingTest || '/' }}</td>
            <td>{{ item.surfaceQuality || '/' }}</td>
            <td>{{ item.surfaceStructure || '/' }}</td>
            <td>{{ item.edgeStatus || '/' }}</td>
            <td>{{ item.plasticExtensionStrength || '/' }}</td>
            <td>{{ item.coatingSurfaceStructure || '/' }}</td>
            <td>{{ item.coatingMass || '/' }}</td>
          </tr>
          <tr v-if="items.length === 0">
            <td colspan="30" class="empty-cell">暂无数据</td>
          </tr>
        </tbody>
      </table>

      <table class="footer-table">
        <tr>
          <td class="footer-label">注释<br>NOTE</td>
          <td class="footer-content">
            <pre>{{ certificate.note || '/' }}</pre>
          </td>
        </tr>
        <tr>
          <td class="footer-label">备注<br>REMARK</td>
          <td class="footer-content footer-remark-cell">
            <pre class="remark-text">{{ certificate.remark || '/' }}</pre>
            <div class="signature-area">
              <img v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/zhijian.png" class="stamp-image" alt="质检专用章" />
              <div class="signature-block">
                <div class="signature-label">质量负责人:</div>
                <img v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/yanghongyan.png" class="signature-image" alt="签名" />
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RawMaterialTemplate',
  props: {
    certificate: {
      type: Object,
      default: () => ({})
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    }
  }
};
</script>

<style scoped>
.certificate-content {
  width: 100%;
  height: 100%;
}

.pdf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

.header-left {
  text-align: center;
  width: 90px;
  flex-shrink: 0;
}

.company-logo {
  width: 70px;
  height: auto;
  margin-bottom: 2px;
}

.company-name-cn {
  font-size: 14px;
  font-weight: bold;
  color: #000;
  line-height: 1.2;
}

.company-name-en {
  font-size: 9px;
  color: #333;
  letter-spacing: 1px;
}

.header-center {
  flex: 1;
  text-align: center;
  padding: 0 10px;
}

.main-title {
  font-size: 22px;
  font-weight: bold;
  color: #000;
  letter-spacing: 4px;
  line-height: 1.3;
}

.main-title-en {
  font-size: 13px;
  color: #000;
  font-family: "Times New Roman", serif;
  letter-spacing: 1px;
  margin-top: 2px;
}

.header-right {
  text-align: right;
  width: 160px;
  flex-shrink: 0;
}

.company-full-name {
  font-size: 13px;
  font-weight: bold;
  color: #000;
  line-height: 1.4;
}

.company-address {
  font-size: 10px;
  color: #333;
  margin-top: 2px;
}

.pdf-body {
  margin-top: 5px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
  font-size: 11px;
}

.info-table td {
  border: 1px solid #000;
  padding: 3px 6px;
  height: 22px;
}

.info-table .label-cell {
  font-weight: bold;
  width: 22%;
  white-space: nowrap;
  background: #fafafa;
}

.info-table .value-cell {
  width: 28%;
  text-align: center;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
  font-size: 9px;
}

.data-table th,
.data-table td {
  border: 1px solid #000;
  padding: 2px 3px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.3;
}

.data-table th {
  background-color: #f0f0f0;
  font-weight: bold;
  font-size: 9px;
}

.data-table td {
  font-size: 9px;
}

.empty-cell {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 12px;
}

.footer-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  font-size: 9px;
}

.footer-table td {
  border: 1px solid #000;
  padding: 4px 6px;
  vertical-align: top;
}

.footer-label {
  font-weight: bold;
  width: 60px;
  text-align: center;
  vertical-align: middle;
  font-size: 9px;
  line-height: 1.4;
}

.footer-content {
  font-size: 9px;
  line-height: 1.5;
}

.footer-remark-cell {
  position: relative;
  padding-right: 140px;
}

.remark-text {
  font-size: 9px;
  line-height: 1.6;
}

.signature-area {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.stamp-image {
  width: 80px;
  height: auto;
}

.signature-block {
  text-align: center;
}

.signature-label {
  font-size: 9px;
  margin-bottom: 2px;
  white-space: nowrap;
}

.signature-image {
  height: 35px;
  width: auto;
}
</style>
