<template>
  <el-dialog
    title="优惠券详情"
    center
    append-to-body
    :visible.sync="dialogObj.show"
    width="90%">
    <el-table
      :data="detail"
      style="width: 100%">
      <el-table-column
        prop="coupon_no"
        label="优惠券码">
      </el-table-column>
      <el-table-column
        prop="out_trade_no"
        label="订单号">
      </el-table-column>
      <el-table-column
        label="用户信息"
        min-width="140"
        className="userInfo"
      >
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.user_avatar">
          {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
        </template>
      </el-table-column>
      <el-table-column
        label="优惠券金额">
        <template slot-scope="scope">
          {{parseFloat(scope.row.money / 100)}}元
        </template>
      </el-table-column>
      <el-table-column
        label="使用状态">
        <template slot-scope="scope">
          {{scope.row.status|filterStatus}}
        </template>
      </el-table-column>
      <el-table-column
        prop="use_at"
        label="使用时间">
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
  import {getCouponListApi} from "../../service/api";
  export default {
    name: "sourceDialog",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        detail:[]
      }
    },
    mounted(){
      this.initPage()
    },
    filters:{
      filterStatus:function (value) {
        let msg = '';
        if(value === 0){
          msg = '未使用'
        }else if(value === 1){
          msg = '已使用'
        }else if(value === 2){
          msg = '禁用'
        }
        return msg;
      }
    },
    methods:{
      initPage(){
        let json = {
          order_coupon_id:this.dialogObj.order_coupon_id,
          limit:10000
        };
        getCouponListApi(json).then(res=>{
          this.detail = res.list
        })
      }
    },
    watch:{
      'dialogObj.show'(value){
        if(value === true){
          this.initPage()
        }
      }
    }

  }
</script>

<style scoped>
  .avatar {
    width:50px;
    height: 50px;
    border-radius: 50%;
  }
</style>
