<template>
  <div>
    <div id="pdfDom" style="width: 776px; padding: 20px">
      <div style="font-size: 22px; text-align: center">销售合同</div>
      <div style="display: flex; justify-content: space-between; margin-top: 10px">
        <div>供方：福州佰易来贸易有限公司</div>
        <div style="width: 40%">合同编号：{{ formData.code }}</div>
      </div>
      <div style="display: flex; justify-content: space-between; margin-top: 10px">
        <div>需方：{{ formData.customerCorporationName }}</div>
        <div style="width: 40%">签订时间：{{ conversionDate(formData.signingDate) }}</div>
      </div>
      <div style="margin-top: 10px">一、产品名称、货号、规格、颜色、数量、单价、金额。</div>
      <table cellspacing="0" border="2" style="width: 100%">
        <thead>
          <td style="width: 40px">序号</td>
          <td>产品名称</td>
          <td>产品货号</td>
          <td>产品规格</td>
          <td style="width: 60px">颜色</td>
          <td style="width: 50px">单位</td>
          <td style="width: 60px">数量</td>
          <td style="width: 50px">单价/元</td>
          <td style="width: 70px">金额RMB/元</td>
          <td>备注</td>
        </thead>
        <template v-if="formData.list && formData.list.length > 0">
          <tr v-for="(item, index) in formData.list" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.productName }}</td>
            <td>{{ item.productCode }}</td>
            <td>{{ item.productSpec }}</td>
            <td>{{ item.productColour }}</td>
            <td>{{ item.productUnit }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.unitPrice }}</td>
            <td>{{ computeMoney(item) }}</td>
            <td>{{ item.remark }}</td>
          </tr>
        </template>
        <tr>
          <td :colspan="6">合计：</td>
          <td></td>
          <td></td>
          <td>{{ computeAllMoney(formData.list) }}</td>
          <td></td>
        </tr>
        <tr>
          <td :colspan="3">金额合计（人民币）大写：</td>
          <td :colspan="7">RMB{{ numberToRMB(computeAllMoney(formData.list)) }}</td>
        </tr>
      </table>
      <div style="margin-top: 10px">
        二、税率：
        <span style="color: red">{{ formData.taxRate ? formData.taxRate + '%' : '不含税' }}</span>
      </div>
      <div style="margin-top: 10px">
        三、运输费用：
        <span style="color: red">{{ formData.freight ? formData.freight : '不含运费' }}</span>
      </div>
      <div style="margin-top: 10px">
        四、包装方式：
        <span style="color: red">常规包装</span>
      </div>
      <div style="margin-top: 10px">
        五、支付方式：
        <span style="color: red">出货前付清全款</span>
      </div>
      <div style="margin-top: 10px">六、供方收款账号如下：</div>
      <div
        style="display: flex; justify-content: space-between; margin-top: 10px; margin-left: 24px"
      >
        <div style="width: 48%">
          <div>1.对公收款帐号：591909834210066</div>
          <div style="margin-top: 10px">开户行：招商银行股份有限公司福州屏山支行</div>
        </div>
        <div style="width: 48%">
          <div>帐户名称：福州佰易来贸易有限公司</div>
        </div>
      </div>
      <div style="margin-top: 10px">七、交(提)货点：{{ formData.deliveryAddress }}</div>
      <div style="margin-top: 10px">八、违约责任：</div>
      <div style="margin-top: 10px; margin-left: 24px">
        1.延迟交货：乙方应按照本合同约定时间完成交货，除不可抗力外（指疫情、战争、严重火灾、水灾、台风和地震以及
        其他经双方同意属不可抗力的事故），需延期交货的须向甲方提前沟通延期时间，如超出双方约定交期15天后仍未能交
        货的，则向甲方支付合同总金额0.1%/天的违约金。
      </div>
      <div style="margin-top: 10px; margin-left: 24px">
        2.延迟付款：甲方应按照本合同约定时间按时付款，除不可抗力外（指疫情、战争、严重火灾、水灾、台风和地震以及
        其他经双方同意属不可抗力的事故），如超出双方约定时间15天后仍未能付款出货的，每延迟一天履行本合同约定之义
        务的，则向乙方支付合同总额1%/天的违约金，如超出1个月仍未付款出货的，另外支付每平方20元/月（不足一月按一
        月算）的场地租金费用给乙方。如超出3个月以上的，则视为甲方自主放弃改单订，乙方有权处理所有货物。
      </div>
      <div style="margin-top: 10px">
        九、解决合同纠纷方式：双方友好协商，协商不成后可提出诉讼，诉讼地点为厂家总部的当地人民法院。
      </div>
      <div style="margin-top: 10px">
        十、本合同一式两份，双方签章后生效；双方各执一份，传真、扫描件有效。
      </div>
      <div style="display: flex; justify-content: space-between; margin-top: 20px">
        <div style="width: 48%">
          <div style="text-align: center">供方：</div>
        </div>
        <div style="width: 48%">
          <div style="text-align: center">需方：</div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; margin-top: 10px">
        <div style="width: 48%">
          <div>单位名称：福州佰易来贸易有限公司</div>
        </div>
        <div style="width: 48%">
          <div>单位名称：{{ formData.customerCorporationName }}</div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; margin-top: 10px">
        <div style="width: 48%">
          <div>
            单位地址：福建省福州市鼓楼区洪山镇洪山园路52号 单位地址：
            (原工业路东侧、福三路北侧洪山园地块)华润万象城 (三期)S10#楼18层17办公
          </div>
        </div>
        <div style="width: 48%">
          <div>单位地址：{{ formData.customerCorporationAddress }}</div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; margin-top: 10px">
        <div style="width: 48%">
          <div>法定代表人：黄凯</div>
          <div style="margin-top: 10px">业务联系人：翁本娟</div>
          <div style="margin-top: 10px">联系电话：15985717925</div>
        </div>
        <div style="width: 48%">
          <div>法定代表人：{{ formData.customerLegalRepresentative }}</div>
          <div style="margin-top: 10px">业务联系人：{{ formData.customerContactPerson }}</div>
          <div style="margin-top: 10px">联系电话：{{ formData.customerContactNumber }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { StrAnyObj } from '@/typings'
import { getDetailApi } from '@/api/business/contract/info'

const props = defineProps({
  rowData: Object
})
const formData = ref<StrAnyObj>({})
onMounted(() => {
  if (props?.rowData?.id) {
    getDetailApi({ id: props.rowData.id }).then((res: StrAnyObj) => {
      formData.value = res
    })
  }
})
const conversionDate = (time) => {
  // 创建一个日期对象（例如当前日期）
  let date = new Date(time)
  // 提取年份、月份和日期
  let year = date.getFullYear()
  let month = (date.getMonth() + 1).toString().padStart(2, '0') // 月份从0开始，所以需要加1，并且用padStart填充前导零
  let day = date.getDate().toString().padStart(2, '0') // 用padStart填充前导零
  // 格式化日期为XXXX年X月X日
  return `${year}年${month}月${day}日`
}
const computeMoney = (item) => {
  let money = 0
  if (item.quantity && item.unitPrice) {
    let price = Number(item.unitPrice)
    money = Number(Math.round(price * item.quantity * 100) / 100)
  }
  return money
}
const computeAllMoney = (list) => {
  let money = 0
  if (list && list.length > 0) {
    for (let i = 0; i < list.length; i++) {
      if (list[i].quantity && list[i].unitPrice) {
        let price = Number(list[i].unitPrice)
        money = Number(Math.round((money + price * list[i].quantity) * 100) / 100)
      }
    }
  }
  return money
}
const numberToRMB = (num) => {
  const fraction = ['角', '分']
  const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
  const unit = [
    ['元', '万', '亿'],
    ['', '拾', '佰', '仟']
  ]
  const head = num < 0 ? '负' : ''
  num = Math.abs(num)
  let s = ''
  for (let i = 0; i < fraction.length; i++) {
    s += (digit[Math.floor(num * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
  }
  s = s || '整'
  num = Math.floor(num)
  for (let i = 0; i < unit[0].length && num > 0; i++) {
    let p = ''
    for (let j = 0; j < unit[1].length && num > 0; j++) {
      p = digit[num % 10] + unit[1][j] + p
      num = Math.floor(num / 10)
    }
    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
  }
  return (
    head +
    s
      .replace(/(零.)*零元/, '元')
      .replace(/(零.)+/g, '零')
      .replace(/^整$/, '零元整')
  )
}
</script>

<style lang="scss" scoped>
* {
  font-weight: bold;
}
td {
  text-align: center;
}
</style>
