<template>
  <div>
    <div id="pdfDom" ref="pdfDom" style="width: 840px">
      <div style="display: flex; align-items: center">
        <div>
          <img
            :src="pdfData.companyPic"
            alt=""
            fit="scale-down"
            style="height: 60px; width: 60px"
          />
        </div>
        <div style="padding: 10px 30px" class="center-class">
          <div
            style="font-size: 16px; color: rgb(132, 151, 176); font-weight: 700"
          >
            {{ pdfData.buyCorporationName }}
          </div>
          <div>
            Add:
            {{ pdfData.buyAddress }} , {{ pdfData.buyCityName }} ,
            {{ pdfData.buyProvinceName }} , {{ pdfData.buyCountryName }} ,
            {{ pdfData.buyPostalCode }}
          </div>
          <div>
            TEL: {{ pdfData.buyContactNumber }}
            <span style="margin: 0 10px">FAX:0591-38165700</span>
            WEB:https://www.bridgestylefurnishings.com/
          </div>
        </div>
      </div>
      <div
        style="margin-top: 30px; font-size: 16px; font-weight: 700"
        class="center-class"
      >
        采购合同
      </div>
      <div style="margin: 10px 0px 20px 0px" class="center-class">
        {{ pdfData.code }}
      </div>
      <div style="display: flex; justify-content: space-between">
        <div>
          甲方： <br />
          公司名称：{{ pdfData.buyCorporationName }}<br />
          联系人：{{ pdfData.buyContactName }} <br />
          电话：{{ pdfData.buyContactNumber }}
        </div>
        <div>
          乙方： <br />
          公司名称：{{ pdfData.sellCorporationName }} <br />
          联系人：{{ pdfData.sellContactName }}<br />
          电话：{{ pdfData.sellContactNumber }}
        </div>
      </div>
      <table border="1" style="width: 100%" class="table">
        <tr>
          <td style="width: 15%" class="center-class">产品图片</td>
          <td style="width: 20%" class="center-class">产品名称</td>
          <td style="width: 18%" class="center-class">尺寸cm</td>
          <td style="width: 15%" class="center-class">数量</td>
          <td style="width: 15%" class="center-class">单价</td>
          <td style="width: 17%" class="center-class">总价</td>
        </tr>
        <template
          v-if="
            pdfData.ehsdPurchaseProductList &&
            pdfData.ehsdPurchaseProductList.length > 0
          "
        >
          <tr v-for="item in pdfData.ehsdPurchaseProductList" :key="item.id">
            <td style="width: 15%" class="center-class">
              <img
                :src="item.fileList[0].fileUrl"
                alt=""
                fit="scale-down"
                style="height: 60px; width: 60px"
                v-if="item.fileList && item.fileList.length > 0"
              />
            </td>

            <td style="width: 20%" class="center-class">
              {{ item.productName }}
            </td>
            <td style="width: 18%" class="center-class">
              {{ item.productModel }}
            </td>
            <td style="width: 15%" class="center-class">
              {{ item.quantity }}
            </td>
            <td style="width: 15%" class="center-class">
              {{ pdfData.currency }} {{ item.price }}
            </td>
            <td style="width: 17%" class="center-class">
              {{ pdfData.currency }} {{ moneyFormat(item.amount, 2) }}
            </td>
          </tr>
        </template>
        <template
          v-if="
            pdfData.purchaseProjectList &&
            pdfData.purchaseProjectList.length > 0
          "
        >
          <tr>
            <td colspan="5" style="text-align: right">
              <div
                v-for="(item, index) in pdfData.purchaseProjectList"
                :key="item.id"
              >
                {{ item.payName }}：
              </div>
            </td>
            <td class="center-class">
              <div
                v-for="(item, index) in pdfData.purchaseProjectList"
                :key="item.id"
              >
                {{ pdfData.currency }}
                {{ moneyFormat(item.amount, 2) }}
              </div>
            </td>
          </tr>
        </template>

        <tr>
          <td colspan="5" style="text-align: right">合计：</td>
          <td class="center-class">
            {{ pdfData.currency }} {{ moneyFormat(pdfData.amount, 2) }}
          </td>
        </tr>
        <tr>
          <td colspan="6">大写： {{ NumberToChinese(pdfData.amount) }}</td>
        </tr>
        <tr>
          <td>乙方收款账户：</td>
          <td colspan="5">
            银行： {{ pdfData.openingBank }}<br />
            账户名： {{ pdfData.openingName }}<br />
            联系人： {{ pdfData.contactPerson }}<br />
            账户： {{ pdfData.accountOpening }}
          </td>
        </tr>
        <tr>
          <td>收货地址：</td>
          <td colspan="5">
            {{ pdfData.address }}
          </td>
        </tr>
        <tr>
          <td>交货日期：</td>
          <td colspan="5">
            <span v-if="pdfData.deliveryTime">{{
              pdfData.deliveryTime.slice(0, 10)
            }}</span>
          </td>
        </tr>
        <tr>
          <td>付款方式：</td>
          <td colspan="6">
            {{ dictValueLabel(pdfData.paymentMethod, fundsPaymentMethod) }}
          </td>
        </tr>
        <tr>
          <td colspan="7">
            <div>
              二、相关约定 <br />
              1.所有与食品直接接触的产品，如菜板，芝士板需通过食品级测试，（LFGB测试-过甲醛和重金属测试）。请
              各供应商在采购板材和生产过程中务必使用合格的胶水和油漆等，否则客户会取消订单或由此产生的费用由工厂承担。
              <br />
              2.供货方应在收到订单后的一个有效工作日内回复确认，否则视供方默认订单条款。<br />
              3.需在7个工作日内提供1套产前确认样给我方确认。<br />
              4.产品应无碰伤，无开裂，无缺口，无毛刺，不得有不平整不光滑现象。<br />
              5.必须按规定日期和双方确认的品质标准交货。如由于工厂的交期延期，导致客户取消订单或者由此产生额外费用
              ，全由工厂承担。<br />
              6.包装前须将产品上灰尘清理干净，做好清洁工作。<br />
              7.如有合同附件，同样具有法律效力。本合同壹式两份，双方各执壹份，合同传真件与正本具有同等法津效力。<br />
              8.如果我司的产品的结构有不合理，请工厂告知!<br />
              9.竹子湿度控制在12%以下，如有需要的可配合一包干燥剂，避免霉变。<br />
              10.订单出货后，每单每款产品需提供2个不计价大货样给我司，未提供，则每单扣款500元，且货款暂缓。<br />
              三、违约责任
              <br />1.
              如因质量问题导致交货期延迟，或因产品结构及包装等造成的返工损失由供方自负。因质量或交期导致需方客
              户的索赔由供方承担(质量标准经由需方或第三方出厂前出具验货报告为准)。<br />
              2.
              如在约定时间内无法完成订单供客人验货，或因验货不合格而造成客人产生额外费用，将由供方承担。<br />
              3.
              逾期交货（含合格品数量不足,）的，按合同总额的千分之五支付日违约金至履约日（不含需方不能及时提供
              的约定材料或相关资料导致的逾期）。逾期交货15日的，需方有权解除合同，供方应按合同总额的30%支付违约金
              。<br />
              四、合同发生争议时，双方应协商解决，协商不成时，任何一方均可向当地人民法院起诉。
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            甲方：<br />
            {{ pdfData.buyCorporationName }}
          </td>
          <td colspan="4">
            乙方：<br />
            {{ pdfData.sellCorporationName }}
          </td>
        </tr>
      </table>
      <!-- <div
        v-if="
          pdfData.ehsdPurchaseProductList &&
          pdfData.ehsdPurchaseProductList.length > 0
        "
      >
        <div
          class="border-class"
          v-for="item in pdfData.ehsdPurchaseProductList"
          :key="item.id"
        >
          <div
            style="border-bottom: 1px solid #000; padding: 2px 5px"
            class="center-class"
          >
            {{ item.productName }}
          </div>
          <div style="padding: 2px 5px; min-height: 22px">
            <div v-html="getHtml(item.remark)"></div>
          </div>
        </div>
      </div> -->
      <!-- 出货 -->
      <div style="height: 20px"></div>
      <table border="1" style="width: 100%" class="table">
        <tr>
          <td class="center-class">产品名称</td>
          <td class="center-class">出货时间</td>
          <td class="center-class">出货数量</td>
        </tr>
        <template
          v-if="
            pdfData.purchaseArrivalList &&
            pdfData.purchaseArrivalList.length > 0
          "
        >
          <tr v-for="item in pdfData.purchaseArrivalList" :key="item.id">
            <td>{{ item.productName }}</td>
            <td>
              <span v-if="item.arrivalTime"
                >{{ item.arrivalTime.slice(0, 10) }}
              </span>
            </td>
            <td>{{ item.quantity }}</td>
          </tr>
        </template>
      </table>
    </div>
  </div>
