<!-- 采购入库单 -->
<template>
  <modal v-model="modal" :footer-hide="true" width="950px" class-name="vertical-center-modal">
    <!--  表单主要内容  -->
    <div class="content" ref="print">
      <div class="title">订单详情</div>
      <div class="row">
        <span>账单时间：{{ data.billTime }}</span>
        <span>付款期限：{{ data.payLimitTime }}</span>
      </div>
      <div class="table">
        <div class="tr">
          <div class="th">序号</div>
          <div class="th">供应商</div>
          <div class="th">合同编号</div>
          <div class="th">物料编码</div>
          <div class="th">物料名称</div>
          <div class="th">采购数量</div>
          <div class="th">单价</div>
          <div class="th">合同金额</div>
          <div class="th">质检金额</div>
          <div class="th">未付金额</div>
          <div class="th">冲抵金额</div>
          <div class="th">实际付款金额</div>
          <div class="th">审批状态</div>
        </div>
        <div class="table-item" v-for="(item, index) in tableData" :key="index">
          <div class="tr" v-for="(row, rowIndex) in item.billDetails" :key="rowIndex">
            <div class="td">{{ row.rowNo }}</div>
            <div class="td">{{ row.supplierName }}</div>
            <div class="td">{{ row.purchaseBillNo }}</div>
            <div class="td">{{ row.materialCode }}</div>
            <div class="td">{{ row.materialName }}</div>
            <div class="td">{{ row.purchaseQty }}</div>
            <div class="td">{{ row.price }}</div>
            <div class="td">{{ row.totalAmount }}</div>
            <div class="td">{{ row.adjustAmount }}</div>
            <div class="td">{{ row.unPayAmount }}</div>
            <div class="td">{{ row.balanceAmount }}</div>
            <div class="td">{{ row.actPayAmount }}</div>
            <div class="td">{{ row.applyPayState }}</div>
          </div>
          <div class="tr">
            <div class="td total"></div>
            <div class="td total">{{ item.supplierName }}</div>
            <div class="td total">合计</div>
            <div class="td total"></div>
            <div class="td total"></div>
            <div class="td total"></div>
            <div class="td total"></div>
            <div class="td total"></div>
            <div class="td total">{{ item.totalAmount }}</div>
            <div class="td total"></div>
            <div class="td total"></div>
            <div class="td total">{{ item.totalPayAmount }}</div>
            <div class="td total"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <span></span>
        <span>应付总额：{{ data.totalAmount }}元</span>
      </div>
    </div>
    <div class="footer">
      <Button class="btn" type="primary" @click="cancel">关闭</Button>
      <Button @click="exportExcel" class="btn" type="primary">导出Excel</Button>
      <Button @click="cfm" class="btn" type="primary">打印</Button>
    </div>
    <vue-easy-print ref="print">
      <template>
        <div class="content" ref="print">
          <div class="title">订单详情</div>
          <div class="row">
            <span>账单时间：{{ data.billTime }}</span>
            <span>付款期限：{{ data.payLimitTime }}</span>
          </div>
          <div class="table">
            <div class="tr">
              <div class="th">序号</div>
              <div class="th">供应商</div>
              <div class="th">合同编号</div>
              <div class="th">物料编码</div>
              <div class="th">物料名称</div>
              <div class="th">采购数量</div>
              <div class="th">单价</div>
              <div class="th">合同金额</div>
              <div class="th">质检金额</div>
              <div class="th">未付金额</div>
              <div class="th">冲抵金额</div>
              <div class="th">实际付款金额</div>
              <div class="th">审批状态</div>
            </div>
            <div class="table-item" v-for="(item, index) in tableData" :key="index">
              <div class="tr" v-for="(row, rowIndex) in item.billDetails" :key="rowIndex">
                <div class="td">{{ row.rowNo }}</div>
                <div class="td">{{ row.supplierName }}</div>
                <div class="td">{{ row.purchaseBillNo }}</div>
                <div class="td">{{ row.materialCode }}</div>
                <div class="td">{{ row.materialName }}</div>
                <div class="td">{{ row.purchaseQty }}</div>
                <div class="td">{{ row.price }}</div>
                <div class="td">{{ row.totalAmount }}</div>
                <div class="td">{{ row.adjustAmount }}</div>
                <div class="td">{{ row.unPayAmount }}</div>
                <div class="td">{{ row.balanceAmount }}</div>
                <div class="td">{{ row.actPayAmount }}</div>
                <div class="td">{{ row.applyPayState }}</div>
              </div>
              <div class="tr">
                <div class="td total"></div>
                <div class="td total">{{ item.supplierName }}</div>
                <div class="td total">合计</div>
                <div class="td total"></div>
                <div class="td total"></div>
                <div class="td total"></div>
                <div class="td total"></div>
                <div class="td total"></div>
                <div class="td total">{{ item.totalAmount }}</div>
                <div class="td total"></div>
                <div class="td total"></div>
                <div class="td total">{{ item.totalPayAmount }}</div>
                <div class="td total"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <span></span>
            <span>应付总额：{{ data.totalAmount }}元</span>
          </div>
        </div>
      </template>
    </vue-easy-print>
  </modal>
