<template>
  <el-dialog
    title="退款详情"
    center
    append-to-body
    :visible.sync="dialogObj.show"
    width="90%">
    <el-table :data="detail">
      <el-table-column prop="refund_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 prop="order_money" label="订单金额">
        <template slot-scope="scope">
          {{parseFloat(scope.row.order_money / 100)}}元
        </template>
      </el-table-column>
      <el-table-column prop="refund_money" label="退款金额">
        <template slot-scope="scope">
          {{parseFloat(scope.row.refund_money / 100)}}元
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="备注"></el-table-column>
      <el-table-column label="退款状态">
        <template slot-scope="scope">
          {{scope.row.status|filterStatus}}
        </template>
      </el-table-column>
      <el-table-column prop="success_at" label="退款成功时间"></el-table-column>
    </el-table>

  </el-dialog>
</template>

<script>
  import {getRefundListApi} from "../../service/api";

  export default {
    name: "refundDetail",
    props: [
      'dialogObj'
    ],
    data() {
      return {
        detail: []
      }
    },
    filters: {
      filterStatus: function (value) {
        let msg = '';
        if (value === 0) {
          msg = '退款中'
        } else if (value === 1) {
          msg = '退款成功'
        } else if (value === 2) {
          msg = '退款失败'
        }
        return msg;
      }
    },
    // mounted(){
    //   this.initPage()
    // },
    methods: {
      initPage() {
        let json = {
          out_trade_no: this.dialogObj.out_trade_no,
          limit: 200
        };
        if (this.dialogObj.user_id) {
          json.user_id = this.dialogObj.user_id
        }
        getRefundListApi(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>
