<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">LOGO图</td>
          <td style="width: 15%" class="center-class">产品名称</td>
          <td style="width: 13%" class="center-class">尺寸cm</td>
          <td style="width: 12%" class="center-class">数量</td>
          <td style="width: 13%" class="center-class">单价</td>
          <td style="width: 12%" 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"></td>
            <td style="width: 15%" class="center-class">
              {{ item.productName }}
            </td>
            <td style="width: 13%" class="center-class">
              {{ item.productModel }}
            </td>
            <td style="width: 12%" class="center-class">
              {{ item.quantity }}
            </td>
            <td style="width: 13%" class="center-class">
              {{ pdfData.currency }} {{ item.price }}
            </td>
            <td style="width: 12%" class="center-class">
              {{ pdfData.currency }} {{ moneyFormat(item.amount, 2) }}
            </td>
          </tr>
        </template>

        <tr>
          <td colspan="6">合计：</td>
          <td class="center-class">
            {{ pdfData.currency }} {{ moneyFormat(pdfData.amount, 2) }}
          </td>
        </tr>
        <tr>
          <td colspan="7">大写： {{ NumberToChinese(pdfData.amount) }}</td>
        </tr>
        <tr>
          <td>乙方收款账户：</td>
          <td colspan="6">
            银行： {{ pdfData.openingBank }}<br />
            账户名： {{ pdfData.openingName }}<br />
            联系人： {{ pdfData.contactPerson }}<br />
            账户： {{ pdfData.accountOpening }}
          </td>
        </tr>
        <tr>
          <td>收货地址：</td>
          <td colspan="6">
            {{ pdfData.buyProvinceName }} , {{ pdfData.buyCityName }} ,
            {{ pdfData.buyAddress }} ,
            {{ pdfData.buyPostalCode }}
            <br />
            {{ pdfData.buyContactName }} {{ pdfData.buyContactNumber }}
          </td>
        </tr>
        <tr>
          <td>交货时间：</td>
          <td colspan="6">{{ pdfData.deliveryTime }}</td>
        </tr>
        <tr>
          <td>付款方式：</td>
          <td colspan="6">
            {{ dictValueLabel(pdfData.paymentMethod, fundsPaymentMethod) }}
          </td>
        </tr>
        <tr>
          <td colspan="7">
            <div v-html="getHtml(pdfData.remark)"></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.packDetailProductList &&
            pdfData.packDetailProductList.length > 0
          "
        >
          <tr v-for="item in pdfData.packDetailProductList" :key="item.id">
            <td>{{ item.shipmentTime }}</td>
            <td>{{ item.productName }}</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;
    // 拿去多公司配置的logo图
    if (pdfData.value.buyCorporationId) {
      proxy
        .post("/fileInfo/getList", {
          businessIdList: [pdfData.value.buyCorporationId],
          fileType: 1,
        })
        .then((fileObj) => {
          pdfData.value.companyPic =
            fileObj[pdfData.value.buyCorporationId][0].fileUrl;
        });
    }
    // 拿取产品图
    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((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) {
                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>