<template>
  <div class="container">
      <div class="all">
        <div ref="printThree">
        <!--请购申请单-->
        <div class="purchasePay" style="page-break-after:always">
          <div class="title" align="center" style="font-weight: bold;background-color: lightgray;">请购申请单</div>
          <!-- 头部信息 -->
          <div class="info" style="padding: 50px 0;">
            <div class="row" style="margin-bottom: 15px;display: flex;justify-content: space-between;">
              <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;font-size: 14px;">填单人：</div>
                <div class="value" style="flex: 1;font-size: 14px;">{{ applyPurchase.userName }}</div>
              </div>
              <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;font-size: 14px;">发文单位：</div>
                <div class="value" style="flex: 1;font-size: 14px;">仓库</div>
              </div>
            </div>
            <div class="row" style="margin-bottom: 15px;display: flex;justify-content: space-between;">
              <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 250px;font-size: 14px;">主旨{{ applyPurchase.applyTime }}仓库申购单</div>
              </div>
            </div>
            <div class="row" style="margin-bottom: 15px;display: flex;justify-content: space-between;">
              <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;font-size: 14px;">说明：</div>
                <div class="value" style="flex: 1;font-size: 14px;">{{ applyPurchase.applyAccount }}</div>
              </div>
              <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;font-weight: bold;font-size: 14px;">采购单位：</div>
                <div class="value" style="flex: 1;font-weight: bold;font-size: 14px;">采购部</div>
              </div>
            </div>
            <div class="row" style="margin-bottom: 15px;display: flex;justify-content: space-between;">
              <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;font-size: 14px;">请购日期</div>
                <div class="value" style="flex: 1;font-size: 14px;">{{ applyPurchase.applyTime }}</div>
              </div>
            </div>
            <div class="row" style="margin-bottom: 15px;display: flex;justify-content: space-between;">
              <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;font-size: 14px;">明细：</div>
              </div>
              <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
                <div class="label" style="width: 70px;font-size: 14px;">申购单号：</div>
                <div class="value" style="flex: 1;font-size: 14px;">{{ applyPurchase.applyBillNo }}</div>
              </div>
            </div>
          </div>
          <div class="content" style="  margin-top: -20px">
            <div class="table">
              <table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-color: #000;width: 100%;">
                <tr style="background-color:cornflowerblue">
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 130px">物料编号</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 200px">物料</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 250px">规格</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 90px">单位</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 150px">请购数量</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">用途</th>
                </tr>
                <tr v-for="(item, index) in applyPurchase.purDetails" :key="index">
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 130px">{{ item.materialCode }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 200px">{{ item.materialName }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 130px">{{ item.spec }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 70px">{{ item.unitName }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 150px">{{ item.purchaseQty }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">{{ item.purpose }}</td>
                </tr>
              </table>
            </div>
            <div class="table" style="margin-top: 30px">
              <div style="font-size: 14px">办理意见:</div>
              <table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-color: #000;width: 100%;">
                <tr style="background-color:cornflowerblue">
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 130px">步骤流程</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 130px">人员</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 260px">审核时间</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">意见</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">审批结果</th>
                </tr>
                <tr v-for="(item, index) in applyPurchase.flowItems" :key="index">
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 130px">创建</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 130px">{{ item.userName }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 260px">{{ item.checkTime }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ item.suggestions }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ item.checkResult }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!--采购入库单-->
        <div class="inForm" style="page-break-after:always;margin-top: 40px">
          <div class="title" align="center" style="font-weight: bold;margin-top: 10px;">采购入库单</div>
          <div class="content" style="padding-top: 50px">
            <div class="table">
              <table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-color: #000;width: 100%;">
                <tr style="background-color:cornflowerblue;height: 50px">
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">单号</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">入库日期</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">申请人</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">物料</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">供应商</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">物料名称</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">数量</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">单价</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 90px">金额（不含税）</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">仓库</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">备注</th>
                </tr>
                <tr style="height: 50px" v-for="(item, index) in purInStock" :key="index">
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 200px">{{ item.inOutStorageNo }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 250px">{{ item.inStockTime }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 150px">{{ item.userName }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">{{ item.materialCode }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 10px;width: 200px">{{ item.supplierName }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 10px;width: 200px">{{ item.materialName }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">{{ item.quantity }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">{{ item.price }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">{{ item.amount }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 100px">{{ item.stockHouse }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 200px">{{ item.remark }}</td>
                </tr>
                <tr style="height: 30px;">
                  <td colspan="11" style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                </tr>
              </table>
              <div style="display: flex;margin-top: 5px">
                <div style="margin-left: 180px;width: 160px;font-size: 14px">打印人员：</div>
                <div style="margin-left: 190px;width: 160px;font-size: 14px">打印日期：{{ this.currentdate }}</div>
              </div>
            </div>

          </div>
        </div>
        <!--报销单-->
        <div v-if="applyPayType !== 1" class="expenseAccount" style="page-break-after:always;margin-top: 40px">
          <div class="title" align="center" style="font-weight: bold;margin-top: 15px;">福州杰生旗帜工艺品有限责任公司</div>
          <div class="row" style="margin: 10px 0;display: flex;justify-content: space-between;align-items: center">
            <div class="col" style="flex: 1;overflow: hidden;"></div>
            <div class="col title" style="flex: 1;overflow: hidden;text-align: center;font-weight: bold">报销单</div>
            <div class="col" style="flex: 1;overflow: hidden;text-align: right">
              凭证编号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>
          <div class="row" style="margin-bottom: 10px;display: flex;justify-content: space-between;margin-top: 20px">
            <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
              <div class="label" style="width: 70px;font-size: 14px;">部门：</div>
              <div class="value" style="flex: 1;font-size: 14px;">采购部</div>
            </div>
            <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
              <div class="label" style="width: 70px;font-size: 14px;margin-left: 130px">时间：</div>
              <div class="value" style="flex: 1;font-size: 14px;">{{ purchaseReimburse.createdTime  }}</div>
            </div>
          </div>
          <div class="content">
            <div class="table">
              <table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-color: #000;width: 100%;">
                <tr>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">报销项目</th>
                  <th style="padding: 5px;text-align: center;position: relative;font-size: 14px;">凭单据（张）</th>
                  <th colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">金额</th>
                  <th colspan="3"  style="padding: 5px;text-align: center;position: relative;font-size: 14px;">备注</th>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ purchaseReimburse.purchaseBillNo }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                  <td colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ purchaseReimburse.amount.toFixed(2) }}</td>
                  <td colspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">合计</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                  <td colspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ purchaseReimburse.amount.toFixed(2) }}</td>
                  <td colspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">人民币大写：</td>
                  <td colspan="6" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ purchaseReimburse.capitalAmount }}</td>
                </tr>
                <tr>
                  <td rowspan="5" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">报销方式</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">冲抵应收/应付</td>
                  <td colspan="1" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">客户名称</td>
                  <td colspan="4" style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">冲抵备用金</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">应退/补金额</td>
                  <td colspan="4" style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                </tr>
                <tr>
                  <td rowspan="3"  style="padding: 5px;text-align: center;position: relative;font-size: 14px;">转账</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">收款人名称</td>
                  <td colspan="4" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ purchaseReimburse.bankAccoutName }}</td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">收款人开户行</td>
                  <td colspan="4" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ purchaseReimburse.openBank }}</td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">收款人账号</td>
                  <td colspan="4" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ purchaseReimburse.bankAccout }}</td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 16.66%;">总经理核准</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 16.66%;">财务经理</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 16.66%;">生产厂长</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 16.66%;">会计</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 16.66%;">部门主管</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;width: 16.66%;">经办人</td>
                </tr>
                <tr style="height: 50px">
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">
                    <img style="height: 50px;object-fit: cover;" src="https://fzjx.oss-cn-hangzhou.aliyuncs.com/order/20211111/211111053557079580.png" alt="">
                  </td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ data.factoryManager  }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ data.financeName }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ data.handlerName  }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!--付款申请单-->
        <div v-if="applyPayType === 1" class="expenseAccount" style="page-break-after:always;margin-top: 40px">
          <div class="title" align="center" style="font-weight: bold;margin-top: 15px;">福州杰生旗帜工艺品有限责任公司</div>
          <div class="row" style="margin: 10px 0;display: flex;justify-content: space-between;align-items: center">
            <div class="col" style="flex: 1;overflow: hidden;"></div>
            <div class="col title" style="flex: 1;overflow: hidden;text-align: center;font-weight: bold">付款申请单</div>
            <div class="col" style="flex: 1;overflow: hidden;text-align: right">
              凭证编号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>
          <div class="row" style="margin-bottom: 10px;display: flex;justify-content: space-between;margin-top: 20px">
            <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
              <div class="label" style="width: 70px;font-size: 14px;">部门：</div>
              <div class="value" style="flex: 1;font-size: 14px;">采购部</div>
            </div>
            <div class="col" style="padding: 0 5px;flex: 1;display: flex;align-items: flex-start;">
              <div class="label" style="width: 70px;font-size: 14px;margin-left: 165px">时间：</div>
              <div class="value" style="flex: 1;font-size: 14px;">{{ this.currentdate }}</div>
            </div>
          </div>
          <div class="content">
            <div class="table">
              <table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-color: #000;width: 100%;">
                <tr>
                  <td rowspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">转账</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">收款单位</td>
                  <td colspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ applyPayBill.bankAccoutName }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">付款日期：</td>
                  <td colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ applyPayBill.reatedTime  }}</td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">账号</td>
                  <td colspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ applyPayBill.bankAccout }}</td>
                  <td colspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">预计冲账日：</td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">开户银行</td>
                  <td colspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ applyPayBill.openBank }}</td>
                  <td colspan="3" style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                </tr>
                <tr>
                  <td rowspan="2"  style="padding: 5px;text-align: center;position: relative;font-size: 14px;">付款申请</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">合同号</td>
                  <td colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ applyPayBill.purchaseBillNo }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">合同金额</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ data.payAccount === '预付'? data.totalAmount : applyPayBill.contractAmount }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">已付金额</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">本次申请</td>
                  <td colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ data.payAccount === '预付'? data.payAmount : applyPayBill.applyAmount }}</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">未付金额</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">备注</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">预付款</td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">本次付款人民币：</td>
                  <td colspan="7" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">{{ applyPayBill.capitalAmount }}</td>
                </tr>
                <tr>
                  <td colspan="8" style="padding: 5px;text-align: left;position: relative;font-size: 14px;height: 100px;">用途：<span>{{ applyPayBill.purpose }}</span></td>
                </tr>
                <tr>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">财务经理</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">总经理核准</td>
                  <td colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">生产厂长</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">会计</td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">部门主管</td>
                  <td colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">经办人</td>
                </tr>
                <tr style="height: 50px">
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">
                    <img style="height: 50px;object-fit: cover;" src="https://fzjx.oss-cn-hangzhou.aliyuncs.com/order/20211111/211111053557079580.png" alt="">
                  </td>
                  <td colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">
                    {{ data.factoryManager  }}
                  </td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;">
                    {{ data.financeName  }}
                  </td>
                  <td style="padding: 5px;text-align: center;position: relative;font-size: 14px;"></td>
                  <td colspan="2" style="padding: 5px;text-align: center;position: relative;font-size: 14px;">
                    {{ data.handlerName  }}
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'print-form.vue',
  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)
    },
    data (val) {
      this.currentdate = this.$dayjs().format('YYYY-MM-DD')
      this.applyPurchase = val.applyPurchase
      this.purInStock = val.purInStock
      this.purchaseReimburse = val.purchaseReimburse
      this.applyPayBill = val.applyPayBill
      this.applyPayType = val.applyPayType
    }
  },
  data () {
    return {
      modal: false,
      applyPurchase: {},
      purInStock: {},
      purchaseReimburse: {},
      applyPayBill: {},
      currentdate: '',
      applyPayType: ''
    }
  },
  methods: {
  },
  mounted () {
  }
}
</script>

<style lang="less"  scoped>
  .all {
  }
</style>
