<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
        prop="user_id"
        label="用户ID">
      </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.out_trade_no, 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=>{
            if( res.data.result === 'success' ){
              this.$message({
                type: 'success',
                message: '编辑备注成功'
              });
            }else{
              this.$message.error( res.data.message );
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消编辑备注'
          });
        });
      },
      getRefundList(){
        getRefundListApi().then((res)=>{
            this.total = res.total;
        })
      }
    }
  }
</script>

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