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

<template>
  <div>
    <div
      v-if="loading"
      v-loading="true"
      class="view-window"
      element-loading-text="Loading..."
      element-loading-background="rgba(0, 0, 0, 0.3)"
    ></div>
    <div class="flex fixed-button-area">
      <!-- <el-button @click="() => generatePDF()">generatePDF</el-button> -->
      <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"
              label-width="130px"
            >
              <el-radio-group v-model="form.Order_Type">
                <el-radio
                  v-for="(item, index) in orderTypeList"
                  :key="index"
                  :label="item.label"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="Artwork Link"
              prop="Artwork_Link"
              label-width="130px"
            >
              <el-input
                v-model="form.Artwork_Link"
                placeholder="Please input"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="Currency"
              label-width="130px"
            >
              <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>
            <el-form-item
              v-if="recommandVendor.length"
              label="Suggest Supplier"
              label-width="130px"
            >
              <div class="flex column start">
                <div
                  v-for="(item, index) in recommandVendor"
                  :key="index"
                  class="btn-quick-vendor"
                  :class="{ active: item.id === form.currentVendor }"
                  @click="quickSelectSupplier(item)"
                >
                  {{ item.name || '' }}
                </div>
              </div>
            </el-form-item>
          </div>

          <div class="layout-right flex-auto">
            <div style="position: absolute; right: 24px; top: 0">
              <el-form-item label="Template:">
                <el-select
                  v-model="currentCompany"
                  style="width: 150px"
                  @change="onCompanyTemplateChange"
                >
                  <el-option
                    v-for="company in computedCompanyList"
                    :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.fax }}
                </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
                    v-model="form.currentVendor"
                    :remote-method="utils.debounce(getSupplierLists, 1000)"
                    remote
                    style="width: 100%"
                    :loading="vendorLoading"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="option in vendorList"
                      :key="option.value"
                      :value="option.value"
                      :label="option.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <div
                  v-if="typeof computedCompany.taxReimbursement === 'undefined'"
                  style="white-space: pre-wrap"
                >
                  {{ computedVendor.PDF_display }}
                </div>
                <div
                  v-else
                  style="white-space: pre-wrap"
                >
                  {{ computedVendor.PDF_display2 }}
                </div>
              </div>
              <div class="form-area-right">
                <el-form-item label="采购订单 #:">
                  Generate once PO submitted
                </el-form-item>
                <el-form-item label="订单号 # :">
                  <el-input
                    v-model="form.Reference"
                    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.Supplier_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>
                <el-form-item label="送货备注 :">
                  <el-input v-model="form.Delivery_Details"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="product-table-separator"></div>
            <div class="product-table">
              <table
                border="0"
                cellspacing="0"
              >
                <tr>
                  <th class="product">品名</th>
                  <th class="quantity">数量</th>
                  <th class="rate">价格</th>
                  <th class="requirement">中文品目|要求</th>
                  <th class="amount">金额</th>
                  <th class="discount">折扣</th>
                  <th class="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"
                        popper-class="product-select"
                        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-if="userInfo.Organization !== 'PrimePac'"
                      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="userInfo.Organization !== 'PrimePac' ? 4 : 5"
                      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">{{ toFixed(subTotal, 2) }}</div>
                </div>
                <div class="total-item">
                  <div class="label">Total Discount</div>
                  <div class="value">
                    {{ toFixed(totalDiscount, 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"
                    ></el-input>
                  </div>
                </div>
                <div class="total-item">
                  <div class="label">Grand Total</div>
                  <div class="value">
                    {{ toFixed(grandTotal, 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>
            <template
              v-if="['PrimePacCommon', 'PrimePacSoft'].includes(currentCompany)"
            >
              <div class="rule-item">
                一、本采购订单签署原件一式两份，双方各持一份。经双方代表签字或盖章即可生效，并具有同等法律效力。
              </div>
              <div class="rule-item flex nowrap">
                二、以上价格已含所有产品的制作费、包装费；由
                <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>
              <div class="rule-item">
                三、印刷及工艺要求：乙方需按照甲方图稿或指定样品进行生产，颜色对照潘通色卡或指定样品。
              </div>
              <div class="rule-item">
                四、付款形式：
                <span>{{ form.Supplier_Payment_Terms }}</span>
                。甲方在乙方完成大货时，先寄大货样品给乙方确认，确认后付清剩余尾款。甲方通过银行转帐的方式付款，乙方账户信息如上。
              </div>
              <div class="rule-item">
                五、出货标准：五层出口空白硬纸箱，箱内套防潮袋。如实际出货包装与合约要求不符，甲方有权拒收整批货物。
              </div>
              <div class="rule-item">
                六、订货时间：自合同成立，甲方支付定金并确认图稿后算起。
              </div>
              <div class="rule-item">
                七、交货期限：自确认图稿时间算起，乙方应于
                <span>{{ form.field6 }}</span>
                前生产好产品，甲方确认并支付剩余款项后，乙方在约定时间内安排发出剩余产品到甲方收货地址。
              </div>
            </template>
            <div
              v-for="(item, index) in currentServiceRule"
              :key="index"
              class="rule-item"
              :class="[{ sub: typeof item === 'object' }]"
              v-html="typeof item === 'object' ? item.value : item"
            ></div>

            <div
              v-if="currentCompany === 'PrimePacCommon'"
              class="flex stretch PrimePac-table"
            >
              <div class="flex column stretch">
                <div class="column-item flex center">制作要求</div>
                <div class="flex-auto column-item flex center">
                  产品外观要求
                </div>
              </div>
              <div class="flex-auto flex column stretch">
                <div
                  v-for="(item, index) in PrimePacCommonRuleTableData"
                  :key="index"
                  class="flex stretch flex-auto"
                >
                  <div class="column-item flex center">
                    {{ item.project }}
                  </div>
                  <div class="column-item flex-auto flex center">
                    {{ item.method }}
                  </div>
                </div>
              </div>
            </div>

            <div
              v-if="currentCompany === 'PrimePacSoft'"
              class="flex column stretch PrimePac-table"
            >
              <div class="flex stretch">
                <div class="flex column stretch">
                  <div class="column-item flex-auto flex center">制作要求</div>
                </div>
                <div class="flex-auto flex column stretch">
                  <div
                    v-for="(item, index) in PrimePacSoftRuleTableData1"
                    :key="index"
                    class="flex stretch flex-auto"
                  >
                    <div class="column-item flex center">
                      {{ item.project }}
                    </div>
                    <div class="column-item flex-auto flex center">
                      {{ item.method }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="flex stretch">
                <div class="flex column stretch">
                  <div class="column-item flex-auto flex center">
                    产品技术要求
                  </div>
                </div>
                <div class="flex-auto flex column stretch">
                  <div
                    v-for="(item, index) in PrimePacSoftRuleTableData2"
                    :key="index"
                    class="flex stretch flex-auto"
                  >
                    <div class="column-item flex center">
                      {{ item.project }}
                    </div>
                    <div class="column-item flex-auto flex center">
                      {{ item.method }}
                    </div>
                  </div>
                </div>
              </div>
            </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.fax }}
              </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
                v-if="typeof computedCompany.taxReimbursement === 'undefined'"
                class="column-vendor"
              >
                {{ computedVendor.PDF_display }}
              </div>
              <div
                v-else
                class="column-vendor"
              >
                {{ computedVendor.PDF_display2 }}
              </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.Reference }}
                </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.Supplier_Payment_Terms !== '-None-'
                      ? form.Supplier_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 class="flex">
                <div class="column-form-label">送货备注 :</div>
                <div class="column-form-value">
                  {{ form.Delivery_Details }}
                </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 v-if="userInfo.Organization !== 'PrimePac'">
                  中文品目|要求
                </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 class="product-name">{{ product.name }}</div>
                  <div
                    v-if="userInfo.Organization !== 'PrimePac'"
                    class="desc"
                  >
                    {{ product.desc }}
                  </div>
                  <div
                    v-else
                    class="desc"
                  >
                    {{ product.requirement }}
                  </div>
                </td>
                <td v-if="userInfo.Organization !== 'PrimePac'">
                  {{ product.requirement }}
                </td>
                <td>
                  {{ product.quantity }}
                </td>
                <td>
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    toFixed(Number(product.rate), computedDeci)
                  }}
                </td>
                <td>
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    toFixed(Number(product.amount), 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;{{
                    toFixed(subTotal, computedDeci)
                  }}
                </div>
              </div>
              <div class="total-item flex">
                <div class="label">合计&nbsp;</div>
                <div class="value">
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    toFixed(grandTotal, 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>
          <template
            v-if="['PrimePacCommon', 'PrimePacSoft'].includes(currentCompany)"
          >
            <div class="rule-item">
              一、本采购订单签署原件一式两份，双方各持一份。经双方代表签字或盖章即可生效，并具有同等法律效力。
            </div>
            <div class="rule-item flex nowrap">
              二、以上价格已含所有产品的制作费、包装费；由
              <span>{{ form.field5 }}</span>
              运费送货到广州甲方指定的卸货地点，不含税，运费届时实报实销。
            </div>
            <div class="rule-item">
              三、印刷及工艺要求：乙方需按照甲方图稿或指定样品进行生产，颜色对照潘通色卡或指定样品。
            </div>
            <div class="rule-item">
              四、付款形式：
              <span>{{ form.Supplier_Payment_Terms }}</span>
              。甲方在乙方完成大货时，先寄大货样品给乙方确认，确认后付清剩余尾款。甲方通过银行转帐的方式付款，乙方账户信息如上。
            </div>
            <div class="rule-item">
              五、出货标准：五层出口空白硬纸箱，箱内套防潮袋。如实际出货包装与合约要求不符，甲方有权拒收整批货物。
            </div>
            <div class="rule-item">
              六、订货时间：自合同成立，甲方支付定金并确认图稿后算起。
            </div>
            <div class="rule-item">
              七、交货期限：自确认图稿时间算起，乙方应于
              <span>{{ form.field6 }}</span>
              前生产好产品，甲方确认并支付剩余款项后，乙方在约定时间内安排发出剩余产品到甲方收货地址。
            </div>
          </template>
          <div
            v-for="(item, index) in currentServiceRule"
            :key="index"
            class="rule-item"
            :class="[{ sub: typeof item === 'object' }]"
            v-html="typeof item === 'object' ? item.value : item"
          ></div>

          <div
            v-if="currentCompany === 'PrimePacCommon'"
            class="flex stretch PrimePac-table"
          >
            <div class="flex column stretch">
              <div class="column-item flex center">制作要求</div>
              <div class="flex-auto column-item flex center">产品外观要求</div>
            </div>
            <div class="flex-auto flex column stretch">
              <div
                v-for="(item, index) in PrimePacCommonRuleTableData"
                :key="index"
                class="flex stretch flex-auto"
              >
                <div class="column-item flex center">
                  {{ item.project }}
                </div>
                <div class="column-item flex-auto flex center">
                  {{ item.method }}
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="currentCompany === 'PrimePacSoft'"
            class="flex column stretch PrimePac-table"
          >
            <div class="flex stretch">
              <div class="flex column stretch">
                <div class="column-item flex-auto flex center">制作要求</div>
              </div>
              <div class="flex-auto flex column stretch">
                <div
                  v-for="(item, index) in PrimePacSoftRuleTableData1"
                  :key="index"
                  class="flex stretch flex-auto"
                >
                  <div class="column-item flex center">
                    {{ item.project }}
                  </div>
                  <div class="column-item flex-auto flex center">
                    {{ item.method }}
                  </div>
                </div>
              </div>
            </div>

            <div class="flex stretch">
              <div class="flex column stretch">
                <div class="column-item flex-auto flex center">
                  产品技术要求
                </div>
              </div>
              <div class="flex-auto flex column stretch">
                <div
                  v-for="(item, index) in PrimePacSoftRuleTableData2"
                  :key="index"
                  class="flex stretch flex-auto"
                >
                  <div class="column-item flex center">
                    {{ item.project }}
                  </div>
                  <div class="column-item flex-auto flex center">
                    {{ item.method }}
                  </div>
                </div>
              </div>
            </div>
          </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 && false"
        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.Supplier_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;{{
                    toFixed(Number(product.rate), computedDeci)
                  }}
                </td>
                <td>
                  {{ currentCurrency.country
                  }}{{ currentCurrency.symbol }}&nbsp;{{
                    toFixed(Number(product.amount), 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, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
  ElButton,
  ElSelectV2,
  ElSelect,
  ElOption,
  ElIcon,
  ElInput,
  ElForm,
  ElFormItem,
  ElDatePicker,
  ElMessage,
  ElNotification,
  ElRadioGroup,
  ElRadio,
  ElMessageBox,
} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ShoppingCart, FolderAdd, Switch } from '@element-plus/icons-vue'
import request from '@/utils/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,
  IRecommandVendor,
  IForm,
} from '@/interface'

computed(() => {
  return variables
})
const formVisible = ref(true)
const loading = ref(false)
// 订单ID. 例如 5757019000000683001, 不是串号.
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({
                duration: 0,
                type: 'success',
                title: '任务已成功处理',
                message: '本页面将自动跳转',
              })
              const url =
                import.meta.env.VITE_PO_PATH +
                POID.value +
                import.meta.env.VITE_PO_APPEND
              setTimeout(() => {
                window.location.replace(url)
              }, 1000)
            })
            .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('#pdfElement > 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 + 40 + '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.5),
          'JPEG',
          10,
          10,
          a4ContentWidth,
          Math.min(
            a4ContentHeight,
            a4ContentWidth * (page.height / page.width),
          ),
        ) //添加图像到页面，保留10mm边距
        renderedHeight += imgHeight
        if (renderedHeight < canvas.height) pdf.addPage() //如果后面还有内容，添加一个空页
      }

      const prefix =
        `${PONumber.value}-${computedVendor.value.label}` +
        (form.value.Title?.length ? `-${form.value.Title}` : '')
      const fileName = isFirstTime ? prefix : prefix + '_2'

      sendPDF(pdf.output('datauristring'), fileName)
        .then(() => {
          resolve(true)
        })
        .catch((e) => {
          reject(e)
        })
      // 本地备份一下
      pdf.save(fileName + '.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) => {
    request
      .post('/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 = Number(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.Owner = {
    id: userInfo.value.users_id || route.query.user,
    name: userInfo.value.full_name || '',
    email: userInfo.value.email || '',
  }
  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.Purchase_Items = 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,
      },
      Product_Name: {
        id: item.id,
      },
      // 这两个是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) => {
    request
      .post('/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) => {
    request
      .post('/purchase_orders/getPurchaseOrdersData', {
        id: POID.value,
      })
      .then((response) => {
        if (response.data.code !== 1) {
          reject(false)
          return
        }
        const res = Array.isArray(response.data.result)
          ? response.data.result[0]
          : response.data.result

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

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: '',
  Reference: '',
  // 日期
  PO_Date: '',
  // 付款方式
  Supplier_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: '',
  Delivery_Details: '',
})

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
    }
    getProductData(product.id).then((ctx) => {
      product.requirement = ctx || ''
    })
  } 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<number | string>('')

