<template>
  <!-- <a-modal :footer="null" v-model="isShow" width="850px"> -->
  <div class="container-print-view" style="width:100%;font-size: 12pt;position: fixed;font-family: auto;left:10000000px;padding:0;margin:0 auto;" id="printTest">
    <p class="container-title" style="text-align: center;font-size: 24px;font-weight: 600;">箭冠汽配企业费用报销单</p>
    <div class="container-info" style="width: 100%;border: 1px solid #000000;">
      <div class="container-info-basics" v-if="expenseInfo">
        <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">申请人：{{ expenseInfo&&expenseInfo.applyPersonName?expenseInfo.applyPersonName:'' }}</span>
          <span style="display: inline-block;border-right: none;padding: 10px;">申请部门：{{ expenseInfo&&expenseInfo.applyDepartmentName?expenseInfo.applyDepartmentName:'' }}</span>
        </div>
        <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用类型：{{ expenseInfo&&expenseInfo.expenseTypeDictValue?expenseInfo.expenseTypeDictValue:'' }}</span>
          <span style="display: inline-block;border-right: none;padding: 10px;">费用发生月份：{{ expenseInfo&&expenseInfo.expenseDate?expenseInfo.expenseDate.substring(0, 7):'' }}</span>
        </div>
        <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用单号：{{ expenseInfo&&expenseInfo.expenseAccountNo?expenseInfo.expenseAccountNo:'' }}{{ expenseInfo&&expenseInfo.stateDictValue?'（'+expenseInfo.stateDictValue+'）':'' }}</span>
          <span style="display: inline-block;border-right: none;padding: 10px;">合计金额：{{ (expenseInfo&&expenseInfo.applyExpenseTotal ||expenseInfo&&expenseInfo.applyExpenseTotal==0)?expenseInfo.applyExpenseTotal+'元':'' }}</span>
        </div>
        <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;overflow: hidden;">
          <div style="border-right: none;float: left;padding: 10px 0 10px 10px;">主题：</div>
          <div style="padding: 10px;text-align: center;font-weight: bold;">
            {{ expenseInfo&&expenseInfo.title?expenseInfo.title:'' }}
          </div>
        </div>
        <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
          <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;border-right: none;">详细说明：</span>
          <div style="padding:0 20px 20px;">
            <div v-for="(item,index) in expenseInfo.content" :key="index+'-content'">
              {{ item || '--' }}
            </div>
          </div>
        </div>
      </div>
      <div class="container-fytable" style="padding:0 10px;" v-if="fyListData">
        <p class="table-title">费用明细：</p>
        <table
          border="1"
          cellspacing="0"
          cellpadding="0"
          style="width: 100%;border-collapse: collapse;border: 1px solid black;font-size:10pt;text-align: center;"
          align="center">
          <thead>
            <tr>
              <th style="padding:5px 10px;width:8%;">序号</th>
              <th style="padding:5px 10px;width:26%;">记账方</th>
              <!-- <th style="padding:5px 10px;width:15%;">区域/省/市</th> -->
              <th style="padding:5px 10px;width:10%;">记账费用</th>
              <th style="padding:5px 10px;width:26%;">费用承担方</th>
              <th style="padding:5px 10px;width:20%;">产品信息</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in fyListData" :key="index">
              <td style="text-align: center;width:8%;">{{ index+1 }}</td>
              <td style="text-align: left;width:26%;padding:5px 10px;">
                <div>{{ item.accountTypeDictValue }}</div>
                <div>{{ item.accountName||'' }}</div>
                <div v-if="item.accountNameFnumber">({{ item.accountNameFnumber }})</div>
              </td>
              <!-- <td style="text-align: left;width:15%;padding:5px 10px;">
                <div>{{ item.subareaNames }}</div>
                <div>{{ item.provinceName }}</div>
                <div>{{ item.cityName }}</div>
              </td> -->
              <td style="text-align: right;width:10%;padding:5px 10px;">{{ item.expense||item.expense==0?item.expense.toFixed(2):'' }}</td>
              <td style="text-align: left;width:26%;padding:5px 10px;vertical-align: top;">
                <div v-for="(ditem,index) in item.detailSplitList" :key="ditem.id+'-'+index" style="padding: 3px 0;" >
                  {{ ditem.splitObjName }}
                  <span v-if="ditem.splitObjFnumber">({{ ditem.splitObjFnumber }})</span>
                  <span v-if="ditem.childDetailSplit&&ditem.childDetailSplit.splitObjName">/</span>
                  {{ ditem.childDetailSplit?ditem.childDetailSplit.splitObjName:'' }}: {{ ditem.childDetailSplit?ditem.childDetailSplit.splitAmount:ditem.splitAmount }}元
                </div>
              </td>
              <td style="text-align: left;width:20%;padding:5px 10px;vertical-align: top;">
                <div v-for="ditem in item.detailProductsList" :key="ditem.id" style="padding: 3px 0;">
                  <div v-if="ditem.productCode">{{ ditem.productCode }}: {{ ditem.expense }}元</div>
                  <div v-else-if="ditem.productBrandName">{{ ditem.productBrandName }}<span v-if="ditem.productTypeShowName">/</span>{{ ditem.productTypeShowName }}: {{ ditem.expense.toFixed(2) }}元</div>
                  <div v-else>{{ ditem.productTypeShowName }}: {{ ditem.expense }}元</div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="container-fytable" style="padding:0 10px 10px;" v-if="spListData">
        <p class="table-title">审批信息：</p>
        <table
          border="1"
          cellspacing="0"
          cellpadding="0"
          style="width: 100%;border-collapse: collapse;border: 1px solid black;font-size:10pt;text-align: center;"
          align="center">
          <thead>
            <tr style="height: 30px;padding: 5px;">
              <th style="padding:5px 10px;width:8%;">序号</th>
              <th style="padding:5px 10px;width:15%;text-align: left;">人员姓名</th>
              <th style="padding:5px 10px;width:15%;">人员类型</th>
              <th style="padding:5px 10px;width:10%;">状态</th>
              <th style="padding:5px 10px;width:17%;">审批意见</th>
              <th style="padding:5px 10px;width:15%;">附件</th>
              <th style="padding:5px 10px;width:20%;">时间</th>
            </tr>
          </thead>
          <tbody>
            <tr style="height: 30px;padding: 5px;" v-for="(item,index) in spListData" :key="index">
              <td style="padding:5px 10px;">{{ index+1||'' }}</td>
              <td style="padding:5px 10px;text-align: left;">{{ item.userName||'' }}</td>
              <td style="padding:5px 10px;">{{ item.userType||'' }}</td>
              <td style="padding:5px 10px;">{{ item.state||'' }}</td>
              <td style="padding:5px 10px;">{{ item.remark||'' }}</td>
              <td style="padding:5px 10px;">{{ item.hasAttachments!= '0' ? '请在钉钉中查看附件内容' : '--' }}</td>
              <td style="padding:5px 10px;">{{ item.date||'' }}</td>
            </tr></tbody>
        </table>
      </div>
    </div>
  </div>
  <!-- </a-modal> -->
