<template>
  <a-modal
    :title="modalTitle"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    class="ant-modal2"
    @cancel="handleCancel"
  >
    <detail-list title="" :col="2">
      <detail-list-item term="报销事项">{{ BaseTool.Object.getField(itemMap,model.item) }}</detail-list-item>
      <detail-list-item term="币种">{{ BaseTool.Object.getField(moneyTypeMap,model.moneyType) }}</detail-list-item>
      <detail-list-item term="汇率">{{ BaseTool.Amount.formatter(model.exchangeRate) }}</detail-list-item>
      <detail-list-item term="报销款金额">{{ BaseTool.Amount.formatter(model.money) }}</detail-list-item>
      <detail-list-item term="报销金额(按记账主币)">{{ BaseTool.Amount.formatter(model.accountMoney) }}</detail-list-item>
      <detail-list-item term="报销时间">{{ model.payTime }}</detail-list-item>
      <detail-list-item term="发票号码">{{ model.invoiceNo }}</detail-list-item>
      <detail-list-item term="经办人名称">{{ model.executorName }}</detail-list-item>
      <detail-list-item term="发票"><div v-for="item in invoiceUrls" :key="item.url"><a target="_blank" :href="item.url">{{ item.name }}</a></div></detail-list-item>
      <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
      <detail-list-item term="更新人名称">{{ model.updateUserName }}</detail-list-item>
      <detail-list-item term="更新时间">{{ model.updateTime }}</detail-list-item>
    </detail-list>

    <title-divider title="采购单明细" width="120px"></title-divider>
    <purchase-reimburse-order ref="paymentOrder" :viewFlag="true"/>

    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">返回</a-button>
    </template>
  </a-modal>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import PurchaseReimburseOrder from '@/views/purchase/purchase-reimburse-order/PurchaseReimburseOrder'
const DetailListItem = DetailList.Item

export default {
  name: 'PurchaseReimburseDetail',
  components: {
    DetailList,
    PurchaseReimburseOrder,
    DetailListItem
  },
  data () {
    return {
      confirmLoading: false,
      mdl: {},
      modalTitle: null,
      visible: false,
      // 下拉框map
      itemMap: {},
      invoiceUrls: [],
      moneyTypeMap: {},
      model: {
        'demandPlanId': null,
        'purchasePlanId': null,
        'purchaseApplyId': null,
        'purchaseOrderId': null,
        'contractId': null,
        'contractNo': null,
        'item': null,
        'money': null,
        'accountMoney': null,
        'dollarExchangeRate': null,
        'moneyType': null,
        'exchangeRate': null,
        'payTime': null,
        'invoiceNo': null,
        'executorId': null,
        'executorName': null,
        'invoiceUrl': null,
        'remark': null,
        'delFlag': null,
        'createdUserId': null,
        'updateUserId': null,
        'updateUserName': null,
        'updateTime': null
      }
    }
  },
  created () {
    // 下拉框map
    this.itemMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REIMBURSE_ITEM)
    this.moneyTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.MONEY_TYPE)
  },
  methods: {
    base (record) {
      this.visible = true
      this.modalTitle = '详情'
      this.model = record
      const invoiceUrl = record.invoiceUrl
      const invoiceName = record.invoiceName
      if (!invoiceUrl) {
        this.invoiceUrls = []
      } else {
        const invoiceUrls = []
        const urls = invoiceUrl.split(',')
        const names = invoiceName.split(',')
        for (let i = 0; i < urls.length; i++) {
          invoiceUrls.push({
            url: urls[i],
            name: names[i]
          })
        }
        this.invoiceUrls = invoiceUrls
      }
      this.$nextTick(() => {
        const modal = this.$refs.paymentOrder
        modal.base(record.id)
      })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
    }

  }
}
</script>
