<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="withdraw_no"
      label="提现单号"
    >
    </el-table-column>
    <el-table-column
      prop="out_trade_no"
      label="订单号"
    >
    </el-table-column>
    <el-table-column
      label="用户"
      width="200"
      className="f-c"
    >
      <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="user_mobile"
      label="手机号"
    >
    </el-table-column>
    <el-table-column
      label="提现金额"
    >
      <template slot-scope="scope">
        {{ scope.row.money | moneyYuan}}
      </template>
    </el-table-column>
    <el-table-column
      label="提现状态"
    >
      <template slot-scope="scope">
                    <span :class="{status:true,red:scope.row.status === 2,green:scope.row.status === 1}">
                    {{ scope.row.status | filterStatus}}
                    </span>
      </template>
    </el-table-column>
    <el-table-column
      label="提现成功时间"
    >
      <template slot-scope="scope">
        {{ scope.row.success_at }}
      </template>
    </el-table-column>
    <el-table-column
      label="提现时间"
    >
      <template slot-scope="scope">
        {{ scope.row.created_at }}
      </template>
    </el-table-column>
    <el-table-column
      prop="reason"
      label="失败原因"
    >
    </el-table-column>
    <el-table-column
      prop="desc"
      label="备注"
    >
    </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
  import {getWithdrawListApi} from "../../service/api";
  export default {
    name: "sourceDialog",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        detail:[]
      }
    },
    filters:{
      moneyYuan:function (value) {
        if(!value){
          return '';
        }
        return value = (value/100).toFixed(2) + '元';
      },
      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 = {
          out_trade_no:this.dialogObj.out_trade_no,
          limit:200
        };
        getWithdrawListApi(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>