// 总计
const grandTotal = computed(() => {
  return subTotal.value - totalDiscount.value + Number(adjustment.value)
})
const productLoading = ref(false)
const getProductList = utils.debounce(
  (keyword: string, target: IProductItem) => {
    const key = keyword.trim()
    if (!key.length) return

    productLoading.value = true
    const data = {
      value: key,
      name: 'Products',
      api_name: 'Product_Name',
      contains: 'contains',
      page: 1,
      limit: 20,
    }
    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 toFixed = function (value: number, ratio = 2) {
  let r = 100
  if (ratio === 3) {
    r = 1000
  }
  return utils.toFixed(value, r)
}

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: '',
        PDF_display2: '',
        label: '',
        value: '',
        Payment_Terms: '',
      }
})

watch(computedVendor, () => {
  if (
    computedVendor.value.Payment_Terms &&
    computedVendor.value.Payment_Terms.length
  ) {
    form.value.Supplier_Payment_Terms = computedVendor.value.Payment_Terms
  }
})

const vendorLoading = ref(false)
const getSupplierLists = function (string: string) {
  return new Promise((resolve, reject) => {
    // 这个处理是为了兼容下拉框的实时防抖搜索 和 ((点击推荐供应商)快速勾选 的搜索)
    const keyword = string.trim() || form.value.currentVendor?.trim() || ''
    if (!keyword.length) {
      reject('false')
      return
    }
    const data = {
      value: keyword,
      name: 'Vendors',
      api_name: 'Vendor_Name',
      contains: 'contains',
      page: 1,
      limit: 100,
    }
    console.log('get supp run')
    vendorLoading.value = true
    getSearchData(data)
      .then((response) => {
        if (response.data.code !== 1) return false
        const res = response.data.result || { data: [] }
        vendorList.value = res.data
          .filter((i: any) => !i.Hide_Record)
          .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 || '',
              PDF_display2: i.PDF_display2 || '',
            }
          })
        vendorLoading.value = false
        loading.value = false
        resolve(true)
      })
      .catch((e) => reject(e))
  })
}

