<template>
  <modal v-model="modal" :footer-hide="tabName !== '1'" width="800px" class-name="vertical-center-modal">
    <div class="footer" slot="footer">
      <Button @click="cfm" class="btn" type="primary">打印</Button>
    </div>
    <Tabs v-model="tabName">
      <TabPane name="1" label="合同详情" >
        <div class="content" ref="printForm" style="padding: 0 40px;font-size: 14px;">
          <div class="title" style="font-size: 20px;font-weight: bold;text-align: center;">福州杰生广印工艺品有限责任公司</div>
          <div class="title" style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px;">采购合同</div>
          <div class="row" style="padding-bottom: 5px;display: flex;justify-content: space-between;align-items: center;">
            <div class="col" style="display: flex;align-items: center;flex: 1;">
              <div class="label">合同编号：</div>
              <div class="value">{{ data.purchaseBillNo }}</div>
            </div>
            <div class="col"  style="display: flex;align-items: center;flex: 1;">
              <div class="label">交货日期：</div>
              <div class="value">{{ $dayjs(data.deliverTime).format('YYYY-MM-DD') }}</div>
            </div>
          </div>
          <div class="text" style="padding: 10px 0;">
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              兹经充分协商，买卖双方愿就以下条件达成协议，共同遵守执行，该合同对双方均有约束力，卖方在收到合同后如有异议请于三天内提出，否则视为接受合同全部条款。
            </p>
          </div>
          <div class="table">
            <table style="border-collapse:collapse;border:none;width: 100%;">
              <tr>
                <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">件号</th>
                <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">物料名称</th>
                <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">规格</th>
                <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;min-width: 40px;">单位</th>
                <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;min-width: 60px;">采购数量</th>
                <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;min-width: 40px;">单价</th>
                <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;min-width: 40px;">小计</th>
                <!--                  <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">备注</th>-->
              </tr>
              <tr>
                <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.materialCode }}</td>
                <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.materialName }}</td>
                <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.spec }}</td>
                <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.unitName }}</td>
                <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.purchaseQty }}</td>
                <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.price }}</td>
                <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.totalAmount }}</td>
                <!--                  <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.remark }}</td>-->
              </tr>
            </table>
          </div>
          <div class="text" v-if="data.categoryCode === '03.008.'" style="padding: 10px 0;">
            <p>1、交货地点: 货物通过指定物流发货，到货地为福州。 收货人：17750201167 程义成。</p>
            <p>2、质量要求及技术指标: 以确认样和合同上的数据为准。</p>
            <p>3、标签、条形码和唛头要求: 外箱，内盒上必须标明产品的规格型号，颜色，批次。</p>
            <p>4、包装条件及规格要求:普通包装，以运输途中不损坏货物为标准。外包装上注明货品名称，数量，内附清单，实际到货以清单为准。</p>
            <p>5、验受标准及质量索赔: 以我司验受为标准；因仅是抽检,卖方的出货品质需与成交样品品质一致,若有差异买方有权拒收货物，供方应对因产品本身质量问题产生的责任负责，包含连带损耗的纸张，面料等直接费用。</p>
            <p>6、违约责任及其它事项: 合同经确认后, 如发生违约, 由违约方承担一切责任。履约地在福州。</p>
            <p>7、禁止卖方向买方人员进行直接或间接的利益输送，包括但不限于任何形式的回扣、馈赠、礼物、宴请等，卖方应遵守相应的廉洁条款，若违反本约定的一经发现，买方有权单方面取消与卖方的合作，并有权追究因此引起的买方的一切损失和法律后果</p>
          </div>
          <div class="text" v-else style="padding: 10px 0;">
            <p>1、交货地点：货物通过指定物流发货，到货地为福州。物流送货上门。收货人：程义成</p>
            <p>2、质量要求及技术指标：以确认样和合同上的数据为准。面料允收情况为：脏污现象每百米≤4处，抽丝每百米≤4处且米数不得超过3米，缩水门幅控制在2.5%以内。</p>
            <p>3、标签、条形码和唛头要求：每卷面料外包装上需贴标签，注明面料名称、规格、米数，以便区分、查验。码单交由物流人员，随货到厂。实际到货情况以我方清点后数据为准。</p>
            <p>4、包装条件及规格要求：普通包装，以运输途中不损坏货物为标准。直喷面料打卷纸管内径不得小于7.6cm。</p>
            <p>5、验收标准及质量索赔：以我司验收为标准：因仅是抽检，卖方的出货品质需与成交样品品质一致，若有差异买方有权拒收货物，供方对因产品本身质量问题产生的责任负责。</p>
            <p>6、违约责任及其他事项：合同经确认后，如发生违约，由违约方承担一切责任。履约地在福州。</p>
            <p>7、禁止卖方向买方人员进行直接或间接的利益输送，包括但不限于任何形式的回扣、馈赠、礼物、宴请等，卖方应遵守相应的廉洁条款，若违反本约定的一经发现，买方有权单方面取消与卖方的合作，并有权追究因此引起的买方的一切损失和法律后果。</p>
            <p>8、价格条件：含税，含运费价格</p>
            <p>9、付款条款：{{ data.accountPeriod }}天账期，供方提供{{ data.taxValue * 100 }}%增值税{{ data.invoiceType === 0 ? '专用': '普通' }}发票</p>
          </div>
          <div class="row" style="padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;">
            <div class="col" style="display: flex;align-items: center;flex: 1;">
              <div class="label">备注：</div>
              <div class="value">
                {{ data.remark }}
              </div>
            </div>
          </div>
          <div class="row" style="padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;">
            <div class="col" style="display: flex;align-items: center;flex: 1;">
              <div class="label">需方：</div>
              <div class="value">福州杰生广印工艺品有限责任公司</div>
            </div>
            <div class="col" style="display: flex;align-items: center;flex: 1;">
              <div class="label">供方：</div>
              <div class="value">
                {{ data.supplierName }}
              </div>
            </div>
          </div>
          <div class="row" style="padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;">
            <div class="col" style="display: flex;align-items: center;flex: 1;">
              <div class="label">传真：</div>
              <div class="value">0519-83986808</div>
            </div>
            <div class="col" style="display: flex;align-items: center;flex: 1;">
              <div class="label">传真：</div>
              <div class="value"></div>
            </div>
          </div>
          <div class="row" style="padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;">
            <div class="col" style="display: flex;align-items: center;flex: 1;"></div>
            <div class="col" style="display: flex;align-items: center;flex: 1;">
              <div class="label">签约日期：</div>
              <div class="value">{{  $dayjs(data.signTime).format('YYYY-MM-DD') }}</div>
            </div>
          </div>
        </div>
      </TabPane>
      <vue-easy-print ref="printForm">
        <template>
          <TabPane name="1" label="合同详情" >
            <div class="content" ref="printForm" style="padding: 0 40px;font-size: 14px;">
              <div class="title" style="font-size: 20px;font-weight: bold;text-align: center;">福州杰生广印工艺品有限责任公司</div>
              <div class="title" style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px;">采购合同</div>
              <div class="row" style="padding-bottom: 5px;display: flex;justify-content: space-between;align-items: center;">
                <div class="col" style="display: flex;align-items: center;flex: 1;">
                  <div class="label">合同编号：</div>
                  <div class="value">{{ data.purchaseBillNo }}</div>
                </div>
                <div class="col"  style="display: flex;align-items: center;flex: 1;">
                  <div class="label">交货日期：</div>
                  <div class="value">{{ $dayjs(data.deliverTime).format('YYYY-MM-DD') }}</div>
                </div>
              </div>
              <div class="text" style="padding: 10px 0;">
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  兹经充分协商，买卖双方愿就以下条件达成协议，共同遵守执行，该合同对双方均有约束力，卖方在收到合同后如有异议请于三天内提出，否则视为接受合同全部条款。
                </p>
              </div>
              <div class="table">
                <table style="border-collapse:collapse;border:none;width: 100%;">
                  <tr>
                    <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">件号</th>
                    <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">物料名称</th>
                    <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">规格</th>
                    <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;min-width: 40px;">单位</th>
                    <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;min-width: 60px;">采购数量</th>
                    <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;min-width: 40px;">单价</th>
                    <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;min-width: 40px;">小计</th>
                    <!--                  <th style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">备注</th>-->
                  </tr>
                  <tr>
                    <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.materialCode }}</td>
                    <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.materialName }}</td>
                    <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.spec }}</td>
                    <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.unitName }}</td>
                    <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.purchaseQty }}</td>
                    <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.price }}</td>
                    <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.totalAmount }}</td>
                    <!--                  <td style="background-color: #eeeeee;padding: 5px;text-align: center;border:solid #dcdee2 1px;position: relative;font-size: 12px;">{{ data.remark }}</td>-->
                  </tr>
                </table>
              </div>
              <div class="text" v-if="data.categoryCode === '03.008.'" style="padding: 10px 0;">
                <p>1、交货地点: 货物通过指定物流发货，到货地为福州。 收货人：17750201167 程义成。</p>
                <p>2、质量要求及技术指标: 以确认样和合同上的数据为准。</p>
                <p>3、标签、条形码和唛头要求: 外箱，内盒上必须标明产品的规格型号，颜色，批次。</p>
                <p>4、包装条件及规格要求:普通包装，以运输途中不损坏货物为标准。外包装上注明货品名称，数量，内附清单，实际到货以清单为准。</p>
                <p>5、验受标准及质量索赔: 以我司验受为标准；因仅是抽检,卖方的出货品质需与成交样品品质一致,若有差异买方有权拒收货物，供方应对因产品本身质量问题产生的责任负责，包含连带损耗的纸张，面料等直接费用。</p>
                <p>6、违约责任及其它事项: 合同经确认后, 如发生违约, 由违约方承担一切责任。履约地在福州。</p>
                <p>7、禁止卖方向买方人员进行直接或间接的利益输送，包括但不限于任何形式的回扣、馈赠、礼物、宴请等，卖方应遵守相应的廉洁条款，若违反本约定的一经发现，买方有权单方面取消与卖方的合作，并有权追究因此引起的买方的一切损失和法律后果</p>
              </div>
              <div class="text" v-else style="padding: 10px 0;">
                <p>1、交货地点：货物通过指定物流发货，到货地为福州。物流送货上门。收货人：程义成</p>
                <p>2、质量要求及技术指标：以确认样和合同上的数据为准。面料允收情况为：脏污现象每百米≤4处，抽丝每百米≤4处且米数不得超过3米，缩水门幅控制在2.5%以内。</p>
                <p>3、标签、条形码和唛头要求：每卷面料外包装上需贴标签，注明面料名称、规格、米数，以便区分、查验。码单交由物流人员，随货到厂。实际到货情况以我方清点后数据为准。</p>
                <p>4、包装条件及规格要求：普通包装，以运输途中不损坏货物为标准。直喷面料打卷纸管内径不得小于7.6cm。</p>
                <p>5、验收标准及质量索赔：以我司验收为标准：因仅是抽检，卖方的出货品质需与成交样品品质一致，若有差异买方有权拒收货物，供方对因产品本身质量问题产生的责任负责。</p>
                <p>6、违约责任及其他事项：合同经确认后，如发生违约，由违约方承担一切责任。履约地在福州。</p>
                <p>7、禁止卖方向买方人员进行直接或间接的利益输送，包括但不限于任何形式的回扣、馈赠、礼物、宴请等，卖方应遵守相应的廉洁条款，若违反本约定的一经发现，买方有权单方面取消与卖方的合作，并有权追究因此引起的买方的一切损失和法律后果。</p>
                <p>8、价格条件：含税，含运费价格</p>
                <p>9、付款条款：{{ data.accountPeriod }}天账期，供方提供{{ data.taxValue * 100 }}%增值税{{ data.invoiceType === 0 ? '专用': '普通' }}发票</p>
              </div>
              <div class="row" style="padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;">
                <div class="col" style="display: flex;align-items: center;flex: 1;">
                  <div class="label">备注：</div>
                  <div class="value">
                    {{ data.remark }}
                  </div>
                </div>
              </div>
              <div class="row" style="padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;">
                <div class="col" style="display: flex;align-items: center;flex: 1;">
                  <div class="label">需方：</div>
                  <div class="value">福州杰生广印工艺品有限责任公司</div>
                </div>
                <div class="col" style="display: flex;align-items: center;flex: 1;">
                  <div class="label">供方：</div>
                  <div class="value">
                    {{ data.supplierName }}
                  </div>
                </div>
              </div>
              <div class="row" style="padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;">
                <div class="col" style="display: flex;align-items: center;flex: 1;">
                  <div class="label">传真：</div>
                  <div class="value">0519-83986808</div>
                </div>
                <div class="col" style="display: flex;align-items: center;flex: 1;">
                  <div class="label">传真：</div>
                  <div class="value"></div>
                </div>
              </div>
              <div class="row" style="padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;">
                <div class="col" style="display: flex;align-items: center;flex: 1;"></div>
                <div class="col" style="display: flex;align-items: center;flex: 1;">
                  <div class="label">签约日期：</div>
                  <div class="value">{{  $dayjs(data.signTime).format('YYYY-MM-DD') }}</div>
                </div>
              </div>
            </div>
          </TabPane>
        </template>
      </vue-easy-print>
      <TabPane name="2" label="入库记录">
        <div class="content sub-content">
          <my-table
            :table-filter="rkTableFilter"
            :columns="rkColumns"
            :data="rkData"
            :table-page="rkParams"
            @event-handle="eventHandle($event, 'rk')"
            @on-change="changePage($event, 'rk')"
          >
          </my-table>
        </div>
      </TabPane>
      <TabPane name="3" label="质检记录">
        <div class="content sub-content">
          <my-table
            :table-filter="zjTableFilter"
            :columns="zjColumns"
            :data="zjData"
            :table-page="zjParams"
            @event-handle="eventHandle($event, 'zj')"
            @on-change="changePage($event, 'zj')"
          >
          </my-table>
        </div>
      </TabPane>
      <TabPane name="4" label="代付运费记录">
        <div class="content sub-content">
          <my-table
            :table-filter="dfyfTableFilter"
            :is-show-page="false"
            :columns="dfyfColumns"
            :data="dfyfData"
            @event-handle="eventHandle($event, 'dfyf')"
            @on-change="changePage($event, 'dfyf')"
          >
          </my-table>
        </div>
      </TabPane>
      <TabPane name="5" label="标签管理">
        <div class="content sub-content">
          <my-table
            ref="table"
            :table-filter="bqTableFilter"
            :columns="bqColumns"
            :data="bqData"
            :table-page="bqParams"
            selectKey="id"
            @event-handle="eventHandle($event, 'bq')"
            @on-change="changePage($event, 'bq')"
            @on-select="select"
          >
          </my-table>
        </div>
      </TabPane>
    </Tabs>
    <!-- 新增支出 -->
    <Modal v-model="dfyfShow" width="600px" class-name="vertical-center-modal">
      <div class="content">
        <div class="title">
          新增支出
        </div>
        <div class="sub-title">
          基本信息
        </div>
        <div class="row">
          <div class="col">
            <div class="label">申请日期：</div>
            <div class="value"><Input v-model="dfyfForm.payTime" disabled/></div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label">支付金额：</div>
            <div class="value"><Input v-model="dfyfForm.payAmount" type="number" placeholder="请输入支付金额"/></div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label">支付类型：</div>
            <div class="value"><Input v-model="dfyfForm.payType" placeholder="代付运费" /></div>
          </div>
        </div>
        <div class="row">
          <div class="col" style="align-items: flex-start">
            <div class="label">支付说明：</div>
            <div class="value"><Input v-model="dfyfForm.account" type="textarea" placeholder="请输入支付说明" /></div>
          </div>
        </div>
      </div>
      <div class="footer" slot="footer">
        <Button @click="dfyfCfm" class="btn" type="primary">提交</Button>
        <Button @click="dfyfCancel" class="btn">取消</Button>
      </div>
    </Modal>
    <!-- 打印二维码标签内容 -->
    <div class="print-wrap">
      <div ref="print">
        <div
          v-for="(item, index) in printList"
          :key="index"
          class="print"
          style="box-sizing: border-box;height: calc(100% - 20px);width: calc(100% - 20px);
          margin: 10px;border: 1px solid #000;page-break-after: always;
         ">
          <div class="top"
               style="height: 240px;display: flex;align-items: flex-start;
               border-bottom: 1px solid #000;box-sizing: border-box;overflow: hidden;"
          >
            <div class="left" style="padding: 10px;">
              <vue-qr :text="item.qrCode" :size="120" :margin="0"></vue-qr>
            </div>
            <div class="right"
                 style="height: 100%;
                 padding: 10px;
                 flex: 2;
                 display: flex;
                 flex-direction: column;
                 word-break:break-all;
                 justify-content: flex-start;
                 font-size: 12px;
              ">
              <div class="row" style="font-size: 18px;font-weight: bold;">物料编码：{{ item.materialCode }}</div>
              <div class="row" style="font-size: 18px;font-weight: bold;">物料名称：{{ item.materialName }}</div>
              <div class="row" style="font-size: 18px;font-weight: bold;">标签编码：{{ item.rfidCode }}</div>
              <div class="row" style="font-size: 18px;font-weight: bold;">门幅：{{ item.width  }}</div>
              <div class="row" style="font-size: 18px;font-weight: bold;">克重：{{ item.unitWeight }}</div>
              <div class="row" style="font-size: 18px;font-weight: bold;">长度：{{ item.quantity }}米</div>
            </div>
          </div>
          <div class="bottom"
               style="
                  height: calc(100% - 260px);
                  display: flex;justify-content: center;
                  align-items: center;
                  "
          >
            RFID标签粘贴区
          </div>
        </div>
      </div>
    </div>
    <!-- 采购申请单 -->
    <purchase-form v-model="applyShow" :data="formData"></purchase-form>
    <!-- 采购入库单 -->
    <store-in-form v-model="storeInShow" :data="formData"></store-in-form>
    <!--质检单号的采购入库单-->
    <quality-form v-model="qualityShow" :data="formData"></quality-form>
  </modal>
