<template>
  <div class="allowanceDetails">
    <a-button type="primary" @click="back()"><img style="margin-top:-4px;margin-right: 6px;width: 14px" src="../../../assets/back.png"/>返回</a-button>
    <div class="title">津贴详情</div>
    <div class="allowanceDetailsBox">
      <div>
        <label>成员</label>
        <div>{{allowanceDetails.recipient}}</div>
      </div>
      <div>
        <label>金额</label>
        <div>{{allowanceDetails.money.toFixed(2)}}</div>
      </div>
      <div>
        <label>截止日期</label>
        <div>{{ allowanceDetails.endTime }}</div>
      </div>
      <div>
        <label>津贴类型</label>
        <div>{{allowanceDetails.type === 'TRAVEL' ? '交通补贴' : '餐补'}}</div>
      </div>
      <div>
        <label>单号</label>
        <div>{{allowanceDetails.grantNumber}}</div>
      </div>
      <div>
        <label>经办人</label>
        <div>{{allowanceDetails.agentId}}</div>
      </div>
      <div>
        <label>发放时间</label>
        <div>{{ allowanceDetails.createTime }}</div>
      </div>
      <div>
        <label>备注</label>
        <div>{{allowanceDetails.remark}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'allowanceDetails',
  data () {
    return {
      allowanceDetails: ''
    }
  },
  watch: {},
  computed: {},
  created: function () {
    this.allowanceDetails = this.$route.params.allowanceDetails
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  font-weight: bold;
  margin-top: 20px;
}
.allowanceDetailsBox{
  width: 100%;
  line-height: 30px;
}
.allowanceDetailsBox>div{
  display: flex;
  margin: 10px 0;
}
.allowanceDetailsBox>div>label{
  width: 80px;
  text-align: right;
  font-weight: bold;
  margin-right: 20px;
}
.allowanceDetailsBox>div>div{
  flex: 1;
}
</style>