</template>

<script setup>
import { NumberToChinese } from "@/utils/util.js";
const { proxy } = getCurrentInstance();
const pdfData = ref({});
const props = defineProps({
  rowData: Object,
});
const fundsPaymentMethod = ref([]);
proxy.getDictOne(["unit", "funds_payment_method"]).then((res) => {
  fundsPaymentMethod.value = res["funds_payment_method"].map((x) => ({
    label: x.dictValue,
    value: x.dictKey,
  }));
});

const getHtml = (str) => {
  if (str) {
    let newStr = str.replace(/<p\b/gi, "<div"); // 使用正则表达式替换<p>为<div
    return newStr.replace(/<\/p>/gi, "</div>"); // 使用正则表达式替换</p>为</div>
  }
};

const handlePrintPdf = (row) => {
  proxy.post("/ehsdPurchase/detail", { id: row.id }).then((res) => {
    pdfData.value = res;
    console.log(res, "ada");
    // 拿去多公司配置的logo图
    if (pdfData.value.buyCorporationId) {
      proxy
        .post("/fileInfo/getList", {
          businessIdList: [pdfData.value.buyCorporationId],
          fileType: 1,
        })
        .then((fileObj) => {
          proxy
            .getImgBase64(fileObj[pdfData.value.buyCorporationId][0].fileUrl)
            .then((res) => {
              pdfData.value.companyPic = res;
            });
        });
    }
    // 拿取产品图
    let arr = [];
    for (let i = 0; i < pdfData.value.ehsdPurchaseProductList.length; i++) {
      const e = pdfData.value.ehsdPurchaseProductList[i];
      if (
        e.purchaseProductMountingsList &&
        e.purchaseProductMountingsList.length > 0
      ) {
        arr = arr.concat(e.purchaseProductMountingsList);
      }
    }
    pdfData.value.ehsdPurchaseProductList = arr;
    if (
      pdfData.value.ehsdPurchaseProductList &&
      pdfData.value.ehsdPurchaseProductList.length > 0
    ) {
      let arr = pdfData.value.ehsdPurchaseProductList.map((x) => x.productId);
      proxy
        .post("/fileInfo/getList", {
          businessIdList: arr,
        })
        .then(async (fileObj) => {
          for (
            let i = 0;
            i < pdfData.value.ehsdPurchaseProductList.length;
            i++
          ) {
            const e = pdfData.value.ehsdPurchaseProductList[i];
            for (const key in fileObj) {
              if (e.productId === key) {
                if (fileObj[key] && fileObj[key].length > 0) {
                  const res = await proxy.getImgBase64(fileObj[key][0].fileUrl);
                  fileObj[key][0].fileUrl = res;
                  e.fileList = fileObj[key];
                }
              }
            }
          }
        });
    }
  });
};

if (props.rowData && props.rowData.id) {
  handlePrintPdf(props.rowData);
}

watch(
  () => props.rowData.id,
  (val) => {
    if (props.rowData && props.rowData.id) {
      handlePrintPdf(props.rowData);
    }
  }
);
</script>

<style lang="scss" scoped>
#pdfDom {
  font-size: 13px;
  padding: 30px 60px;
}
.center-class {
  text-align: center;
}
.border-class {
  margin-top: 20px;
  border: 1px solid #000;
}
.table {
  border-collapse: collapse;
  border-spacing: 0;
  td {
    padding: 2px 5px;
    text-align: left;
  }
  .center-class {
    text-align: center;
  }
}
</style>