const quickSelectSupplier = function (item: IRecommandVendor) {
  form.value.currentVendor = item.id
  loading.value = true
  getSupplierLists(item.name)
}

const getSearchData = async function (p: any) {
  return await request
    .post('/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
}
// 用于切换合同模版. Promo Collection 用户组使用.
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'),
  },
])

// 用于切换合同模版. PrimePac 用户组的模版
const PrimePacList = ref<ICompanyItem[]>([
  {
    id: 'PrimePacCommon',
    label: 'PrimePac Purchase order 通用版',
    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: 'PrimePacSoft',
    label: 'PrimePac Purchase order 软包版',
    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'),
  },
])

const computedCompanyList = computed(() => {
  return userInfo.value.Organization === 'PrimePac'
    ? PrimePacList.value
    : companyList.value
})
// 切换模版后的处理
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房。',
    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
  ],
  PrimePacCommon: [
    '八、质量承诺：如甲方自收到货品之日起一个月内发现货品存在不符合合同约定的瑕疵，乙方应无条件包退包换，承担违约责任。承担违约需双方进行协商，达成解决方案。',
    '九、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
    '十、其他事项：',
    {
      value:
        '1. 乙方应确保最终实际生产数量在合约确定数量±5%以内，同时提供一定数量的备品用于更换运输途中可能出现的损坏品。',
    },
    {
      value:
        '2. 乙方若预计交货时间将出现延误，应立刻通知甲方，与甲方另行约定发货时间并得到甲方确认。如乙方无法确定时间或再度延期，并未告知甲方合理延期原因，甲方有权要求乙方承当相应的违约责任并赔偿甲方相应损失。',
    },
    '十一、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
    '附录：',
    '产品制作要求及质量检验标准：',
    {
      value:
        '1、乙方必须严格按甲方要求或产品销售国家/产品出口国最新的相关国家、行业标准对产品质量进行监控和检验。如在现场检验中发现乙方提供的产品不符合合同约定或与样板不符，乙方应在甲方要求的期限内补足、更换。补足、更换后的产品应符合合同要求。',
    },
    {
      value:
        '2、出货前甲方对合同项下产品按GB/T2828.1—2012抽样方法进行抽检，采用Ⅱ级检验水准，AQL值为：严重质量缺陷=1.0，重要质量缺陷=2.5，轻微质量缺陷=4.0 作为标准, 若检验不合格，甲方有权拒收整批货品。乙方应及时采取有效的措施补救，确保合同项下产品在合同交货期内按质、按量交货。如发生延误，则按本合同第七条的约定处理。',
    },
  ],
  PrimePacSoft: [], // 跟 PrimePacCommon 完全相同
})
const currentServiceRule = computed(() => {
  if (currentCompany.value === 'PrimePacSoft') {
    return serviceRule.value['PrimePacCommon']
  }
  return serviceRule.value[currentCompany.value as ServiceTypeKeyEnum]
})