</template>

<script>
import VueEasyPrint from 'vue-easy-print'
import { GetPaymentBillDetail } from '@/api/applyPurchase'
import { exportExcel } from '@/libs/util'
export default {
  data () {
    return {
      modal: false,
      tableData: []
    }
  },
  components: {
    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) {
        GetPaymentBillDetail({
          billTime: this.data.billTime
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.result
          }
        })
      }
    }
  },
  methods: {
    exportExcel () {
      let columns = [
        {
          title: '序号',
          key: 'rowNo'
        },
        {
          title: '供应商',
          key: 'supplierName'
        },
        {
          title: '合同编号',
          key: 'purchaseBillNo'
        },
        {
          title: '物料编码',
          key: 'materialCode'
        },
        {
          title: '物料名称',
          key: 'materialName'
        },
        {
          title: '采购数量',
          key: 'purchaseQty'
        },
        {
          title: '单价',
          key: 'price'
        },
        {
          title: '金额',
          key: 'amount'
        },
        {
          title: '付款金额',
          key: 'payAmount'
        },
        {
          title: '审批状态',
          key: 'applyPayState'
        }
      ]
      let data = []
      this.tableData.forEach(item => {
        data.push(...item.billDetails)
      })
      exportExcel(columns, data, '合同账单详情')
    },
    cfm () {
      this.$refs.print.print()
    },
    cancel () {
      this.modal = false
    }
  }
}
</script>

<style lang="less" scoped>
  .content {
    .title {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    .row {
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .col {
        flex: 1;
      }
    }
    .table {
      margin-bottom: 5px;
      .table-item {
        &:last-child {
          border-bottom: 1px solid #909090;
        }
      }
      .tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #909090;
        border-bottom: none;
        .td, .th {
          flex: 1;
          padding: 0 5px;
          width: 100%;
          text-align: center;
          border-right: 1px solid #909090;
          height: 40px;
          line-height: 40px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          &:last-child {
            border-right: 0;
          }
          &:nth-child(2) {
            flex: 3;
          }
          &:nth-child(3) {
            flex: 3;
          }
          &:nth-child(4) {
            flex: 2;
          }
          &:nth-child(5) {
            flex: 3;
          }
          &:nth-child(6) {
            flex: 2;
          }
          &:nth-child(8) {
            flex: 2;
          }
          &:nth-child(9) {
            flex: 3;
          }
          &:nth-child(10) {
            flex: 2;
          }
          &:nth-child(11) {
            flex: 2;
          }
          &:nth-child(12) {
            flex: 3;
          }
          &:nth-child(13) {
            flex: 2;
          }
        }
        .th {
          background-color: #d7d7d7;
        }
        .total {
          background-color: #f8cc14;
        }
      }
    }
  }
  .footer {
    padding-top: 2vw;
    width: 100%;
    display: flex;
    justify-content: center;
    .btn {
      border: none;
      width: 9vw;
      min-width: 100px;
      height: 2vw;
      min-height: 32px;
      font-size: .8vw;
      margin-right: 30px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
</style>
