<template>
  <!-- 详情 -->
  <div class="expenseDetail">
    <a-descriptions :column="1" size="default">
      <a-descriptions-item label="费用单号">{{ detailsData&&detailsData.accountExpensesNo || '--' }}</a-descriptions-item>
      <a-descriptions-item label="费用类型">
        <div v-if="detailsData&&(detailsData.expensesTypeName1 || detailsData.expensesTypeName2 || detailsData.expensesTypeName3)">
          {{ detailsData&&detailsData.expensesTypeName1 ? detailsData.expensesTypeName1 : '' }}
          <span v-if="(detailsData&&detailsData.expensesTypeName1) && (detailsData&&detailsData.expensesTypeName2)"> > </span>
          {{ detailsData&&detailsData.expensesTypeName2 ? detailsData.expensesTypeName2 : '' }}
          <span v-if="(detailsData&&detailsData.expensesTypeName2) && (detailsData&&detailsData.expensesTypeName3)"> > </span>
          {{ detailsData&&detailsData.expensesTypeName3 ? detailsData.expensesTypeName3 : '' }}
        </div>
        <span v-else>--</span>
      </a-descriptions-item>
      <a-descriptions-item label="费用金额">￥{{ detailsData&&detailsData.settleAmount || '--' }}</a-descriptions-item>
      <a-descriptions-item label="单据状态">{{ detailsData&&detailsData.stateDictValue || '--' }}</a-descriptions-item>
      <a-descriptions-item label="备注">{{ detailsData&&detailsData.remark || '--' }}</a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
import { findExpenseDetailBySn } from '@/api/settleExpense'
export default {
  name: 'ExpenseManagementDetail',
  props: {
    outBizSn: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      detailsData: null
    }
  },
  mounted () {
    if (this.outBizSn) {
      this.getDetail()
    }
  },
  methods: {
    //  获取详情
    getDetail () {
      findExpenseDetailBySn({ sn: this.outBizSn }).then(res => {
        if (res.status == 200) {
          this.detailsData = res.data
        } else {
          this.detailsData = null
        }
      })
    }
  }
}
</script>

<style lang="less">
  .expenseDetail{
    padding: 40px 30px;
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
  }
</style>
