<template>
  <div>
    <div style="max-height: calc(100vh - 256px); overflow: hidden auto">
      <div id="pdfDom" style="padding: 10px">
        <div style="text-align: center; font-size: 20px; color: #409eff; font-weight: bold">CONTRACT</div>
        <!-- 合同基本信息表 -->
        <table class="contract-table">
          <tr>
            <th style="width: 16%">合同编号:</th>
            <td colspan="3">{{ formData.data.contractNo }}</td>
          </tr>
          <tr>
            <th style="width: 16%">签订日期:</th>
            <td style="width: 34%">{{ convertDateFormat(formData.data.signingDate) }}</td>
            <th style="width: 16%">报价有效期:</th>
            <td style="width: 34%">{{ formData.data.validityDate }} days</td>
          </tr>
        </table>

        <!-- 供需方信息表 -->
        <table class="contract-table">
          <tr>
            <th style="width: 50%">供方:</th>
            <th>需方:</th>
          </tr>
          <tr>
            <td>{{ formData.data.sellerCompany }}</td>
            <td>{{ formData.data.customerName }}</td>
          </tr>
          <tr>
            <td>{{ formData.data.sellerAddress }}</td>
            <td>{{ formData.data.customerAddress }}</td>
          </tr>
          <tr>
            <td>{{ formData.data.sellerCountry }}</td>
            <td>{{ formData.data.customerCountry }}</td>
          </tr>
          <tr>
            <td>{{ formData.data.sellerContact }}</td>
            <td>{{ formData.data.customerTelNum }}</td>
          </tr>
        </table>

        <!-- 贸易信息表 -->
        <table class="contract-table">
          <tr>
            <th>原产国:</th>
            <th>目的国:</th>
            <th>贸易方式:</th>
          </tr>
          <tr>
            <td>{{ formData.data.sellerCountry }}</td>
            <td>{{ formData.data.customerCountry }}</td>
            <td>{{ formData.data.deliveryTerms }}</td>
          </tr>
          <tr>
            <th>付款方式:</th>
            <th>交货期:</th>
            <th>运输方式:</th>
          </tr>
          <tr>
            <td>{{ formData.data.paymentTerms }}</td>
            <td>{{ formData.data.deliveryTime }} days</td>
            <td>{{ formData.data.shippingMethod }}</td>
          </tr>
          <tr>
            <th>装卸港:</th>
            <th>目的港:</th>
            <th>质保期:</th>
          </tr>
          <tr>
            <td>{{ formData.data.placeOfDischarge }}</td>
            <td>{{ formData.data.destination }}</td>
            <td>{{ formData.data.warrantyPeriod }} days</td>
          </tr>
        </table>

        <!-- 产品清单表 -->
        <table class="contract-table">
          <tr class="header-row">
            <th>产品编号</th>
            <th>产品描述</th>
            <th>颜色</th>
            <th>数量 (Pcs)</th>
            <th>单价</th>
            <th>总价</th>
          </tr>
          <template v-if="formData.data.list && formData.data.list.length > 0">
            <tr v-for="(item, index) in formData.data.list" :key="index">
              <td>{{ item.spuCode }}</td>
              <td>{{ item.spuName }} {{ item.spec }}</td>
              <td>{{ item.colour }}</td>
              <td>{{ item.quantity }}</td>
              <td>{{ item.unitPrice }}</td>
              <td>{{ formData.data.currency }} {{ item.amount }}</td>
            </tr>
          </template>
          <tr>
            <th colspan="5">小计:</th>
            <td>{{ formData.data.currency }} {{ calculateAmount() }}</td>
          </tr>
          <tr>
            <th colspan="5">保险费:</th>
            <td>{{ formData.data.currency }} {{ formData.data.insurance }}</td>
          </tr>
          <tr>
            <th colspan="5">运费:</th>
            <td>{{ formData.data.currency }} {{ formData.data.freightPrice }}</td>
          </tr>
          <tr>
            <th colspan="5">合计:</th>
            <td>{{ formData.data.currency }} {{ formData.data.amount }}</td>
          </tr>
        </table>

        <!-- 账户信息表（原文数据不完整，保留空表结构） -->
        <table class="contract-table">
          <tr>
            <th style="width: 40%">账户信息:</th>
            <td></td>
          </tr>
          <template v-if="formData.data.paymentType == 1">
            <tr>
              <th>账户名:</th>
              <td>{{ formData.data.sellAccountName }}</td>
            </tr>
            <tr>
              <th>银行账号:</th>
              <td>{{ formData.data.sellBankAccount }}</td>
            </tr>
            <tr>
              <th>开户银行:</th>
              <td>{{ formData.data.sellBankName }}</td>
            </tr>
            <tr>
              <th>联行号:</th>
              <td>{{ formData.data.sellBankCnapsCode }}</td>
            </tr>
          </template>
          <template v-else-if="formData.data.paymentType == 2">
            <tr>
              <th>支付宝:</th>
              <td>{{ formData.data.sellAlipayAccount }}</td>
            </tr>
          </template>
        </table>
        <!-- 签名栏 -->
        <div style="margin: 20px 0">签名:</div>
      </div>
    </div>
    <div style="text-align: center; padding: 8px">
      <el-button type="primary" v-print="printObj" size="large">打印</el-button>
      <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
    </div>
  </div>
</template>

<script setup>
import { getDetailApi } from '@/api/business/contract/info'
import { getPdf } from '@/utils/getPdf.js'

const { proxy } = getCurrentInstance()
const props = defineProps({
  rowData: Object
})
const formData = reactive({
  data: {
    items: []
  }
})
const convertDateFormat = (dateString) => {
  // 创建日期对象
  const date = new Date(dateString)
  // 提取日、月、年
  const day = date.getDate()
  // 确保月份以英文缩写形式显示
  const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  const month = monthNames[date.getMonth()]
  const year = date.getFullYear().toString().slice(-2) // 获取年份的后两位
  // 组合成目标格式
  return `${day}/${month}/${year}`
}
const calculateAmount = () => {
  let amount = 0
  if (formData.data.list && formData.data.list.length > 0) {
    for (let i = 0; i < formData.data.list.length; i++) {
      if (formData.data.list[i].quantity && formData.data.list[i].unitPrice) {
        amount = Number(Math.round((amount + Number(formData.data.list[i].unitPrice) * Number(formData.data.list[i].quantity)) * 100) / 100)
      }
    }
  }
  return amount
}
const printObj = ref({
  id: 'pdfDom',
  popTitle: '',
  extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
})
const clickDownload = () => {
  getPdf('合同' + formData.data.contractNo + '-PDF文件')
}
onMounted(() => {
  getDetailApi({ id: props.rowData.id }).then((res) => {
    formData.data = res
  })
})
</script>

<style lang="scss" scoped>
* {
  color: black;
}
.contract-table {
  border-collapse: collapse;
  margin: 20px 0;
  width: 100%;
}
.contract-table th,
.contract-table td {
  border: 2px solid #000;
  padding: 4px;
  text-align: left;
}
.header-row {
  font-weight: bold;
  background-color: #f0f0f0;
}
::v-deep(.contract-table th) {
  color: #409eff !important;
}
</style>
