@extends('layouts.base')
<style>
    .user{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        height: 80px;
    }
    .user .user-avatar{
        height: 50px;
        width: 50px;
        margin-right: 5px;
        border-radius: 50%;
        overflow: hidden;
    }
    .user .user-avatar .avatar-image{
        width: 100% !important;
        height: 100% !important;
    }
    .user .user-info{
        height: 50px;
        text-align: left;
    }
    .user .user-info .user-nickname{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user .user-info .user-status{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .panel-body .label{
        display: inline-block;
        margin-bottom: 2px;
        border-radius: 2px;
        font-size: 14px!important;
        padding: 5px !important;
        text-transform: uppercase;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
    }
    .el-pagination{
        text-align: right!important;
        margin-top: 20px!important;
    }
    .panel-body{
        padding-top: 0;
        margin-bottom: 30px;
        overflow: auto;
        padding-right: 30px;
    }
</style>
@section('content')
<div class="w1200 m0a" id="mainContent">
    <div class="panel panel-default">
        <div class="panel-body">
            {{--搜索--}}
            <el-form :inline="true" :model="search_info">
                <el-form-item label="会员ID">
                    <el-input v-model="search_info.uid" placeholder="请输入会员ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="clickSearch">查询</el-button>
                </el-form-item>
            </el-form>
            {{--表格--}}
            <el-table :data="list" style="width: 100%">
                <el-table-column align="center" prop="id" label="ID" width="80"></el-table-column>
                <el-table-column align="center" prop="member" label="用户信息" width="230">
                    <template slot-scope="scope">
                        <div class="user">
                            <div class="user-avatar">
                                <img class="avatar-image" :src="scope.row.member.avatar_image || ''" />
                            </div>
                            <div class="user-info">
                                <div class="user-nickname">昵称：[[scope.row.member.nickname || '']]</div>
                                <div class="user-status">ID：[[scope.row.member.uid || '']]</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="易出总数" width="100">
                    <template slot-scope="scope">
                        [[scope.row.withdrawal_total_num]]豆
                    </template>
                </el-table-column>
                <el-table-column align="center" label="基金池" width="110">
                    <template slot-scope="scope">
                        <el-tag type="warning" disable-transitions>[[scope.row.fund_ratio]]%</el-tag>
                        <el-tag type="success" disable-transitions style="margin-top: 10px;">[[scope.row.fund_num]]豆</el-tag>
                        <el-tag type="danger" disable-transitions style="margin-top: 10px;">[[scope.row.fund_num_money]]元</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="易出部分" width="110">
                    <template slot-scope="scope">
                        <el-tag type="warning" disable-transitions>[[scope.row.withdrawal_ratio]]%</el-tag>
                        <el-tag type="success" disable-transitions style="margin-top: 10px;">[[scope.row.withdrawal_num]]豆</el-tag>
                        <el-tag type="danger" disable-transitions style="margin-top: 10px;">[[scope.row.withdrawal_num_money]]元</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="购物部分" width="110">
                    <template slot-scope="scope">
                        <el-tag type="warning" disable-transitions>[[scope.row.buy_goods_ratio]]%</el-tag>
                        <el-tag type="success" disable-transitions style="margin-top: 10px;">[[scope.row.buy_goods_num]]豆</el-tag>
                        <el-tag type="danger" disable-transitions style="margin-top: 10px;">[[scope.row.buy_goods_num_money]]元</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="手续费" width="110">
                    <template slot-scope="scope">
                        <el-tag type="warning" disable-transitions>[[scope.row.commission_ratio]]%</el-tag>
                        <el-tag type="success" disable-transitions style="margin-top: 10px;">[[scope.row.commission_num]]豆</el-tag>
                        <el-tag type="danger" disable-transitions style="margin-top: 10px;">[[scope.row.commission_num_money]]元</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="current_fee" label="费率" width="80"></el-table-column>
                <el-table-column align="center" prop="change_type" label="实际易出" width="110">
                    <template slot-scope="scope">
                        <el-tag type="success" disable-transitions>[[scope.row.reality_num]]豆</el-tag>
                        <el-tag type="info" disable-transitions style="margin-top: 10px;">[[scope.row.reality_amount]]元</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="change_type" label="审核状态" width="110">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 0" type="info">待审核</el-tag>
                        <el-tag v-if="scope.row.status == 1" type="warning">待打款</el-tag>
                        <el-tag v-if="scope.row.status == 2" type="danger">已驳回</el-tag>
                        <el-tag v-if="scope.row.status == 3" type="success">已打款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="申请时间" width="200"></el-table-column>
                <el-table-column align="center" prop="created_at" label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <el-button type="primary" @click="examinePass(scope.row.id)">通过并打款</el-button>
                            <el-button type="danger" @click="rejectReason(scope.row.id)">驳回</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            {{--分页--}}
            <el-pagination
                    v-if="total_page > 1"
                    background
                    layout="prev, pager, next"
                    :page-count="total_page"
                    :current-page="page"
                    @current-change="changePage">
            </el-pagination>
        </div>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#mainContent',
        delimiters: ['[[', ']]'],
        name: 'withdrawal_apply',
        data() {
            return {
                page: 1,
                total_page: 1,
                list: [],
                search_info: {
                    uid: '',
                }
            }
        },
        watch:{},
        mounted () {
            this.getData();
        },
        methods: {
            // 获取数据  根据当前选项卡获取对应的信息
            getData(){
                let _this = this;
                let loading = _this.showLoading();
                // 请求获取数据
                $.ajax({
                    url: "{!! yzWebUrl('plugin.cultural-space.admin.legumes.withdrawalApply') !!}",
                    type: "post",
                    data: {
                        page: _this.page,
                        search: _this.search_info,
                    },
                    success: function(result) {
                        let data = result.data;
                        if(parseInt(result.result) === 1){
                            // 处理数据
                            _this.list = data.data;
                            _this.total_page = data.last_page;
                        }
                        loading.close();
                    }
                });
            },
            // 数据分页
            changePage(val){
                this.page = val;
                this.getData();
            },
            // 相关搜索
            clickSearch(){
                this.page = 1;
                this.getData()
            },
            // 显示加载动画
            showLoading(){
                return this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            // 通过并且打款
            examinePass(id){
                let _this = this;
                _this.$confirm('确认通过审核并且立即打款吗！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 通过并且打款
                    $.ajax({
                        url: "{!! yzWebUrl('plugin.cultural-space.admin.legumes.examinePass') !!}",
                        type: "post",
                        data: {
                            id: id
                        },
                        success: function(result) {
                            _this.$alert(result.msg).then(()=>{
                                _this.getData();
                            });
                        }
                    });
                }).catch(() => {});
            },
            // 驳回
            rejectReason(id){
                let _this = this;
                _this.$prompt('驳回原因', '提交审核', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputType: 'textarea',
                }).then(({ value }) => {
                    // 驳回操作
                    $.ajax({
                        url: "{!! yzWebUrl('plugin.cultural-space.admin.legumes.rejectReason') !!}",
                        type: "post",
                        data: {
                            id: id,
                            reject_reason: value
                        },
                        success: function(result) {
                            _this.$alert(result.msg).then(()=>{
                                _this.getData();
                            });
                        }
                    });
                }).catch(() => {});
            },





        },
    })
</script>
@endsection