<template>
  <div class="refund">
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="out_trade_no"
        label="out_trade_no">
      </el-table-column>
      <el-table-column
        prop="refund_no"
        label="退款编号">
      </el-table-column>
      <el-table-column
        label="用户信息"
      >
        <template slot-scope="scope">
          id:{{scope.row.user_id}}
          <br>
          名称:{{scope.row.user_nickname}}
        </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
        prop="callback"
        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-column
        label="操作"
        min-width="80"
      >
        <template slot-scope="scope">
          <el-button
            @click="editComment(scope.row.id, scope.row.desc)"
            type="warning"
            plain
            size="mini">
            备注
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total"/>
  </div>
</template>

<script>
  import {getRefundListApi,editOrderDescApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    name: "index",
    components:{
      page
    },
    data(){
      return {
        nowPage: 1,
        total: 0,
        list: [
          {
            out_trade_no: '111',
            refund_no: '111',
            user_id: '1',
            order_money: 100,
            refund_money: 100,
            desc: 'sdfaf',
            callback: 'ewewew',
            status: 1,
            success_at: '2018-09-01'
          }
        ]
      }
    },
    filters:{
      filterStatus:function (value) {
        let msg = '';
        if(value === 0){
          msg = '退款中'
        }else if(value === 1){
          msg = '退款成功'
        }else if(value === 2){
          msg = '退款失败'
        }
        return msg;
      }
    },
    mounted(){
      this.getRefundList()
    },
    methods: {
      editComment(id, desc) {
        this.$prompt('编辑备注', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: desc
        }).then(({ value }) => {
          editOrderDescApi(id,'refund',{desc: value}).then(res=>{
            this.$message({
              type: 'success',
              message: '编辑备注成功'
            });
            this.getRefundList()
          });
        })
      },
      getRefundList(){
        getRefundListApi().then((res)=>{
          this.total = res.total;
          this.list = res.list
        })
      }
    }
  }
</script>

<style scoped>
  .refund{
    margin: 10px;
  }
</style>
