crm_extend/src/pages/purchase-order/edit.vue

<template>
  <div>
    <div
      v-if="loading"
      v-loading="true"
      class="view-window"
    ></div>
    <div
      class="flex"
      style="position: fixed; top: 20px; right: 100px; z-index: 2"
    >
      <el-button
        type="info"
        @click="formVisible = !formVisible"
      >
        <el-icon
          size="18px"
          color="#fff"
        >
          <Switch />
        </el-icon>
        &nbsp;{{ formVisible ? 'Preview PDF' : 'Show Form' }}
      </el-button>
      <el-button
        type="primary"
        :disabled="!formVisible"
        @click="checkForm(mainForm)"
      >
        <el-icon
          size="20px"
          color="#fff"
        >
          <FolderAdd />
        </el-icon>
        &nbsp;Save & Attach
      </el-button>
    </div>
    <div
      v-show="formVisible"
      class="screen"
    >
      <div class="flex between page-title-wrap">
        <div class="flex">
          <el-icon
            size="36px"
            :color="variables.mainColor"
          >
            <ShoppingCart />
          </el-icon>
          <div class="page-title">New Purchase Order</div>
        </div>
      </div>
      <el-form
        ref="mainForm"
        :model="form"
        :rules="formRule"
        label-width="120px"
      >
        <div class="flex start">
          <div class="layout-left">
            <el-form-item label="Order Type">
              <el-select
                v-model="form.Order_Type"
                style="width: 100%"
                placeholder="please select order type"
              >
                <el-option
                  v-for="(item, index) in orderTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="Artwork Link"
              prop="Artwork_Link"
            >
              <el-input
                v-model="form.Artwork_Link"
                placeholder="Please input"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
            <el-form-item label="Currency">
              <el-select
                v-model="form.Currency"
                style="width: 100%"
                placeholder="please select currency"
              >
                <el-option
                  v-for="(item, index) in currencyList"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </div>

          <div class="layout-right flex-auto">
            <div style="position: absolute; right: 0; top: 0">
              <el-form-item label="Template:">
                <el-select
                  v-model="currentCompany"
                  style="width: 150px"
                  @change="onCompanyTemplateChange"
                >
                  <el-option
                    v-for="company in companyList"
                    :key="company.id"
                    :value="company.id"
                    :label="company.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="company-info">
              <div class="company-name">{{ computedCompany.name }}</div>
              <div class="flex center">
                <div class="company-addr">
                  地址:&nbsp;{{ computedCompany.addr }}
                </div>
                <div class="company-phone">
                  &nbsp;|&nbsp;电话:&nbsp;{{ computedCompany.phone }}
                </div>
                <div
                  v-show="computedCompany.fax"
                  class="company-fax"
                >
                  &nbsp;|&nbsp;传真:&nbsp;{{ computedCompany.phone }}
                </div>
              </div>
            </div>
            <div class="pdf-title">采购合同</div>
            <div class="pdf-title-bg">
              <div class="left"></div>
              <div class="right"></div>
            </div>
            <div class="flex start between form-area">
              <div class="form-area-left">
                <div class="">
                  <span style="color: #f56c6c">*</span>
                  供应商(乙方) :
                </div>
                <div>{{ computedVendor.Primary_Contact_name }}</div>
                <el-form-item
                  label-width="0"
                  prop="currentVendor"
                >
                  <el-select-v2
                    v-model="form.currentVendor"
                    :remote-method="getSupplierLists"
                    remote
                    style="width: 100%"
                    :loading="vendorLoading"
                    :options="vendorList"
                    filterable
                    clearable
                  ></el-select-v2>
                </el-form-item>
                <div style="white-space: pre-wrap">
                  {{ computedVendor.PDF_display }}
                </div>
              </div>
              <div class="form-area-right">
                <el-form-item label="采购订单 #:">
                  Generate once PO submitted
                </el-form-item>
                <el-form-item
                  label="订单号 # :"
                  prop="saleOrderId"
                >
                  <el-input
                    v-model="form.saleOrderId"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="日期:"
                  prop="PO_Date"
                >
                  <el-date-picker
                    v-model="form.PO_Date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                    type="date"
                    placeholder=""
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="付款方式 :">
                  <el-select
                    v-model="form.Payment_Terms"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in supplierPaymentTermsLists"
                      :key="index"
                      :value="item.label"
                      :label="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="参考 :">
                  <el-input v-model="form.Title"></el-input>
                </el-form-item>

                <!-- 退税版没有这几项 -->
                <template
                  v-if="typeof computedCompany.taxReimbursement === 'undefined'"
                >
                  <el-form-item label="收货详情 :">
                    <el-select
                      v-model="form.field9"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in addressList"
                        :key="index"
                        :value="item.label"
                        :label="item.label"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="收件人 :"
                    prop="field7"
                  >
                    <el-input v-model="form.field7"></el-input>
                  </el-form-item>
                  <el-form-item
                    label="联系电话 :"
                    prop="field8"
                  >
                    <el-input v-model="form.field8"></el-input>
                  </el-form-item>
                </template>
                <el-form-item
                  label="工厂交货日期 :"
                  prop="field6"
                >
                  <el-date-picker
                    v-model="form.field6"
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  ></el-date-picker>
                </el-form-item>
              </div>
            </div>
            <div class="product-table-separator"></div>
            <div class="product-table">
              <table
                border="0"
                cellspacing="0"
              >
                <tr>
                  <th class="product">Product</th>
                  <th class="quantity">Quantity</th>
                  <th class="rate">Rate</th>
                  <th class="requirement">Requirement</th>
                  <th class="amount">Amount</th>
                  <th class="discount">Discount</th>
                  <th class="action">Action</th>
                </tr>
                <tr
                  v-for="(product, index) in form.productList"
                  :key="index"
                >
                  <td class="product">
                    <el-form-item
                      label=""
                      label-width="0"
                      :prop="'productList.' + index + '.id'"
                      :rules="{
                        required: true,
                        message: '必填项',
                        trigger: ['blur', 'change'],
                      }"
                    >
                      <el-select-v2
                        v-model="product.id"
                        style="width: 100%; margin-bottom: 4pt"
                        :options="product.candidate"
                        :loading="productLoading"
                        :remote-method="(e:string) => getProductList(e, product)"
                        remote
                        filterable
                        clearable
                        @change="(e) => onProductSelect(e, product)"
                      ></el-select-v2>
                    </el-form-item>
                    <el-input
                      v-model="product.desc"
                      type="textarea"
                      placeholder="Free text"
                    ></el-input>
                  </td>
                  <td class="quantity">
                    <el-form-item
                      label=""
                      label-width="0"
                      :prop="'productList.' + index + '.quantity'"
                      :rules="{
                        required: true,
                        message: '必填项',
                        trigger: ['blur', 'change'],
                      }"
                    >
                      <el-input
                        v-model="product.quantity"
                        type="number"
                        min="1"
                        @change="(e) => onInputChange(e, product, 'quantity')"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="rate">
                    <el-form-item
                      label=""
                      label-width="0"
                      :prop="'productList.' + index + '.rate'"
                      :rules="{
                        required: true,
                        message: '必填项',
                        trigger: ['blur', 'change'],
                      }"
                    >
                      <el-input
                        v-model="product.rate"
                        type="number"
                        @change="(e) => onInputChange(e, product, 'rate')"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="requirement">
                    <el-input
                      v-model="product.requirement"
                      rows="2"
                      type="textarea"
                      placeholder="Free text"
                    ></el-input>
                  </td>
                  <td class="amount">
                    <el-input
                      v-model="product.amount"
                      type="number"
                      disabled
                    ></el-input>
                  </td>
                  <td class="discount">
                    <el-input
                      v-model="product.discount"
                      type="number"
                      @change="(e) => onInputChange(e, product, 'discount')"
                    ></el-input>
                  </td>
                  <td class="action">
                    <el-button
                      size="small"
                      type="danger"
                      plain
                      @click="form.productList.splice(index, 1)"
                    >
                      Delete
                    </el-button>
                  </td>
                </tr>
              </table>
            </div>
            <div>
              <el-button
                type="primary"
                size="small"
                plain
                @click="addRow"
              >
                Add Row
              </el-button>
            </div>
            <div class="flex end">
              <div class="product-total-table">
                <div class="total-item">
                  <div class="label">Sub Total</div>
                  <div class="value">{{ subTotal.toFixed(2) }}</div>
                </div>
                <div class="total-item">
                  <div class="label">Total Discount</div>
                  <div class="value">
                    {{ totalDiscount.toFixed(2) }}
                  </div>
                </div>
                <div class="total-item">
                  <div class="label">Adjustment</div>
                  <div class="value">
                    <el-input
                      v-model="adjustment"
                      style="width: 100%"
                      type="number"
                      @change="(e) => formatAdjustment(e)"
                      @input="(e) => formatAdjustment(e)"
                    ></el-input>
                  </div>
                </div>
                <div class="total-item">
                  <div class="label">Grand Total</div>
                  <div class="value">
                    {{ grandTotal.toFixed(2) }}
                  </div>
                </div>
              </div>
            </div>

            <div class="note-form-area">
              <div class="sub-form-title">注意事项:</div>
              <el-form-item label="印刷质量:">
                <el-input
                  v-model="form.field12"
                  type="textarea"
                  rows="3"
                ></el-input>
              </el-form-item>
              <el-form-item label="产品质量:">
                <el-input
                  v-model="form.field13"
                  type="textarea"
                  rows="3"
                ></el-input>
              </el-form-item>
              <el-form-item label="质量承诺:">
                <el-input
                  v-model="form.field10"
                  type="textarea"
                  rows="3"
                ></el-input>
              </el-form-item>
              <el-form-item label="箱子箱唛:">
                <el-input
                  v-model="form.field11"
                  type="textarea"
                  rows="3"
                ></el-input>
              </el-form-item>
            </div>

            <div class="sub-form-title">服务条款</div>
            <template v-if="currentCompany === 'PangeaTaxReimbursement'">
              <div class="rule-item flex">
                一、合同价为含税价，税率为:
                <span style="color: #f56c6c">*</span>
                <el-form-item
                  label-width="10"
                  prop="field4"
                  :rules="{
                    required: true,
                    message: '必填项',
                    trigger: ['blur', 'change'],
                  }"
                >
                  <el-input
                    v-model="form.field4"
                    size="small"
                    style="width: 120px"
                  >
                    <template #append>%</template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="rule-item flex">
                二、运费条款:
                <span style="color: #f56c6c">*</span>
                <el-form-item label-width="10">
                  <el-select
                    v-model="form.field5"
                    size="small"
                    style="width: 110px"
                  >
                    <el-option
                      v-for="(item, index) in field5_lists"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </template>
            <div
              v-for="(item, index) in currentServiceRule"
              :key="index"
              class="rule-item"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </el-form>
      <br />
    </div>
    <div
      class="print"
      :class="{ hidden: formVisible && !loading }"
    >
      <div class="pdf-wrap">
        <div
          id="pdfElement"
          ref="pdfElement"
          class="preview-area"
        >
          <div class="company-info">
            <div class="company-name">{{ computedCompany.name }}</div>
            <div class="flex center">
              <div class="company-addr">
                地址:&nbsp;{{ computedCompany.addr }}
              </div>
              <div class="company-phone">
                &nbsp;|&nbsp;电话:&nbsp;{{ computedCompany.phone }}
              </div>
              <div
                v-show="computedCompany.fax"
                class="company-fax"
              >
                &nbsp;|&nbsp;传真:&nbsp;{{ computedCompany.phone }}
              </div>
            </div>
          </div>
          <div>
            <table class="pdf-title-bg">
              <tr>
                <td class="left">
                  <div>&nbsp;</div>
                </td>
                <td class="center">
                  <div class="pdf-title">采购合同</div>
                </td>
                <td class="right">
                  <div>&nbsp;</div>
                </td>
              </tr>
            </table>
          </div>
          <div class="form-area flex start">
            <div class="flex-auto">
              <div>供应商(乙方) :</div>
              <div
                v-if="computedVendor.Primary_Contact_name"
                class="column-vendor"
              >
                {{ computedVendor.Primary_Contact_name }}
              </div>

              <div class="column-vendor">
                {{ computedVendor.label }}
              </div>
              <div class="column-vendor">
                {{ computedVendor.PDF_display }}
              </div>
            </div>
            <div class="flex-auto">
              <div class="flex">
                <div class="column-form-label">采购订单 #:</div>
                <div class="column-form-value">
                  {{ longPONumber || '' }}
                </div>
              </div>
              <div class="flex">
                <div class="column-form-label">订单号 # :</div>
                <div class="column-form-value">
                  {{ form.saleOrderId }}
                </div>
              </div>
              <div class="flex">
                <div class="column-form-label">日期 :</div>
                <div class="column-form-value">
                  {{ form.PO_Date }}
                </div>
              </div>
              <div class="flex">
                <div class="column-form-label">付款方式 :</div>
                <div class="column-form-value">
                  {{
                    form.Payment_Terms !== '-None-' ? form.Payment_Terms : ''
                  }}
                </div>
              </div>
              <div class="flex start">
                <div class="column-form-label">参考 :</div>
                <div class="column-form-value">
                  {{ form.Title }}
                </div>
              </div>

              <template
                v-if="typeof computedCompany.taxReimbursement === 'undefined'"
              >
                <div class="flex start">
                  <div class="column-form-label">收货详情 :</div>
                  <div class="column-form-value">
                    {{ form.field9 }}
                  </div>
                </div>
                <div class="flex">
                  <div class="column-form-label">收件人 :</div>
                  <div class="column-form-value">
                    {{ form.field7 }}
                  </div>
                </div>
                <div class="flex">
                  <div class="column-form-label">联系电话 :</div>
                  <div class="column-form-value">
                    {{ form.field8 }}
                  </div>
                </div>
              </template>

              <div class="flex">
                <div class="column-form-label">工厂交货日期 :</div>
                <div class="column-form-value">
                  {{ form.field6 }}
                </div>
              </div>
            </div>
          </div>
          <div class="product-table-separator"></div>
          <div class="product-table">
            <table
              border="0"
              cellspacing="0"
            >
              <tr>
                <th class="row-index">#</th>
                <th>品目</th>
                <th>要求</th>
                <th>数量</th>
                <th>价钱</th>
                <th>金额</th>
              </tr>
              <tr
                v-for="(product, index) in form.productList"
                :key="index"
              >
                <td class="row-index">{{ index + 1 }}.</td>
                <td>
                  <div>{{ product.name }}</div>
                  <div class="desc">{{ product.desc }}</div>
                </td>
                <td>
                  {{ product.requirement }}
                </td>
                <td>
                  {{ product.quantity }}
                </td>
                <td>
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    Number(product.rate).toFixed(computedDeci)
                  }}
                </td>
                <td>
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    Number(product.amount).toFixed(computedDeci)
                  }}
                </td>
              </tr>
            </table>
          </div>

          <!-- <br /> -->
          <div class="flex between start">
            <div class="note-form-area">
              <div class="sub-form-title">注意事项:</div>
              <div class="">
                <div class="label">印刷质量:</div>
                <div class="value">{{ form.field12 }}</div>
              </div>
              <div class="">
                <div class="label">产品质量:</div>
                <div class="value">{{ form.field13 }}</div>
              </div>
              <div class="">
                <div class="label">质量承诺:</div>
                <div class="value">{{ form.field10 }}</div>
              </div>
              <div class="">
                <div class="label">箱子箱唛:</div>
                <div class="value">{{ form.field11 }}</div>
              </div>
            </div>
            <div class="product-total-table">
              <div class="total-item flex">
                <div class="label">小计&nbsp;</div>
                <div class="value">
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    subTotal.toFixed(computedDeci)
                  }}
                </div>
              </div>
              <div class="total-item flex">
                <div class="label">合计&nbsp;</div>
                <div class="value">
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    grandTotal.toFixed(computedDeci)
                  }}
                </div>
              </div>
            </div>
          </div>

          <br />
          <div class="sub-form-title">服务条款</div>
          <template v-if="currentCompany === 'PangeaTaxReimbursement'">
            <div class="rule-item">
              一、合同价为含税价，税率为: {{ form.field4 }} %
            </div>
            <div class="rule-item">二、运费条款: {{ form.field5 }}</div>
          </template>
          <div
            v-for="(item, index) in currentServiceRule"
            :key="index"
            class="rule-item"
          >
            {{ item }}
          </div>

          <br />
          <div class="signature-area">
            <div class="company-seal"></div>
            <div class="first-party">
              <div
                class="flex"
                style="align-items: flex-end"
              >
                <div v-show="!computedCompany.label.includes('Pangea')">
                  甲方(盖章):
                </div>
                <div
                  class="sign-wrap"
                  :class="{ pangea: computedCompany.label.includes('Pangea') }"
                >
                  <img
                    v-if="computedCompany.signPath"
                    :src="computedCompany.signPath"
                    alt=""
                  />
                </div>
              </div>
              <div class="">代表人: {{ userInfo.full_name }}</div>
              <div class="">日期: {{ form.PO_Date }}</div>
            </div>
            <div class="second-party">
              <div class="">乙方(盖章):</div>
            </div>
          </div>
        </div>
      </div>

      <div
        v-if="computedCompany.taxReimbursement"
        class="pdf-wrap"
      >
        <div
          id=""
          ref="pdfElement2"
          class="preview-area2"
        >
          <div class="supplier-name">
            {{ computedVendor.Suppliers_Name || computedVendor.Vendor_Name }}
          </div>
          <div class="billing-addr">
            {{ computedVendor.Billing_Address || '' }}
          </div>
          <div class="flex around contact-info">
            <div class="flex">
              <div>Tel No.:</div>
              <div>&nbsp;{{ computedVendor.Phone }}</div>
            </div>
            <div class="flex center">
              <div>E-mail:</div>
              <div class="">&nbsp;{{ computedVendor.Email }}</div>
            </div>
          </div>

          <div class="base-info-area">
            <div class="flex">
              <div class="flex start left">
                <div class="base-info-label">TO:</div>
                <div
                  v-if="currentCompany === 'AZYTaxReimbursement'"
                  class="base-info-value"
                >
                  Azy Trading Pty Ltd
                </div>
                <div
                  v-else-if="currentCompany === 'FOTTaxReimbursement'"
                  class="base-info-value"
                >
                  Fair Ocean Trading Australia Pty Ltd
                </div>
              </div>

              <div class="right flex">
                <div class="base-info-label">Date:</div>
                <div class="base-info-value">{{ form.PO_Date }}</div>
              </div>
            </div>

            <div class="flex start">
              <div class="left flex start">
                <div class="base-info-label">ADD:</div>
                <div>
                  <div
                    v-if="currentCompany === 'AZYTaxReimbursement'"
                    class="base-info-value"
                  >
                    UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG
                    WAN, HK
                  </div>
                  <div
                    v-else-if="currentCompany === 'FOTTaxReimbursement'"
                    class="base-info-value"
                  >
                    15/10 Chilvers Road, Thornleigh, NSW 2120
                  </div>
                </div>
              </div>
              <div class="right flex">
                <div class="base-info-label">P/I. NO.</div>
                <div class="base-info-value">{{ longPONumber }}</div>
              </div>
            </div>

            <div class="flex start">
              <div class="left flex">
                <div class="base-info-label">ATTN:</div>
                <div class="base-info-value">Accounts</div>
              </div>
              <div class="right flex">
                <div class="base-info-label">Reference:</div>
                <div class="base-info-value">{{ PONumber }}</div>
              </div>
            </div>

            <div class="flex start">
              <div class="flex left">
                <template v-if="currentCompany === 'FOTTaxReimbursement'">
                  <div class="base-info-label">TEL NO:</div>
                  <div class="base-info-value">02 9008 1322</div>
                </template>
                <div v-else></div>
              </div>
              <div class="right flex">
                <div class="base-info-label">Payment Term:</div>
                <div class="base-info-value">
                  {{ computedVendor.Payment_Terms }}
                </div>
              </div>
            </div>
          </div>

          <div class="table-title">PROFORMA INVOICE</div>
          <div class="product-table">
            <table cellspacing="0">
              <tr>
                <th>ITEM</th>
                <th>DESCRIPTION</th>
                <th>QTY(pcs)</th>
                <th>UNIT PRICE</th>
                <th>TOPTAL VALUE</th>
              </tr>

              <tr
                v-for="(product, index) in form.productList"
                :key="index"
              >
                <td>
                  <div>{{ product.name }}</div>
                </td>
                <td>
                  <div class="desc">{{ product.desc }}</div>
                </td>
                <td>
                  {{ product.quantity }}
                </td>
                <td>
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    Number(product.rate).toFixed(computedDeci)
                  }}
                </td>
                <td>
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    Number(product.amount).toFixed(computedDeci)
                  }}
                </td>
              </tr>
            </table>
            <div class="flex end">
              <div
                class="flex"
                style="margin-top: 10pt"
              >
                <div style="margin: 0 100pt 0 0">TOTAL</div>
                <div>
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{ subTotal }}
                </div>
              </div>
            </div>
          </div>
          <br />
          <div class="bank-info-area">
            <div class="flex">
              <div>Bank Information</div>
              <div></div>
            </div>
            <div class="flex">
              <div class="bank-info-label">Beneficiary:</div>
              <div class="bank-info-value">
                {{ computedVendor.Suppliers_Name }}dd
              </div>
            </div>
            <div class="flex">
              <div class="bank-info-label">Bank:</div>
              <div class="bank-info-value">
                {{ computedVendor.Bank_Branch_Name }}
              </div>
            </div>
            <div class="flex">
              <div class="bank-info-label">Bank Add:</div>
              <div class="bank-info-value">{{}}</div>
            </div>
            <div class="flex">
              <div class="bank-info-label">A/C No.:</div>
              <div class="bank-info-value">
                {{ computedVendor.Bank_Account }}
              </div>
            </div>
            <div class="flex">
              <div class="bank-info-label">Bank Code:</div>
              <div class="bank-info-value">{{}}</div>
            </div>
            <div class="flex">
              <div class="bank-info-label">SWIFT CODE:</div>
              <div class="bank-info-value">
                {{ computedVendor.Swift_Code_IBAN }}
              </div>
            </div>
            <div class="flex">
              <div class="bank-info-label">Add:</div>
              <div class="bank-info-value">{{}}</div>
            </div>
          </div>
          <br />
          <div class="flex between start">
            <div class="">
              <div class="">BUYERS' SIGNATURE</div>
              <div class="sign-wrap">
                <img
                  v-if="computedCompany.signPath"
                  :src="computedCompany.signPath"
                  alt=""
                />
              </div>
            </div>
            <div class="">
              <div class="">SELLER'S SIGNATURE</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default defineComponent({
  name: 'PurchaseOrderEdit',
})
</script>
<script lang="ts" setup>
import { computed, defineComponent, ref, unref } from 'vue'
import { useRoute } from 'vue-router'
import {
  ElButton,
  ElSelectV2,
  ElSelect,
  ElOption,
  ElIcon,
  ElInput,
  ElForm,
  ElFormItem,
  ElDatePicker,
  ElMessage,
  ElNotification,
} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ShoppingCart, FolderAdd, Switch } from '@element-plus/icons-vue'
import axios from 'axios'
import dayjs from 'dayjs'
import jspdf from 'jspdf'
import html2canvas from 'html2canvas'
import utils from '@/utils/index'
import variables from '@/assets/css/var.module.scss'
import {
  ServiceTypeKeyEnum,
  TypeService,
  ISelectItem,
  IProductItem,
  IUser,
  ICompanyItem,
  IVendorItem,
  IForm,
} from '@/interface'