const currentCompany = ref('PC')
const computedCompany = computed(() => {
  const result = computedCompanyList.value.filter(
    (i) => i.id === currentCompany.value,
  )
  return result.length ? result[0] : computedCompanyList.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[]>([])

loading.value = true
// 获取下拉框非动态候选数据
const p1 = request
  .post('/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('')
// 获取销售订单详情
const p2 = request
  .post('/common/getSalesOrdersData', { id: route.params.id })
  .then((response) => {
    return response
  })

// 获取对 该so对应客户的标注 并弹窗提醒
const getAccountsData = async (id: string) =>
  request.post('/common/getAccountsData', { id }).then((response) => {
    const res = response.data
    if (res.code !== 1) return
    if (res.result.User_Notes && res.result.User_Notes.length) {
      ElMessageBox.alert(res.result.User_Notes, '', {
        showClose: false,
      })
    }
  })
const getProductData = async (id: string) =>
  request.post('/common/getProductsData', { id }).then((response) => {
    const res = response.data
    if (res.code !== 1) return
    // console.log(res.result)
    if (userInfo.value.Organization === 'PrimePac') {
      return '产品名称：\n尺寸：\n材质：\n工艺：\n颜色：\n其他备注：'
    } else {
      return res.result?.CF3 || ''
    }
  })

const recommandVendor = ref<IRecommandVendor[]>([])
const getRecommamdSupplier = async (id: string) =>
  request.post('/common/getProductsOftenLists', { id }).then((response) => {
    const res = response.data
    if (res.code !== 1) return
    recommandVendor.value = recommandVendor.value.concat(
      Array.isArray(res.result) ? res.result : [],
    )
  })
// 根据url传递过来的用户ID获取的用户身份信息
const userInfo = ref({} as IUser)
const p3 = request
  .post('/common/getUsersData', { id: route.query.user })
  .then((response) => {
    const res = response.data
    if (res.code !== 1) return

    if (res.result.users && res.result.users.length) {
      userInfo.value = res.result.users[0]
    } else if (res.result.id) {
      userInfo.value = res.result || {}
    } else if (Array.isArray(res.result) && res.result.length) {
      userInfo.value = res.result[0] || {}
    } else {
      ElMessage.error('获取当前用户身份异常, 请联系管理员')
    }

    // 根据用户 ‘组织’ 切换模版默认选中项
    if (userInfo.value.Organization === 'PrimePac') {
      currentCompany.value = 'PrimePacCommon'
    } else {
      currentCompany.value = 'PC'
    }
  })

Promise.all([
  p1,
  p2,
  p3,
  getAccountsData,
  getRecommamdSupplier(route.params.id as string),
])
  .then((array: any[]) => {
    // console.log(array, 'all res')
    // p2的数据处理逻辑从原本的p2then移动到这里处理.
    // 因为要根据p3用户数据的Organization 来填充产品列表里面的 requirement, 这步处理必须放在p3后面, 而p2 p3是并发操作.
    if (array[1].data.code !== 1) return
    const res = array[1].data.result
    if (res.Account_Name && res.Account_Name.id) {
      getAccountsData(res.Account_Name.id)
    }
    form.value.field7 = res.Owner_name || res.Owner.name || ''
    soOwner.value = res.Owner_name || res.Owner.name || ''
    form.value.Title =
      res.Contract_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')
    form.value.Reference = res.Reference || ''
    form.value.Artwork_Link = res.Artwork_Link || ''
    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) => {
      getProductData(item.product.id).then((ctx) => {
        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),
            requirement: ctx || '',
          }),
        )
      })
    })
  })
  .finally(() => {
    loading.value = false
  })