</template>

<script>
import { expenseAcctDetailFindList, getProcessInstance } from '@/api/expenseManagement'
export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    detailSn: {
      type: [Number, String],
      default: ''
    },
    detailData: {
      type: Object,
      default: () => { return null }
    }
  },
  data () {
    return {
      isShow: this.showModal,
      fyListData: [],
      spListData: [],
      expenseInfo: null
    }
  },
  methods: {
    pageInfo () {
      this.getFyList()
      if (this.expenseInfo.state != 'WAIT_SUBMIT') {
        this.getSpList()
      }
    },
    getFyList () {
      expenseAcctDetailFindList({ expenseAccountSn: this.detailSn }).then(res => {
        if (res.status == 200) {
          this.fyListData = res.data
        } else {
          this.fyListData = []
        }
      })
    },
    getSpList () {
      getProcessInstance({ businessType: 'EXPENSES', businessSn: this.detailSn }).then(res => {
        if (res.status == 200) {
          this.spListData = res.data
        } else {
          this.spListData = []
        }
      })
    }
  },
  // mounted () {
  //   this.pageInfo()
  // },
  watch: {
    detailData (nVal, oVal) {
      if (nVal) {
        this.expenseInfo = nVal
        this.fyListData = []
        this.spListData = []
        this.pageInfo()
      }
    }
  }
}
</script>