computed(() => {
  return variables
})
const formVisible = ref(true)
const loading = ref(false)
// 订单ID. 例如5757019000000428205, 不是串号.
const POID = ref('')
// po 串号. 例如 PO2025
const PONumber = ref('')
// po 长串号. 例如 ZCPO2025
const longPONumber = ref('')
const mainForm = ref<FormInstance>()
const checkForm = function (formEl: FormInstance | undefined) {
  if (!formEl) return

  formEl.validate((valid, fields) => {
    if (valid) {
      submit()
    } else {
      console.log('check form has not pass!', fields)
      ElMessage.error('请检查表单必填项')
    }
  })
}

const submit = () => {
  loading.value = true
  createPurchaseOrders()
    .then((res) => {
      console.log(res)
      getPurchaseOrdersData()
        .then(() => {
          generatePDF()
            .then(() => {
              ElNotification({
                type: 'success',
                title: '任务已成功处理',
                message: '本页面将在数秒后自动关闭',
              })
              setTimeout(() => {
                window.close()
              }, 5000)
            })
            .finally(() => {
              loading.value = false
            })
        })
        .catch(() => {
          // loading.value = false
          const msg = '获取PO详情失败, 未能正确生成PDF'
          console.log(msg)
          ElNotification({ duration: 0, title: msg, type: 'error' })
        })
    })
    .catch(() => {
      // loading.value = false
      const msg = '创建PO失败'
      console.log(msg)

      ElNotification({ duration: 0, title: msg, type: 'error' })
    })
}