interface PrimePacTable {
  project: string
  method: string
}

const PrimePacCommonRuleTableData = [
  {
    project: '检验项目',
    method: '产品质量检测方法与标准',
  },
  {
    project: '尺寸',
    method: '参考上述产品尺寸',
  },
  {
    project: '印刷',
    method:
      '1、成品整洁，无明显印刷瑕疵范畴的脏污、残缺、刀丝；\n2、文字印刷清晰完整，印迹边缘光洁，渐变区域清晰均匀；\n3、无明显变形和残缺，套印基本准确，同色之间基本无色差；',
  },
  {
    project: '复合',
    method: '无明显气泡，无分层',
  },
  {
    project: '表面',
    method: '平整，无明显气泡，无刮花，无明显溢胶',
  },
  {
    project: '其他',
    method: '不允许出现划伤、烫伤、穿孔、异味、粘连异物、脏污',
  },
  {
    project: '特殊',
    method: '/',
  },
]
// 软包版表格数据
const PrimePacSoftRuleTableData1: PrimePacTable[] = [
  {
    project: '检验项目',
    method: '产品质量检测方法与标准',
  },
  {
    project: '印刷',
    method:
      '1、成品整洁，无明显印刷瑕疵范畴的脏污、残缺、刀丝；\n2、文字印刷清晰完整，印迹边缘光洁，渐变区域清晰均匀；\n3、无明显变形和残缺，套印基本准确，同色之间基本无色差；\n4、与颜色标准无明显色差（将提供明确的颜色标准）',
  },
  {
    project: '复合',
    method: '无明显气泡，无分层',
  },
  {
    project: '热封',
    method: '平整，无虚封，无明显气泡',
  },
  {
    project: '其他',
    method: '不允许出现划伤、烫伤、穿孔、异味、粘连异物、脏污',
  },
]
const PrimePacSoftRuleTableData2: PrimePacTable[] = [
  {
    project: '溶剂残留量',
    method:
      '按照GB/T 10004的6.6.17条规定执行\n总溶剂残留量≤10mg/m2\n苯系溶剂残留量≤2mg/m2',
  },
  {
    project: '复合强度',
    method: '按照GB/T 8808的规定执行\n≥1.0   N/15mm',
  },
  {
    project: '热封强度',
    method: '按照GB/T 2358的规定执行\n≥20   N/15mm',
  },
  {
    project: '耐压性能',
    method: '按照GB/T 10004的6.6.8条规定执行\n120N下无渗漏，无破裂',
  },
  {
    project: '熟化时间',
    method: '熟化时间不少于48小时',
  },
]
</script>