</template>

<script>
import VueEasyPrint from 'vue-easy-print'
import { exportExcel } from '@/libs/util'
import MyTable from '_c/my-table/my-table'
import MyModalForm from '_c/my-modal-form/my-modal-form'
import { GetPurExpressFee, AddPurchaseExpressFee, SavePaymentVoucher, FinishStockIn } from '@/api/applyPurchase'
import { GetInStockPageList, GetQuantityCheckRecordList, GetApplyBill } from '@/api/stock'
import { UploadBase64 } from '@/api/upload'
import { PrinterSupplierQRCode, GetSupplierQRCodeTest } from '@/api/supplierShip'
import PurchaseForm from './purchase-form'
import StoreInForm from './store-in-form'
import QualityForm from './quality-form'
import VueQr from 'vue-qr'
export default {
  name: 'my-modal',
  data () {
    return {
      applyShow: false,
      storeInShow: false,
      qualityShow: false,
      formData: {},
      printList: [],
      dfyfForm: {
        payType: '代付运费',
        payTime: this.$dayjs().format('YYYY-MM-DD'),
        payAmount: '',
        account: ''
      },
      tabName: '1',
      payData: [], // 付款凭证列表
      rkData: [], // 入库信息列表
      dfyfData: [], // 代付运费列表
      zjData: [], // 质检记录列表
      gysData: [],
      bqData: [], // 标签管理
      payUploadForm: {},
      show: false,
      payUploadShow: false,
      dfyfShow: false,
      modal: false,
      formConfig: [
        {
          type: 'input',
          label: '申请人',
          key: 'code',
          span: 12
        },
        {
          type: 'input',
          label: '申请部门',
          key: 'name',
          span: 12
        },
        {
          type: 'input',
          label: '申请时间',
          key: 'spec',
          span: 12
        },
        {
          span: 12,
          type: '',
          hiddenLabel: true
        },
        {
          type: 'input',
          label: '门幅',
          key: 'width',
          disabled: true,
          span: 12
        },
        {
          type: 'input',
          label: '克重',
          key: 'unitWeight',
          disabled: true,
          span: 12
        },
        {
          type: 'input',
          label: '采购周期',
          key: 'safetyWarnDay',
          disabled: true,
          span: 12
        },
        {
          type: 'input',
          label: '采购单价',
          key: 'price',
          placeholder: '请输入采购单价',
          span: 12
        }
      ],
      payColumns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '付款日期',
          key: 'applyTime',
          minWidth: 150
        },
        {
          title: '付款金额',
          key: 'payAmount',
          minWidth: 150
        },
        {
          title: '付款状态',
          key: 'applyPayState',
          minWidth: 150
        },
        {
          title: '支付凭证',
          minWidth: 150,
          render: (h, params) => {
            let _this = this
            if (params.row.applyPayState === '已审批') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '.5vw'
                    },
                    on: {
                      click (e) {
                        e.stopPropagation()
                        _this.payUploadForm = { ...params.row }
                        _this.payUploadShow = true
                      }
                    }
                  },
                  '上传凭证'
                )
              ])
            } else if (params.row.applyPayState === '已支付') {
              return h('a', {}, params.row.fileName)
            } else {
              return false
            }
          }
        }
      ],
      dfyfColumns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '支付时间',
          key: 'payTime',
          minWidth: 150
        },
        {
          title: '支付金额',
          key: 'payAmount',
          minWidth: 150
        },
        {
          title: '支付类型',
          key: 'payType',
          minWidth: 150
        },
        {
          title: '支付说明',
          key: 'account',
          minWidth: 250
        }
      ],
      zjColumns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        // {
        //   title: '质检单号',
        //   key: 'qtyCheckNo',
        //   minWidth: 150,
        //   render: (h, params) => {
        //     let _this = this
        //     return h('a', {
        //       on: {
        //         click (e) {
        //           e.stopPropagation()
        //           _this.formData = { ...params.row }
        //           _this.qualityShow = true
        //         }
        //       }
        //     }, params.row.qtyCheckNo)
        //   }
        // },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '到货数量',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '到货时间',
          key: 'arrivalDate',
          minWidth: 150
        },
        {
          title: '质检结论',
          key: 'result',
          minWidth: 150
        },
        {
          title: '质检日期',
          key: 'checkDate',
          minWidth: 150
        }
        // {
        //   title: '状态',
        //   key: 'checkState',
        //   fixed: 'right',
        //   align: 'center',
        //   minWidth: 100
        // }
      ],
      rkColumns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '申购单号',
          key: 'applyBillNo',
          minWidth: 200,
          render: (h, params) => {
            let _this = this
            return h('a', {
              on: {
                click (e) {
                  e.stopPropagation()
                  GetApplyBill({
                    applyBillNo: params.row.applyBillNo
                  }).then(res => {
                    if (res.code === 0) {
                      _this.formData = { ...params.row, ...res.result }
                      _this.applyShow = true
                    }
                  })
                }
              }
            }, params.row.applyBillNo)
          }
        },
        // {
        //   title: '入库单号',
        //   key: 'inOutStorageNo',
        //   minWidth: 200,
        //   render: (h, params) => {
        //     let _this = this
        //     return h('a', {
        //       on: {
        //         click (e) {
        //           e.stopPropagation()
        //           GetInStockBill({
        //             inOutStorageNo: params.row.inOutStorageNo,
        //             applyBillNo: params.row.applyBillNo
        //           }).then(res => {
        //             if (res.code === 0) {
        //               _this.formData = res.result
        //               _this.storeInShow = true
        //             }
        //           })
        //         }
        //       }
        //     }, params.row.inOutStorageNo)
        //   }
        // },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '申购数量',
          key: 'purchaseQty',
          minWidth: 150
        },
        {
          title: '已入库数量',
          key: 'readyInQty',
          minWidth: 150
        },
        {
          title: '未入库数量',
          key: 'notInQty',
          minWidth: 150
        },
        // {
        //   title: '状态',
        //   key: 'state',
        //   minWidth: 150
        // },
        {
          title: '操作',
          minWidth: 100,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            let _this = this
            if (params.row.state === '未完成') {
              return h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click (e) {
                    e.stopPropagation()
                    FinishStockIn({
                      stockInId: params.row.stockInId
                    }).then(res => {
                      if (res.code === 0) {
                        _this.getInStockPageList()
                      }
                    })
                  }
                }
              }, '完成入库')
            } else {
              return h('span', '已完成')
            }
          }
        }
      ],
      columns: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '供应商代码',
          key: 'code',
          minWidth: 150
        },
        {
          title: '供应商名称',
          key: 'name',
          minWidth: 150
        },
        {
          title: '供应商单价',
          key: '',
          minWidth: 150
        },
        {
          title: '账期',
          key: 'accountDate',
          minWidth: 150
        },
        {
          title: '账期说明',
          key: 'accountDateRemark',
          minWidth: 150
        }
      ],
      bqColumns: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150,
          sortable: true
        },
        {
          title: '标签编码',
          key: 'rfidCode',
          minWidth: 180,
          tooltip: true
        },
        {
          title: '数量',
          key: 'quantity',
          minWidth: 100
        },
        {
          title: '二维码编码',
          key: 'qrCode',
          minWidth: 150
        },
        {
          title: '状态',
          key: 'width',
          minWidth: 150,
          render: (h, params) => {
            return h('span', params.row.hadPrinter ? '已打印' : '未打印')
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '100px',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '.5vw'
                  },
                  on: {
                    click: () => {
                      this.printList = []
                      this.printList = [ { ...params.row } ]
                      if (!params.row.hadPrinter) {
                        PrinterSupplierQRCode({
                          stockTagIds: [params.row.id]
                        }).then(res => {
                          if (res.code === 0) {
                            this.$Message.info('打印成功！')
                            this.getSupplierQRCodeTest()
                          }
                        })
                      }
                      if (params.row.qrCode) {
                        setTimeout(() => {
                          // 未改成vue-easy-print
                          this.$print(this.$refs.print)
                        }, 100)
                      } else {
                        this.$Message.error('二维码为空！')
                      }
                    }
                  }
                },
                '打印'
              )
            ])
          }
        }
      ],
      bqTableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导出Excel',
          e: 'exportBq'
        },
        {
          name: 'RadioGroup',
          value: 'hadPrinter',
          list: [
            { label: '未打印', value: 0 },
            { label: '已打印', value: 1 }
          ]
        },
        {
          name: 'Button',
          type: 'success',
          text: '批量打印',
          align: 'right',
          e: 'print'
        }
      ],
      bqParams: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        hadPrinter: false
      },
      zjTableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导出Excel',
          e: 'exportZj'
        }
      ],
      rkTableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导出Excel',
          e: 'exportRk'
        }
        // {
        //   name: 'RadioGroup',
        //   value: 'isComplete',
        //   list: [
        //     { label: '未完成', value: 0 },
        //     { label: '已完成', value: 1 }
        //   ]
        // }
      ],
      dfyfTableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导出Excel',
          e: 'exportDfyf'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '新增支出',
          align: 'right',
          e: 'addDfyf'
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '确认',
          align: 'right',
          e: 'add'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      rkParams: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      dfyfParams: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      zjParams: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  components: {
    MyTable,
    MyModalForm,
    StoreInForm,
    PurchaseForm,
    QualityForm,
    VueQr,
    VueEasyPrint
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        this.getInStockPageList()
        this.getQuantityCheckRecordList()
        this.getPurExpressFee()
        this.getSupplierQRCodeTest()
      } else {
        this.tabName = '1'
        this.rkParams.pageIndex = 1
        this.zjParams.pageIndex = 1
        this.dfyfParams.pageIndex = 1
        this.bqParams.pageIndex = 1
      }
    }
  },
  beforeUpdate () {

  },
  methods: {
    export (type) {
      if (type === 'rk') {
        GetInStockPageList({
          ...this.rkParams,
          key: this.data.purchaseBillNo,
          pageIndex: 1,
          pageSize: 99999
        }).then(res => {
          if (res.code === 0) {
            let rkData = res.result.list
            exportExcel(this.rkColumns, rkData, '入库记录')
          }
        })
      }
      if (type === 'zj') {
        GetQuantityCheckRecordList({
          ...this.zjParams,
          purchaseBillNo: this.data.purchaseBillNo,
          pageIndex: 1,
          pageSize: 99999
        }).then(res => {
          if (res.code === 0) {
            let zjData = res.result.list
            exportExcel(this.zjColumns, zjData, '质检记录')
          }
        })
      }
      if (type === 'dfyf') {
        GetPurExpressFee({
          ...this.dfyfParams,
          linkPurchaseId: this.data.id,
          pageIndex: 1,
          pageSize: 99999
        }).then(res => {
          if (res.code === 0) {
            let dfyfData = res.result
            exportExcel(this.dfyfColumns, dfyfData, '代付运费')
          }
        })
      }
      if (type === 'bq') {
        GetSupplierQRCodeTest({
          ...this.bqParams,
          purchaseBillNo: this.data.purchaseBillNo
        }).then(res => {
          if (res.code === 0) {
            let bqData = res.result.list
            exportExcel(this.bqColumns, bqData, '标签管理')
          }
        })
      }
    },
    payCancel () {
      this.payUploadForm = {}
      this.payUploadShow = false
    },
    payCfm () {
      console.log(this.payUploadForm)
      SavePaymentVoucher({
        ...this.payUploadForm
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '操作成功')
          this.getPaymentVouchers()
        }
      })
    },
    dfyfCancel () {
      this.dfyfShow = false
      this.dfyfForm = {
        payType: '代付运费',
        payTime: this.$dayjs().format('YYYY-MM-DD'),
        payAmount: '',
        account: ''
      }
    },
    cfm () {
      /// 已改成vue-easy-print
      this.$refs.printForm.print()
    },
    dfyfCfm () {
      if (!this.dfyfForm.payType) {
        return this.$Message.error('请输入支出类型')
      } else if (!this.dfyfForm.payAmount) {
        return this.$Message.error('请输入支出金额')
      }
      AddPurchaseExpressFee({
        ...this.dfyfForm,
        linkPurchaseId: this.data.id
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '新增成功')
          this.dfyfCancel()
          this.getPurExpressFee()
        }
      })
    },
    // 上传付款凭证
    uploadPay (file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (event) => {
        UploadBase64({
          fileBase64: event.srcElement.result,
          fileName: file.name,
          floder: 'order'
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info('上传成功！')
            this.$set(this.payUploadForm, 'fileName', file.name)
            this.$set(this.payUploadForm, 'filePath', res.result)
          }
        })
      }
      return false
    },
    // 附件管理上传文件 1文件 2发票
    uploadFile (file) {
      this.upload(file, 0)
      return false
    },
    uploadBill (file) {
      this.upload(file, 1)
      return false
    },
    // 检索条件事件处理
    eventHandle (option, type) {
      switch (option._evnet) {
        case 'search':
          if (type === 'rk') {
            this.rkParams.pageIndex = 1
            this.rkParams.key = option.key
            this.rkParams.isComplete = option.isComplete
            this.getInStockPageList()
          } else if (type === 'zj') {
            this.zjParams.pageIndex = 1
            this.zjParams.key = option.key
            this.getQuantityCheckRecordList()
          } else if (type === 'dfyf') {
            this.dfyfParams.pageIndex = 1
            this.dfyfParams.key = option.key
            this.getPurExpressFee()
          } else if (type === 'bq') {
            this.bqParams.pageIndex = 1
            this.bqParams.keyWord = option.key
            this.bqParams.hadPrinter = !!option.hadPrinter
            this.getSupplierQRCodeTest()
          }
          break
        case 'addDfyf':
          this.dfyfShow = true
          break
        case 'exportDfyf':
          this.export('dfyf')
          break
        case 'exportZj':
          this.export('zj')
          break
        case 'exportRk':
          this.export('rk')
          break
        case 'exportBq':
          this.export('bq')
          break
        case 'print':
          this.print()
          break
      }
    },
    print () {
      if (this.printList.length < 1) {
        return
      }
      PrinterSupplierQRCode({
        stockTagIds: this.printList.map(item => item.id)
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info('打印成功！')
          this.getSupplierQRCodeTest()
        }
      })
      setTimeout(() => {
        // 未改成vue-easy-print
        this.$print(this.$refs.print)
        this.$refs.table.clearTempList()
        this.printList = []
      }, 100)
    },
    select (data) {
      this.printList = data
    },
    changePage (pageIndex, type) {
      if (type === 'rk') {
        this.rkParams.pageIndex = pageIndex
        this.getInStockPageList()
      } else if (type === 'zj') {
        this.zjParams.pageIndex = pageIndex
        this.getQuantityCheckRecordList()
      } else if (type === 'dfyf') {
        this.dfyfParams.pageIndex = pageIndex
        this.getPurExpressFee()
      } else if (type === 'bq') {
        this.bqParams.pageIndex = pageIndex
        this.getSupplierQRCodeTest()
      }
    },
    // 标签管理
    getSupplierQRCodeTest () {
      GetSupplierQRCodeTest({
        ...this.bqParams,
        purchaseBillNo: this.data.purchaseBillNo
      }).then(res => {
        if (res.code === 0) {
          this.bqData = res.result.list
          this.bqParams.total = res.result.totalCount
        }
      })
    },
    // 入库记录
    getInStockPageList () {
      GetInStockPageList({
        ...this.rkParams,
        key: this.data.purchaseBillNo
      }).then(res => {
        if (res.code === 0) {
          this.rkData = res.result.list
          this.rkParams.total = res.result.totalCount
        }
      })
    },
    // 代付运费记录
    getPurExpressFee () {
      GetPurExpressFee({
        ...this.dfyfParams,
        linkPurchaseId: this.data.id
      }).then(res => {
        if (res.code === 0) {
          this.dfyfData = res.result
        }
      })
    },
    // 质检记录
    getQuantityCheckRecordList () {
      GetQuantityCheckRecordList({
        ...this.zjParams,
        purchaseBillNo: this.data.purchaseBillNo
      }).then(res => {
        if (res.code === 0) {
          this.zjData = res.result.list
          this.zjParams.total = res.result.totalCount
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .content {
    padding: 0 40px;
    font-size: 14px;
    .title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
    .sub-title {
      margin: 10px 0;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px solid #000;
    }
    .row {
      padding-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .col {
        display: flex;
        align-items: center;
        flex: 1;
        .label {
        }
        &:last-child {
          justify-content: flex-end;
          .label {
            width: auto;
          }
          .value {
            width: 100px;
            flex: 1;
          }
        }
      }
    }
    .text {
      padding: 10px 0;
      p {
        margin-bottom: 3px;
      }
    }
    .table {
      table {
        border-collapse:collapse;
        border:none;
        width: 100%;
        tr {
          th {
            background-color: #eeeeee;
          }
          td,th {
            padding: 5px;
            text-align: center;
            border:solid #dcdee2 1px;
            position: relative;
            font-size: 12px;
          }
        }
      }
    }
  }
  .sub-content {
    padding: 0;
    height: 100%;
  }
  /deep/ .ivu-tabs-tabpane {
    height: 80vh;
    overflow: auto;
  }
  /deep/ .ivu-modal-body {
    border-radius: 5px;
  }
  .print-wrap {
    width: 100vw;
    height: 100vh;
    display: none;
    img {
      width: 50%;
    }
  }
</style>