const pdfElement = ref()
const pdfElement2 = ref()
const generatePDF = (ele = pdfElement, isFirstTime = true) => {
  const A4_WIDTH = 592.28
  const A4_HEIGHT = 841.89
  let imageWrapper = unref(ele) // 获取DOM

  // let pageHeight = (imageWrapper.scrollWidth / A4_WIDTH) * A4_HEIGHT
  let pageHeight = (imageWrapper.clientWidth / A4_WIDTH) * A4_HEIGHT
  let lableListID = imageWrapper.querySelectorAll('div')
  // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
  for (let i = 0; i < lableListID.length; i++) {
    let multiple = Math.ceil(
      (lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight,
    )
    if (isSplit(lableListID, i, multiple * pageHeight)) {
      let divParent = lableListID[i].parentNode // 获取该div的父节点
      let newNode = document.createElement('div')
      newNode.className = 'empty-div'
      newNode.style.background = '#fff'
      let _H =
        multiple * pageHeight -
        (lableListID[i].offsetTop + lableListID[i].offsetHeight)
      //留白
      newNode.style.height = _H + 30 + 'px'
      newNode.style.width = '100%'
      let next = lableListID[i].nextSibling // 获取div的下一个兄弟节点
      // 判断兄弟节点是否存在
      if (next) {
        // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
        divParent.insertBefore(newNode, next)
      } else {
        // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
        divParent.appendChild(newNode)
      }
    }
  }

  return new Promise((resolve, reject) => {
    html2canvas(imageWrapper, {
      allowTaint: true,
      useCORS: true,
      backgroundColor: '#fff', //一定要设背景颜色，否则有的浏览器就会变花~，比如Edge
      scale: 3, // 缩放倍率调整清晰度
    }).then((canvas) => {
      let pdf = new jspdf('p', 'mm', 'a4') //A4纸，纵向
      let ctx = canvas.getContext('2d'),
        a4ContentWidth = 190,
        a4ContentHeight = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        imgHeight = Math.floor(
          (a4ContentHeight / a4ContentWidth) * canvas.width,
        ), //按A4显示比例换算一页图像的像素高度
        renderedHeight = 0

      while (renderedHeight < canvas.height) {
        let page = document.createElement('canvas')
        page.width = canvas.width
        page.height = Math.min(imgHeight, canvas.height - renderedHeight) //可能内容不足一页
        //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        // @ts-ignore: Object is possibly 'null'.
        page
          .getContext('2d')
          .putImageData(
            ctx!.getImageData(
              0,
              renderedHeight,
              canvas.width,
              Math.min(imgHeight, canvas.height - renderedHeight),
            ),
            0,
            0,
          )
        // document.body.appendChild(page)
        pdf.addImage(
          page.toDataURL('image/jpeg', 0.2),
          'JPEG',
          10,
          10,
          a4ContentWidth,
          Math.min(
            a4ContentHeight,
            a4ContentWidth * (page.height / page.width),
          ),
        ) //添加图像到页面，保留10mm边距
        renderedHeight += imgHeight
        if (renderedHeight < canvas.height) pdf.addPage() //如果后面还有内容，添加一个空页
      }
      const fileName = isFirstTime ? 'attachment_file' : 'attachment_file_2'

      sendPDF(pdf.output('datauristring'), fileName)
        .then(() => {
          // 有两个退税版模版, 需要生成两个PDF.
          if (computedCompany.value.taxReimbursement === true && isFirstTime) {
            ElNotification({
              duration: 0,
              title: '正在生成附件2 PDF',
              type: 'info',
            })
            generatePDF(pdfElement2, false).then(() => {
              resolve(true)
            })
          } else {
            resolve(true)
          }
        })
        .catch((e) => {
          reject(e)
        })
      // 本地备份一下
      pdf.save(
        `backup_${fileName}` + `_${dayjs().format('YYYYMMDD_HHmm')}` + '.pdf',
      )
    })
  })
}
const isSplit = function (nodes: any, index: number, pageHeight: number) {
  // 计算当前这块dom是否跨越了a4大小，以此分割
  if (
    nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight &&
    nodes[index + 1] &&
    nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
  ) {
    return true
  }
  return false
}
const sendPDF = function (file: string, filename = `attachment_file`) {
  const temp = file.split(',')
  // @ts-ignore: Object is possibly 'null'.
  const mimeType = temp[0].match(/:(.*?);/)[1]
  let extName = mimeType.split('/')[1]
  let bstr = window.atob(temp[1])
  let n = bstr.length
  let result = new Uint8Array(n)

  while (n--) {
    result[n] = bstr.charCodeAt(n)
  }

  const data = {
    id: POID.value,
    file: new File([result], `${filename}.${extName}`, { type: mimeType }),
  }

  return new Promise((resolve, reject) => {
    axios
      .post('/api/Purchase_orders/uploadAttachmentFile', data, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then((response) => {
        if (response.data.code !== 1) {
          const msg = '自动创建附件失败'

          ElNotification({ duration: 0, title: msg, type: 'error' })
          reject(msg)
          return
        }
        ElNotification({
          duration: 0,
          title: '自动创建 PDF 成功',
          type: 'success',
        })

        resolve(true)
      })
      .catch((e) => {
        reject(e)
      })
  })
}

const createPurchaseOrders = function () {
  const data = JSON.parse(JSON.stringify(unref(form)))

  data.Status = 'Created'
  data.Sub_Total = subTotal.value
  data.Total_Taxes = 0
  data.Total_Discount = totalDiscount.value
  data.Adjustment = adjustment.value
  data.Grand_Total = grandTotal.value
  data.Subject = '这里不用填'
  data.Created_By = {
    id: userInfo.value.users_id || route.query.user,
    name: userInfo.value.full_name || '',
  }
  data.Vendor_Name = {
    id: computedVendor.value.value,
    name: computedVendor.value.label,
  }

  // console.log(data.Related_Sales_Order, 'ddd')
  data.Related_Sales_Order = {
    id: form.value.saleOrderId,
    name: form.value.Title,
  }

  data.Product_Details = data.productList.map((item: any) => {
    return {
      quantity: item.quantity,
      Discount: item.discount || 0,
      list_price: item.rate,
      Tax: 0,
      total: item.amount,
      total_after_discount: Number(item.amount) - Number(item.discount),
      net_total: Number(item.amount) - Number(item.discount),
      description: item.desc,
      requirement: item.requirement,
      // line_tax: [],
      // book: '',
      // id: item.id,
      product: {
        // name: item.name,
        id: item.id,
        // Product_Code: item.Product_Code,
      },
      // 这两个是crm有的, 但是文档没有
      List_Price_Non_Currency: item.rate,
      Price_Book_Name: '',
    }
  })
  if (data.productList) delete data.productList
  console.log(data, 'create po params')
  return new Promise((resolve, reject) => {
    axios
      .post('/api/Purchase_orders/createPurchaseOrders', data, {})
      .then((response) => {
        if (response.data.code !== 1) return
        const res = response.data.result
        console.log(res, 'create po')
        if (res.data && res.data.length && res.data[0].code === 'SUCCESS') {
          POID.value = res.data[0].details?.id || ''
          resolve(res.data[0].details?.id)

          ElNotification({
            duration: 0,
            title: '创建 Purchase Order 成功',
            type: 'success',
          })
        } else {
          ElNotification({
            duration: 0,
            title: '未能成功创建PO, 请稍后重试或者联系管理员',
            type: 'error',
          })
        }
        reject('未能成功创建PO')
      })
      .catch((e) => {
        reject(e)
      })
  })
}
const getPurchaseOrdersData = function () {
  return new Promise((resolve, reject) => {
    axios
      .post('/api/purchase_orders/getPurchaseOrdersData', {
        id: POID.value,
      })
      .then((response) => {
        if (response.data.code !== 1) {
          reject(false)
          return
        }
        const res = response.data.result[0]

        longPONumber.value = res.PO_Number || ''
        PONumber.value = res.Purchase_Order_Number || ''
        resolve(true)
      })
      .catch((e) => {
        reject(e)
      })
  })
}
// getPurchaseOrdersData()

const currencyList = ref([
  {
    label: 'AUD',
    symbol: '',
    country: '',
  },
  {
    label: 'NZD',
    symbol: '',
    country: '',
  },
  {
    label: 'CNY',
    symbol: '¥',
    country: 'CN',
  },
  {
    label: 'GBP',
    symbol: '',
    country: '',
  },
  {
    label: 'EUR',
    symbol: '',
    country: '',
  },
  {
    label: 'USD',
    symbol: '',
    country: '',
  },
])
const currentCurrency = computed(() => {
  const temp = currencyList.value.filter((i) => i.label === form.value.Currency)
  // 2是人民币
  return temp.length ? temp[0] : temp[2]
})

let orderTypeList = ref([
  {
    label: '-None-',
  },
  {
    label: '打样',
  },
  {
    label: '大货',
  },
])
const form = ref<IForm>({
  Order_Type: '-None-',
  Artwork_Link: '',
  Currency: 'CNY',
  // 订单号
  saleOrderId: '',
  // 日期
  PO_Date: '',
  // 付款方式
  Payment_Terms: '-None-',
  // 参考, so的job name
  Title: '',
  // 收货地址
  field9: '广州市越秀区八旗二马路广东航运大厦1904室 邮编510110',
  // 收件人
  field7: '',
  // 联系电话
  field8: '18925020659',
  // 工厂交货日期
  field6: '',
  productList: [
    {
      name: '',
      id: '',
      quantity: '',
      rate: '',
      requirement: '',
      desc: '',
      amount: 0,
      discount: '',
      candidate: [],
    },
  ] as IProductItem[],
  // 印刷质量
  field12: '',
  // 产品质量
  field13: '',
  // 质量承诺
  field10: '',
  // 箱子箱唛
  field11: '',
  // 税率
  field4: '0',
  // 运费条款
  field5: '供应商承担',
  currentVendor: '',
})

const formRule = ref<FormRules>({
  Artwork_Link: [
    {
      required: true,
      message: '必填项',
      trigger: 'blur',
    },
  ],
  PO_Date: [
    {
      required: true,
      message: '必填项',
      trigger: 'blur',
    },
  ],
  saleOrderId: [
    {
      required: true,
      message: '必填项',
      trigger: 'blur',
    },
  ],
  field7: [
    {
      required: true,
      message: '必填项',
      trigger: 'blur',
    },
  ],
  field8: [
    {
      required: true,
      message: '必填项',
      trigger: 'blur',
    },
  ],
  field6: [
    {
      required: true,
      message: '必填项',
      trigger: 'blur',
    },
  ],
  currentVendor: [
    {
      required: true,
      message: '必填项',
      trigger: 'change',
    },
  ],
})

const emptyProductItem = {
  label: '',
  value: '',
  candidate: [],
  name: '',
  desc: '',
  id: '',
  quantity: '',
  rate: '',
  requirement: '',
  // 未计算优惠(discount)之前的总额
  amount: 0,
  // 优惠额度
  discount: '',
}
const addRow = function () {
  form.value.productList.push(JSON.parse(JSON.stringify(emptyProductItem)))
}
const keyNeedCompute = ['quantity', 'rate']
const onInputChange = function (e: any, obj: IProductItem, key: string) {
  console.log(e, 'input value before enfore change')
  if (typeof e === 'string') {
    if (e.length) {
      // 强制转换为数字类型
      // obj[key] = Math.round(utils.multiply(Number(e))) / 100
      obj[key] = Math.round(utils.multiply(Number(e), 1000)) / 1000
      // 计算每行的总额
      if (keyNeedCompute.includes(key)) {
        obj.amount = utils.multiply(Number(obj.quantity), Number(obj.rate))
      }
    } else {
      // obj[key] = minValue
    }
  }
}
const onProductSelect = function (e: any, product: IProductItem) {
  if (e) {
    const temp = product.candidate.filter((i) => i.value === e)
    if (temp.length) {
      product.name = temp[0].label
      product.Product_Code = temp[0].Product_Code
    }
  } else {
    product.name = ''
  }
}

// 小计
const subTotal = computed(() => {
  return form.value.productList.reduce((total, current) => {
    total = total + Number(current.amount)
    return total
  }, 0)
})
// 总优惠额度
const totalDiscount = computed(() => {
  return form.value.productList.reduce((total, current) => {
    total = total + Number(current.discount)
    return total
  }, 0)
})
// 价格统计修正值
const adjustment = ref(0)
const formatAdjustment = function (string: string) {
  adjustment.value = Number(string)
}
// 总计
const grandTotal = computed(() => {
  return subTotal.value - totalDiscount.value + adjustment.value
})
const productLoading = ref(false)
const getProductList = utils.debounce(
  (keyword: string, target: IProductItem) => {
    productLoading.value = true
    const data = {
      value: keyword.trim(),
      name: 'Products',
      api_name: 'Product_name',
      contains: 'contains',
      page: 1,
      limit: 200,
    }
    getSearchData(data)
      .then((response) => {
        if (response.data.code !== 1) return
        const res = response.data.result
        target.candidate = res.data.map((item: any) => {
          return {
            ...item,
            label: item.Product_Name,
            value: item.products_id || item.id,
          }
        })
      })
      .finally(() => {
        productLoading.value = false
      })
  },
  1000,
)

const vendorList = ref<IVendorItem[]>([])
const computedVendor = computed(() => {
  const temp = vendorList.value.filter(
    (i) => i.value === form.value.currentVendor,
  )
  return temp.length
    ? temp[0]
    : {
        Primary_Contact_name: '',
        PDF_display: '',
        label: '',
        value: '',
      }
})
const vendorLoading = ref(false)
const getSupplierLists = utils.debounce(function (string: string) {
  const data = {
    value: string.trim(),
    name: 'Vendors',
    api_name: 'Vendor_name',
    contains: 'contains',
    page: 1,
    limit: 200,
  }
  vendorLoading.value = true
  getSearchData(data)
    .then((response) => {
      if (response.data.code !== 1) return
      const res = response.data.result
      vendorList.value = res.data.map((i: any) => {
        return {
          ...i,
          label: i.Suppliers_Name || i.Vendor_Name,
          value: i.supplier_id || i.id,
          Primary_Contact_name: i.Primary_Contact_name || '',
          PDF_display: i.PDF_display || '',
        }
      })
    })
    .finally(() => {
      vendorLoading.value = false
    })
}, 1000)
getSupplierLists('')

const getSearchData = async function (p: any) {
  return await axios
    .post('/api/common/getPublicLists', p, {
      headers: { 'Content-Type': 'multipart/form-data' },
    })
    .then((response) => {
      return response
    })
}

const getPath = function (path: string) {
  return new URL(path, import.meta.url).href
}
// 用于切换合同模版
const companyList = ref<ICompanyItem[]>([
  {
    id: 'PC',
    label: 'PC',
    name: '澳之原贸易有限公司',
    addr: 'UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG WAN,HK',
    phone: '020-81609790',
    signPath: getPath('/assets/sign/AZY.png'),
  },
  {
    id: 'Pangea',
    label: 'Pangea',
    name: '庞吉亚国际商务服务（广州）有限公司',
    addr: '广州市越秀区八旗二马路48号内自编1号主楼自编1605、1606房',
    phone: '020-81609790',
    fax: '020-81519492',
    signPath: getPath('/assets/sign/Pangea.png'),
  },
  {
    id: 'PangeaTaxReimbursement',
    label: 'Pangea_退税版',
    name: '庞吉亚国际商务服务（广州）有限公司',
    addr: '广州市越秀区八旗二马路48号内自编1号主楼自编1605、1606房',
    phone: '020-81609790',
    fax: '020-81519492',
    // 名字叫退税版, 实际上合同没有第二份pdf. 判断是否退税版的依据是键名存在与否, 而不是这个值的真假
    taxReimbursement: false,
    signPath: getPath('/assets/sign/Pangea.png'),
  },
  {
    id: 'AZYTaxReimbursement',
    label: 'AZY_退税版',
    name: '澳之原贸易有限公司',
    addr: 'UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG WAN,HK',
    phone: '020-81609790',
    taxReimbursement: true,
    signPath: getPath('/assets/sign/AZY.png'),
  },
  {
    id: 'FOTTaxReimbursement',
    label: 'FOT_退税版',
    name: 'FAIR OCEAN TRADING AUSTRALIA PTY.LTD',
    addr: '15/10 Chilvers Road, Thornleigh, NSW 2120',
    phone: '020-81609790',
    taxReimbursement: true,
    signPath: getPath('/assets/sign/FOT.png'),
  },
])
// 切换模版后的处理
const onCompanyTemplateChange = function () {
  // 重置这两个字段
  form.value.field5 = '供应商承担'
  form.value.field4 = ''

  if (typeof computedCompany.value.taxReimbursement === 'undefined') {
    form.value.field7 = soOwner.value
    form.value.field8 = '18925020659'
    form.value.field9 = '广州市越秀区八旗二马路广东航运大厦1904室 邮编510110'
  } else {
    // 退税版没有这三个表单项, 直接重置值. 相应的, 非退税版要重新赋值.
    form.value.field7 = ''
    form.value.field8 = ''
    form.value.field9 = ''
  }
}

// 合同的服务条款
const serviceRule = ref<TypeService>({
  PC: [
    '一、本采购订单签署原件一式两份，双方各持一份。',
    '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
    '三、交货期限:交货期限必须严格执行。',
    '四、交货地点:甲方广州公司地址,如上收货地址。',
    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
  ],
  Pangea: [
    '一、本采购订单签署原件一式两份，双方各持一份。',
    '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
    '三、交货期限:交货期限必须严格执行。',
    '四、交货地点:甲方广州公司地址,如上收货地址。',
    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
  ],
  PangeaTaxReimbursement: [
    '三、本采购订单签署原件一式两份，双方各持一份。',
    '四、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
    '五、交货期限:交货期限必须严格执行。',
    '六、交货地点: 广州市越秀区八旗二马路48号航运大厦1605、1606房',
    '七、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
    '八、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
    '九、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
    '十、我司开票资料:',
    '账户名称:庞吉亚国际商务服务(广州)有限公司',
    '统一社会代码:91440101MA9XUQNB4B',
    '公司地址:广州市越秀区八旗二马路48号内自编1号主楼16楼自编1605、1606房 ',
    '公司电话:81609790',
    '基本账户:中国光大银行股份有限公司广州分行越秀支行',
    '账户号码:77910180803936888',
    '开户银行地址:广州市越秀区文德南路69号',
  ],
  AZYTaxReimbursement: [
    '一、本采购订单签署原件一式两份，双方各持一份。',
    '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
    '三、交货期限:交货期限必须严格执行。',
    '四、收货地址:澳竣元代收，广州市越秀区八旗二马路48号航运大厦1902房。',
    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
  ],
  FOTTaxReimbursement: [
    '一、本采购订单签署原件一式两份，双方各持一份。',
    '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
    '三、交货期限:交货期限必须严格执行。',
    '四、收货地址:澳竣元代收，广州市越秀区八旗二马路48号航运大厦1902房。',
    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
  ],
})
const currentServiceRule = computed(() => {
  return serviceRule.value[currentCompany.value as ServiceTypeKeyEnum]
})

const currentCompany = ref('PC')
const computedCompany = computed(() => {
  const result = companyList.value.filter((i) => i.id === currentCompany.value)
  return result.length ? result[0] : companyList.value[0]
})
// 格式化输出价格的小数位数. 退税版需要显示三位小数, 其他只需要两位小数
const computedDeci = computed(() => {
  return typeof computedCompany.value.taxReimbursement !== 'undefined' ? 3 : 2
})

// 候选 收货地址
let addressList = ref<ISelectItem[]>([])

// 候选 运费条款. 目前只有庞吉亚退税版用到, 其他模版默认供应商承担
let field5_lists = ref<ISelectItem[]>([])

let supplierPaymentTermsLists = ref<ISelectItem[]>([])

// 获取下拉框非动态候选数据
axios
  .post('/api/common/getfieldsData')
  .then((response: any) => {
    // console.log(response, '/common/getfieldsData')
    const res = response.data.result

    orderTypeList.value = res.Order_Type_lists.map((i: any) => {
      return {
        label: i,
      }
    })
    addressList.value = res.field9_lists.map((i: any) => {
      return {
        label: i,
      }
    })
    field5_lists.value = res.field5_lists
      .filter((i: string) => !/^-?[Nn]one-?$/.test(i))
      .map((i: any) => {
        return {
          label: i,
        }
      })
    supplierPaymentTermsLists.value = res.Supplier_Payment_Terms_lists.map(
      (i: any) => {
        return {
          label: i,
        }
      },
    )
  })
  .catch((e) => {
    console.log(e, '下拉框')
    ElMessage.error('获取下拉框数据出错, 请联系管理员.')
  })

const route = useRoute()
const productBlackList = ['4791186000046982872', '4791186000046982896']
const soOwner = ref('')
// 获取销售订单详情
axios
  .post('/api/common/getSalesOrdersData', { id: route.params.id })
  .then((response) => {
    if (response.data.code !== 1) return
    const res = response.data.result
    form.value.field7 = res.Owner_name || res.Owner.name || ''
    soOwner.value = res.Owner_name || res.Owner.name || ''
    form.value.Title = res.Sales_Order_Title_Job_Name || ''
    form.value.saleOrderId = res.sales_orders_id || res.id || ''
    form.value.PO_Date = dayjs(new Date()).format('YYYY-MM-DD')
    let temp = []
    if (res.details) {
      temp = res.details.filter(
        (item: any) => !productBlackList.includes(item.product_id),
      )
    } else if (res.Product_Details) {
      temp = res.Product_Details.filter(
        (item: any) => !productBlackList.includes(item.product.id),
      )
    }

    if (!temp.length) return
    form.value.productList = []
    temp.forEach((item: any) => {
      form.value.productList.push(
        Object.assign({}, emptyProductItem, {
          candidate: [
            {
              Product_Code: item.product_Product_Code,
              label: item.product.name,
              value: item.product.id,
            },
          ],
          Product_Code: item.product.Product_Code,
          id: item.product.id,
          name: item.product.name,
          label: item.product.name,
          value: item.product.id,
          desc: item.product_description || '',
          quantity: Number(item.quantity),
        }),
      )
    })
  })

// 根据url传递过来的用户ID获取的用户身份信息
const userInfo = ref({} as IUser)
axios
  .post('/api/common/getUsersData', { id: route.query.user })
  .then((response) => {
    const res = response.data
    if (res.code !== 1) return
    userInfo.value = res.result || {}
  })
</script>

<style lang="scss" scoped>
.view-window {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 999;
  background-color: rgba(#fff, 0.3);
  left: 0;
  top: 0;
}
.screen {
  margin: 0 auto;
  font-size: 12pt;
  line-height: 22pt;
}
.page-title-wrap {
  padding: 12px 36px;
  border-bottom: 1px solid #eee;
  margin-bottom: 24px;
}
.page-title {
  font-size: 36px;
  margin-left: 8px;
}
.layout-left {
  width: 435px;
  min-width: 435px;
  padding-right: 24px;
}
.layout-right {
  position: relative;
  border-left: 1px solid #eee;
  padding: 0 24px;
}

.rule-item {
  .el-form-item {
    margin-bottom: 0;
  }
}

.sign-wrap {
  width: 100pt;
  &.pangea {
    width: 180pt;
  }
  img {
    width: 100%;
  }
}
.screen {
  max-width: 1600px;
  margin: 0 auto;

  .company-info {
    text-align: center;
    font-size: 10pt;
    color: $subColor;
    margin-bottom: 16pt;
  }
  .company-name {
    margin-bottom: 4pt;
    color: $mainColor;
    font-size: 16pt;
    line-height: 22pt;
  }
  .company-addr {
    line-height: 12pt;
    height: 12pt;
  }
  .company-phone {
    line-height: 12pt;
    height: 12pt;
  }
  .company-fax {
    line-height: 12pt;
    height: 12pt;
  }
  .form-area {
    position: relative;
  }
  .form-area-left {
    width: 30%;
  }
  .form-area-right {
    width: 45%;
    position: relative;
    text-align: right;

    vertical-align: top;
    .label {
      display: inline-block;
      width: 40%;
      vertical-align: top;
    }
    .value {
      width: 60%;
      word-break: break-word;
      display: inline-block;
    }
  }

  .product-table-separator {
    width: 95%;
  }
  .product-total-table {
    display: inline-block;
    border: 1px solid #eee;
    min-width: 220pt;
    border-radius: 8pt;
    position: relative;
    right: 0;
    top: 0;
    .total-item {
      & > div {
        display: inline-block;
        height: 26pt;
        line-height: 26pt;
        padding: 0 8pt;
      }
      &:nth-of-type(n + 1) {
        border-top: 1px solid #eee;
      }
    }
    .label {
      width: 50%;
      text-align: right;
    }
    .value {
      width: 50%;
      text-align: left;
    }
  }
  .product-table {
    table {
      border: 1pt solid #eee;
      width: 100%;
    }
    tr:nth-of-type(n + 3) td {
      border-top: 1pt solid #eee;
    }
    th {
      text-align: center;
      background-color: $tableHeaderBgColor;
    }
    td {
      padding: 8pt 8pt 4pt;
      min-width: 30pt;
      max-width: 100pt;
    }
    th + th,
    td + td {
      border-left: 1pt solid #eee;
    }
    .action {
      text-align: center;
      width: 50pt;
    }
    .quantity,
    .rate,
    .amount,
    .discount {
      width: 80pt;
    }
    .requirement {
      width: 180pt;
    }
    .product {
      width: 180pt;
    }
  }
  .note-form-area {
    width: 40%;
  }
  .rule-item {
    color: $subColor;
    line-height: 26pt;
  }
  .sub-form-title {
    padding-left: 4pt;
    border-left: 2pt solid #efefef;
    margin-bottom: 8pt;
  }
}
.preview-area {
  font-size: 10pt;
  line-height: 22pt;
  color: $mainColor;
  box-sizing: border-box;
  * {
    padding: 0;
    margin: 0;
  }

  .company-info {
    text-align: center;
    font-size: 9pt;
    color: $subColor;
    margin-bottom: 16pt;
  }
  .company-name {
    margin-bottom: 4pt;
    color: $mainColor;
    font-size: 16pt;
    line-height: 22pt;
  }
  .company-addr {
    line-height: 12pt;
    height: 12pt;
  }
  .company-phone {
    line-height: 12pt;
    height: 12pt;
  }
  .company-fax {
    line-height: 12pt;
    height: 12pt;
  }

  $titleWidth: 100%;
  .pdf-title {
    text-align: center;
    font-size: 28pt;
    line-height: 36pt;
    height: 36pt;
    width: $titleWidth;
    margin: 0 auto;
    background-color: #fff;
  }

  .pdf-title-bg {
    width: 100%;
    height: 2pt;

    .center {
      width: 33%;
      text-align: center;
    }
    .right,
    .left {
      width: 33%;
      height: 3pt;
      line-height: 3pt;
      & > div {
        width: 100%;
        height: 2pt;
        line-height: 2pt;
        background-color: $bgColor;
      }
    }
  }

  .form-area {
    padding-top: 24pt;
    line-height: 14pt;
    $formAreaFontSize: 10pt;
    white-space: pre-wrap;
    font-size: $formAreaFontSize;
    & > .flex-auto {
      width: 50%;
      & > div {
        padding-bottom: 8pt;
      }
    }
    .column-vendor {
      vertical-align: top;
    }
    .column-form-label {
      width: 40%;
    }
    .column-form-value {
      width: 60%;
    }
  }
  .product-table-separator {
    width: 100%;
    margin: 15pt auto 10pt;
    height: 2pt;
    background-color: $bgColor;
  }
  .product-table {
    table {
      margin: 0 auto 6pt;
      width: 100%;
      border-radius: 6pt;
      text-align: left;
    }
    tr:nth-of-type(n + 1) td {
      border-top: 1pt solid #eee;
    }
    th {
      background-color: $bgColor;
      min-width: 20pt;
      padding: 0 2pt;
    }
    td {
      min-width: 20pt;
      max-width: 100pt;
      padding: 0 2pt;
      .desc {
        white-space: pre-wrap;
        line-height: 16pt;
        color: $subColor;
      }
    }
    .row-index {
      width: 20pt;
    }
  }

  .note-form-area {
    width: 40%;

    .label {
      color: $subColor;
      display: inline-block;
      width: 40%;
      vertical-align: top;
    }
    .value {
      color: $subColor;
      width: 60%;
      word-break: break-word;
      white-space: pre-wrap;
      display: inline-block;
      line-height: 16pt;
    }
  }
  .sub-form-title {
    color: $subColor;
    font-weight: bold;
  }
  .rule-item {
    color: $subColor;
    line-height: 26pt;
  }
  .signature-area {
    color: $subColor;
    .first-party {
      padding: 30pt 0 0;
    }
    .second-party {
      padding: 20pt 0 40pt;
    }
  }
}

.preview-area2 {
  .supplier-name {
    font-size: 22pt;
    text-align: center;
  }
  .billing-addr {
    line-height: 18pt;
    min-height: 18pt;
    font-size: 12pt;
    text-align: center;
  }
  .contact-info {
    margin-bottom: 12pt;
    min-height: 18pt;
    line-height: 18pt;
    font-size: 12pt;
  }
  .product-table {
    table {
      border: 1px solid $bgColor;
      border-radius: 3pt;
      margin: 0 auto 6pt;
      width: 100%;
      font-size: 10pt;
    }
    th {
      text-align: left;
    }
    td {
      white-space: pre-wrap;
    }
    th,
    td {
      padding: 4pt 6pt;
      &:nth-of-type(n + 2) {
        border-left: 1px solid $bgColor;
      }
    }
    tr:nth-of-type(n + 2) {
      td {
        border-top: 1px solid $bgColor;
      }
    }
  }
  .table-title {
    text-align: center;
    font-weight: bold;
    font-size: 16pt;
    margin: 12pt auto 8pt;
  }
  .base-info-area {
    margin-top: 12pt;
    font-size: 11pt;

    .base-info-label {
      min-width: 90pt;
      width: 90pt;
      font-family: serif;
    }
    .base-info-value {
      white-space: pre-wrap;
      vertical-align: top;
      flex: auto;
      text-align: left;
      font-family: sans-serif;
      font-weight: 400;
    }
    .left {
      padding-right: 8pt;
      .base-info-label {
        min-width: 60pt;
        width: 60pt;
      }
    }
    .right {
      padding-left: 8pt;
    }
    .left,
    .right {
      width: 50%;
      margin-bottom: 12pt;
    }
  }
  .bank-info-area {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 11pt;
    margin-bottom: 10pt;
    .bank-info-label {
      font-weight: bold;
      font-family: serif;
      width: 160pt;
      max-width: 160pt;
    }
    .bank-info-value {
      font-family: serif;
      font-weight: normal;
    }
  }
}

@media print {
  .screen {
    display: none;
  }
  .preview-area,
  .preview-area2 {
    border: none;
    border-color: transparent;
  }
}
@media screen {
  .print.hidden {
    position: fixed;
    right: -10000px;
    bottom: -10000px;
  }
  .pdf-wrap {
    position: relative;
    width: 21cm;
    min-height: 29.69cm;
    margin: 20px auto;
    box-shadow: 1px 1px 2pt 0px $subColor;
  }
  .preview-area,
  .preview-area2 {
    padding: 1cm;
  }
}
</style>