<style lang="scss">
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
  &:hover {
    -moz-appearance: textfield;
    appearance: textfield;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
.product-select {
  .el-select-dropdown__list {
    min-width: 400px;
    max-width: 500px;
  }
}
</style>
<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;
}
.fixed-button-area {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 2;

  @media screen and (min-width: 1600px) {
    right: calc((100% - 1600px) / 2 + 24px);
  }
}
.screen {
  margin: 0 auto;
  font-size: 12pt;
  line-height: 22pt;
}
.print {
  padding: 20px 0;
}

.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: 12px;
}
.layout-right {
  position: relative;
  border-left: 1px solid #eee;
  padding: 0 24px;
}

.rule-item {
  margin-bottom: 2px;
  color: $subColor;
  line-height: 26pt;
  &.sub {
    line-height: 20pt;
    padding-left: 24px;
  }
  &.nowrap {
    white-space: nowrap;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
.btn-quick-vendor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  padding: 0 8px;
  margin-bottom: 6px;
  &.active {
    color: #fff;
    background-color: #409eff;
  }
}
.PrimePac-table {
  margin: 12px auto;
  width: 100%;
  border-bottom: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  .column-item {
    color: $subColor;
    white-space: pre-wrap;
    padding: 0 4px;
    line-height: 20pt;
    min-width: 120px;
    min-height: 20pt;
    border-top: 1px solid #dcdfe6;
    border-left: 1px solid #dcdfe6;
  }
}

.sign-wrap {
  width: 100pt;
  &.pangea {
    width: 180pt;
  }
  img {
    width: 100%;
  }
}

.screen {
  background-color: rgba(#fff, 1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    0 0.5em 1em rgba(0, 0, 0, 0.6);
  max-width: 1600px;
  min-width: 1200px;
  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%;
  }
  .sub-form-title {
    padding-left: 4pt;
    border-left: 2pt solid #efefef;
    margin-bottom: 8pt;
  }
}
.preview-area {
  background-color: #fff;
  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;
      }
      &:first-of-type {
        padding-right: 10pt;
      }
    }
    .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;
      white-space: pre-wrap;
      .product-name {
        font-weight: bold;
      }
      .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;
  }
  .signature-area {
    color: $subColor;
    .first-party {
      padding: 30pt 0 0;
    }
    .second-party {
      padding: 20pt 0 40pt;
    }
  }
}

.preview-area2 {
  background-color: #fff;
  .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;
    margin: 0 auto;
    box-shadow: 1px 1px 2pt 0px $subColor;
    & + .pdf-wrap {
      margin-top: 20px;
    }
  }
  .preview-area,
  .preview-area2 {
    padding: 1cm;
    min-height: 29.69cm;
  }
}
</style>