<template>
  <div class="putForward">
    <el-form :model="search" class="demo-form-inline" inline label-width="80px">
          <el-form-item label="提现单号">
            <el-input v-model="search.withdraw_no" placeholder="提现单号"></el-input>
          </el-form-item>
          <el-form-item label="订单号">
            <el-input v-model="search.out_trade_no" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="search.status" placeholder="用户名/手机/课程名称" @change="onSearch">
              <el-option
                v-for="item in liStatus"
                :key="item.status"
                :label="item.label"
                :value="item.status">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input v-model="search.user_id" placeholder="用户ID"></el-input>
          </el-form-item>
          <el-form-item label="提现金额">
            <el-input v-model="search.money" placeholder="提现金额"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="exportTable">导出</el-button>
          </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      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-column
        label="操作"
        v-if="!$store.state.readonly"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 0"
            @click="checkMoney(scope.row.id, scope.row.desc)"
            type="text"
            size="small">
            审核
          </el-button>
          <el-button
            @click="addDesc(scope.row.id, scope.row.desc)"
            type="text"
            size="small">
            添加备注
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <el-dialog :title="dialogTitle" v-if="showDialog" :visible.sync="showDialog">
      <el-form ref="saveuser" :model="nowObj" label-width="70px">
        <el-form-item label="订单状态" v-if="!showDesc">
          <template>
            <el-radio-group v-model="nowObj.status">
              <el-radio :label="1">提现成功</el-radio>
              <el-radio :label="2">提现失败</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="失败理由" v-if="nowObj.status === 2 &&  !showDesc">
          <el-input type="textarea" rows="3" v-model="nowObj.reason" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" v-if="showDesc">
          <el-input type="textarea" rows="3" v-model="nowObj.desc" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSave(showDesc)">保 存</el-button>
        <el-button @click="showDialog = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getWithdrawListApi,editOrderDescApi,withdrawApi,exportExcelApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    name: "putForward",
    data(){
      return {
        nowPage: 1,
        total: 0,
        limit: 10,
        search:{
          key:'',
          status:1
        },
        liStatus:[
          {
            label: '全部',
            status: ''
          },
          {
            label: '申请中',
            status: 0
          },{
            label: '提现成功',
            status: 1
          },{
            label: '提现失败',
            status: 2
          }
        ],
        tableData:[],
        showDialog:false,
        showDesc:false,
        dialogTitle:'审核',
        nowObj:{
          id:'',
          status:1,
          reason:'',
          desc:""
        },
        page:{
          current:1,
          pageSize:100,
          total:0
        },
      }
    },
    components:{
      page
    },
    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;
      }
    },
    mounted:function(){
      this.getList()
    },
    methods:{
      onSizeChange(val){
        this.nowPage = 1;
        this.limit = val;
        this.getList()
      },
      exportTable(){
        let json = {};
        if(this.search.withdraw_no){
          json.withdraw_no = this.search.withdraw_no
        }
        if(this.search.out_trade_no){
          json.out_trade_no = this.search.out_trade_no
        }
        if(this.search.status || this.search.status === 0){
          json.status = this.search.status
        }
        if(this.search.user_id){
          json.user_id = this.search.user_id
        }
        if(this.search.money){
          json.money = parseFloat(this.search.money) * 100
        }
        exportExcelApi('/api/public/withdraw/export',json)
      },
      //获取列表
      getList:function () {
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if(this.search.withdraw_no){
          json.withdraw_no = this.search.withdraw_no
        }
        if(this.search.out_trade_no){
          json.out_trade_no = this.search.out_trade_no
        }
        if(this.search.status || this.search.status === 0){
          json.status = this.search.status
        }
        if(this.search.user_id){
          json.user_id = this.search.user_id
        }
        if(this.search.money){
          json.money = parseFloat(this.search.money) * 100
        }
        getWithdrawListApi(json).then(res=>{
          this.tableData = res.list;
          this.total = res.total;
        })
      },
      // 查询按钮
      onSearch(){
        this.nowPage = 1;
        //调用查询接口
        this.getList();
      },
      //点击审核
      checkMoney(id){
        this.nowObj.id = id;
        this.showDesc = false;
        this.showDialog=true;

      },
      //点击备注
      addDesc(id,desc){
        this.nowObj.id = id;
        this.nowObj.desc = desc;
        this.showDesc = true;
        this.showDialog=true;
      },
      //分页切换
      onPageChange(current){
        this.nowPage = current;
        this.page.current=current;
        this.getList();
      },
      // 弹框请求回调
      doCallback:function(){
        this.nowObj.id = '';
        this.nowObj.status = 1;
        this.nowObj.reason = '';
        this.nowObj.desc = '';
        this.page.current = 1;
        this.showDialog = false;
        this.getList();
        this.$message({
          message: '提交成功',
          type: 'success'
        });
      },
      // 弹框保存按钮
      onSave:function ( desc ) {
        // 添加备注
        if(desc){
          let data = {
            desc:this.nowObj.desc,
          };
          if(data.desc === '' || data.desc == null){
            this.$message.error( '请填写备注' );
            return false
          }
          editOrderDescApi(this.nowObj.id,'withdraw',data).then(res=>{
            this.doCallback()
          });
          // 审核
        }else{
          let data = {
            reason:this.nowObj.reason,
            status:this.nowObj.status,
          };
          if((data.reason === '' || data.reason == null) && data.status === 2){
            this.$message.error( '请填写失败理由' );
            return false
          }else {
            data.reason = '';
          }
          withdrawApi(this.nowObj.id, data ).then(res=>{
            this.doCallback()
          })
        }
      }
    }
  }
</script>

<style scoped>
  .putForward {
    padding: 20px 0;
  }
  .status{
    color: #e9a038;
  }
  .status.red{
    color: #c30005;
  }
  .status.green{
    color: #00ac00;
  }
  .avatar{
    width: 50px;
    margin-right: 5px;
    border-radius: 50%;
  }
</style>
<style>
  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>