<template>
  <div>
    <Modal v-model="is_exchangeMD" title="兑换记录详情" id="exchangeDetail" :width="600">
      <div style="max-height:400px;overflow:auto">
        <Table :columns="exchangeList" :data="exchangeData" border style="max-height:400px;overflow:auto"></Table>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    is_exchange: Boolean,
    honor_id: Number,
  },
  data() {
    return {
      exchangeList: [
        {
          title: "兑换时间",
          key: "create_time",
          width:170
        },
        {
          title: "兑换特权",
          render:(h,params)=>{
            return h('div',params.row.privilege.map((it)=>{
              return h('p',it.title)
            }))
          },
          width:171
        },
        {
          title: "所需荣誉值",
          key: "honor_num",
          width:100
        },
        {
          title: "特权状态",
          width:100,
          render: (h, params) => {
            if(params.row.status==0){
              return h('span','待审核')
            }
            if(params.row.status==1){
              return h('span','待发放')
            }
            if(params.row.status==2){
              return h('span','已驳回')
            }
            if(params.row.status==3){
              return h('span','已发放')
            }
          }
        }
      ],
      exchangeData: []
    };
  },
  computed: {
    is_exchangeMD: {
      get() {
        return this.is_exchange;
      },
      set(val) {
        this.$emit("update:is_exchange", val);
      }
    }
  },
  watch:{
    is_exchangeMD(n){
      if(n&&this.honor_id){
        this.getShowManagerRecord(this.honor_id)
      }
    }
  },
  methods:{
    getShowManagerRecord(id){
      this.$api.getShowManagerRecord({id}).then(data=>{
        if(data.code==200){
          this.exchangeData=data.data
        }else{
          this.$Message.info(data.msg)
        }
      })
    }
  }
};
</script>
<style>
#exchangeDetail .ivu-modal-footer{
  display: none
}

#exchangeDetail .ivu-table td{
  /* border-bottom: none!important */
}

#exchangeDetail .ivu-table-wrapper{
  border: none;
  padding:30px 28px 30px 28px;
}
</style>

