<template>
    <div>
        <i-page-header title="用户提现列表" ></i-page-header>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate">
                <Row type="flex" :gutter="24">
					<Col>
					    <FormItem label="会员UID：" label-for="uid" style="width: 120px;">
					        <Input  placeholder="会员UID" v-model="formValidate.uid"/>
					    </FormItem>
					</Col>
					<Col >
					    <FormItem label="用户推广UIP：" label-for="uip" style="width: 120px;">
					        <Input  placeholder="用户推广UIP" v-model="formValidate.uip"/>
					    </FormItem>
					</Col>
                    <Col>
                        <FormItem label="绑定手机号码：" label-for="mobile">
                            <Input  placeholder="绑定手机号码" v-model="formValidate.mobile"/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem label="提现类型："  label-for="bank_type">
                            <Select style="width: 150px" v-model="formValidate.bank_type" placeholder="提现类型" element-id="bank_type" clearable>
                                <Option value="">全部</Option>
                                <Option :value="item.code" v-for="(item,index) in bankList" :key="index">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem style="width: 280px" label="选择时间：" label-for="user_time">
                            <div style="width: 280px;height: 33px;"></div>
                            <div>
                                <el-col >
                                    <DatePicker style="width: 100%" format="yyyy-MM-dd HH:mm:ss" v-model="formValidate.time" type="datetimerange" placement="bottom-start" placeholder="自定义时间" :options="options"></DatePicker>
                                </el-col>
                            </div>
                        </FormItem>
                    </Col>
                    <Col class="ivu-text-right userFrom">
                        <FormItem style="margin-top: 30px">
                            <Button type="primary" icon="ios-search" label="default" class="mr15"  @click="getSearch">搜索</Button>
                        </FormItem>
                    </Col>
                </Row>
            </Form>

            <Col class="fx-r">
                <Button type="success" @click="handleOpen()" style="margin-right: 10px">审核通过</Button>
            </Col>
            <div class="muser-order-container clearfix">
                <div class="muser-tab-continer">
                    <a class="muser-tab-a" :class="status==''   ? 'active':''" @click="statusChange('')">全部 ({{ all_tx }})</a>
                    <a class="muser-tab-a" :class="status=='0'  ? 'active':''" @click="statusChange('0')">未提现({{ no_tx }})</a>
                    <a class="muser-tab-a" :class="status=='1'  ? 'active':''" @click="statusChange('1')">已提现({{ yes_tx }})</a>
                    <a class="muser-tab-a" :class="status=='-1'  ? 'active':''" @click="statusChange('-1')">提现失败({{ err_tx }})</a>
                </div>
                <el-table :data="listData" height="500px" v-loading="isLoad" @selection-change="tapSelectChange">
                    <el-table-column type="selection" align="center" width="55"></el-table-column>
                    <el-table-column label="ID" align="center" width="50">
                        <template slot-scope="scope">
							{{scope.row.id}}
                        </template>
                    </el-table-column>
                    <el-table-column label="用户" align="left" width="150">
                        <template slot-scope="scope">
                            <div v-if="scope.row.uid == ''">
                                无
                            </div>
							<i-link v-else  :to="'/system/user/moneyDetail?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的余额明细' ">{{ scope.row.nickname}}[UID:{{scope.row.uid}}]</i-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bank_num" label="提现账号" align="center" width="120">
                    </el-table-column>
                    <el-table-column prop="bank_name" label="真实姓名" align="center" width="80">
                    </el-table-column>
                    <el-table-column prop="bank_type" label="银行类型" align="center" width="80">
                        <template slot-scope="scope">
                            <div v-if="scope.row.bank_type == 'alipay'" >支付宝</div>
                            <div v-else>{{scope.row.bank_type_name}}</div>
                        </template>
                    </el-table-column>
					<el-table-column prop="bank_ad" label="开户行" align="center" width="150">
						<template slot-scope="scope">
						    <div v-if="scope.row.bank_type == 'alipay'" >支付宝</div>
						    <div v-else>{{scope.row.bank_ad}}</div>
						</template>
                    </el-table-column>
                    
                    <el-table-column prop="money" label="提现金额" align="center" width="100"></el-table-column>
					<el-table-column prop="hand_money" label="手续费" align="center" width="100"></el-table-column>
					<el-table-column prop="tx_money" label="打款金额" align="center" width="100">
						<template slot-scope="scope">
						    <span style="color:red">{{scope.row.tx_money}}</span>
						</template>
					</el-table-column>
                    <el-table-column prop="time" label="提现时间" align="center" width="150"></el-table-column>
                    <el-table-column prop="admin_time" align="center" label="处理时间" width="150"></el-table-column>
                    <el-table-column prop="status" align="center" label="状态" fixed="right" width="60">
                        <template slot-scope="scope">
                            <div v-if="scope.row.status == 0">未处理</div>
                            <div v-if="scope.row.status == 1" style="color: #00ac1c">已通过</div>
                            <div v-if="scope.row.status == -1" style="color: #9B9B9B">已拒绝</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="handle" label="操作" width="120" fixed="right" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.status == 0">
                                <a @click="tapOk(scope.row,1)">通过</a>
                                <Divider type="vertical"></Divider>
                                <a @click="tapQr(scope.row,-1)">拒绝</a>
                            </div>
                            <div v-else>
                                操作员:{{scope.row.admin_name }}
                                <span v-if="scope.row.admin_remark != ''">({{ scope.row.admin_remark}})</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 10px;">
                    <Page :total="page.count" :page-size="page.pageSize" show-total show-elevator @on-change="pageChange"/>
                </div>
            </div>
        </Card>

        <!--提现确认、提现拒绝-->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="会员信息">
                    {{ user.mobile}}[uid:{{user.uid}}]
                </el-form-item>

                <el-form-item label="提现账号">
                    {{ user.bank_num}}
                </el-form-item>

                <el-form-item label="提现姓名">
                    {{ user.bank_name}}
                </el-form-item>

                <el-form-item label="打款金额">
                    {{ user.tx_money}}
                </el-form-item>

                <el-form-item label="操作说明">
                    <el-input placeholder="请输入操作明细！" v-model="form.mono"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="tapTransmatic">确 定</el-button>
      </span>
        </el-dialog>
        <ui-loading :text="loadText" v-if="isLoading"></ui-loading>
    </div>
</template>


<script>
    import IPageHeader from "../../../layouts/system/page-header/index";
    import {SystemTxList, SystemTxInit,SystemTxDealSub,SystemTxDown} from "../../../api/system/tx";
    import UserInfo from "../user/userInfo";
    import UiLoading from "../../../ui/loading/index";
    import {export_json_to_excel, export_read_to_excel} from "../../../libs/Export2Excel";
    export default {
        name: "order_tx",
        components: {UiLoading, UserInfo, IPageHeader},
        computed: {},
        data() {
            return {
                listData:[],
				bankList:[],
                userInfoUi: [],
                tableSelect:[],
                dialogVisible:false,
                dialogVisible2:false,
                isLoad : true,
                loadText:"",
                isLoading:false,
                tempXls:[],
                isXlsType:false,
                title:"",
                options: {
                    shortcuts: [
                        {
                            text: '今天',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
                                return [start, end];
                            }
                        },
                        {
                            text: '昨天',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)));
                                end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
                                return [start, end];
                            }
                        },
                        {
                            text: '最近7天',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)));
                                return [start, end];
                            }
                        },
                        {
                            text: '最近30天',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));
                                return [start, end];
                            }
                        },
                        {
                            text: '本月',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
                                return [start, end];
                            }
                        },
                        {
                            text: '本年',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
                                return [start, end];
                            }
                        }
                    ]
                },
                daoXls:{},
                exportsType:0,
                form:{
                    id   : "",
                    mono : "",
					type : 0,
                },
                user:{},
                formValidate: {
                    mobile     : '',
                    bank_type  : '',
                    uid        : '',
					uip        : '',
                    time       : []
                },
                // 搜索区域
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                status : "",
                all_tx    : 0,
                no_tx     : 0,
                yes_tx    : 0,
                err_tx    : 0,
                //订单分页
                page : {
                    count : 0,
                    pageSize : 0,
                    page : 1
                }
            }
        },
        created() {
            this.initView();
        },
        methods: {
            initView:function(){
                SystemTxInit()
                    .then(res=>{
                        if(res.code == 200) {
                            this.all_tx = res.data.all_tx;
                            this.no_tx = res.data.no_tx;
                            this.yes_tx = res.data.yes_tx;
                            this.err_tx = res.data.err_tx;
							this.bankList = res.data.bankList;
                        }
                    });
                this.getData(); 
            },
            getData:function () {
				var that = this;
                var post = {...this.formValidate, page : this.page.page};
                post.status = this.status;
                this.isLoad = true;
                SystemTxList(post)
                    .then(res=>{
                        that.isLoad = false;
                        if(res.code == 200) {
                            that.listData = res.data.list;
                            that.page.pageSize = res.data.pageSize;
                            that.page.count = res.data.pageCount;
                        } else {
                            that.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        that.isLoad = false;
                        that.listData = [];
                        that.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            /**
             * 确认打款
             */
            tapOk:function(row,type){
                this.form.id = row.id;
                this.title = "提现确认";
                this.user = JSON.parse(JSON.stringify(row));
                this.form.mono = '';
				this.form.type = type;
                this.dialogVisible = true;
            },
            tapQr:function(row,type){
                this.form.id = row.id;
                this.title = "审核拒绝";
                this.user = JSON.parse(JSON.stringify(row));
                this.form.mono = '';
				this.form.type = type;
                this.dialogVisible = true;
            },
            /**
             * ！提交 ！
             */
            tapTransmatic:function(){
                let loading = this.$loading('提交数据中..');
                SystemTxDealSub({
                    mono : this.form.mono,
                    id   : this.form.id,
					type : this.form.type,
                })
                    .then(res=>{
                        loading.close();
                        if(res.code == 200) {
                            this.$alert(res.msg,'系统提示');
                            this.dialogVisible = false;
                            this.initView();
                        } else {
                            this.$alert(res.msg, '系统提示');
                        }
                    })
                    .catch(err=>{
                        console.log(err);
                        loading.close();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            pageChange: function (index) {
                this.page.page = index;
                this.getData();
            },

            // 表格搜索
            getSearch () {
                this.page.page = 1;
                this.getData();
            },

            statusChange: function (status) {
                this.status = status;
                this.page.page = 1
                this.getData()
            },


            tapSelectChange:function(ev){
               this.tableSelect = ev;
            },

            handleOpen:function(){
                let idsAr = [];
                for(var i in this.tableSelect) {
					if(this.tableSelect[i].status==0){
						idsAr.push(this.tableSelect[i].id);
					}
                }
                if(idsAr.length <= 0) {
                    this.$Message.error('请选择要通过的申请');
                    return;
                }
                this.$confirm('批量审核成功吗? 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.isLoading = true;
                    this.loadText = "执行1/" + this.tableSelect.length  ;
                    this.handleOk(0,()=>{
                        this.getData();
                    });
                });
            },
			//批量通过
            handleOk:function(index,fn) {
                if(index >= this.tableSelect.length) {
                    this.isLoading = false;
                    fn();
                    return;
                }
                SystemTxDealSub({
                    id: this.tableSelect[index].id,
                    mono:"",
                    type:1
                    })
                    .then(res => {
                        if(res.code == 200) {
                            var id = this.tableSelect[index].id;
                            index++;
                            this.loadText = "执行" + (index + 1) + "/" + this.tableSelect.length;
                            this.handleOk(index, fn);
                        } else {
                            this.isLoading = false;
                            this.$alert(res.msg, '系统提示');
                        }
                    })
                    .catch(err => {
                        this.isLoading = false;
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
        }
    }
</script>
<style scoped>
    .muser-order-container{background: #ffffff;padding: 20px;margin-bottom: 20px;}

    .muser-order-count-nav{padding: 0px 50px;width:30%;position: relative;}
    .muser-order-count-nav-name{font-size: 14px;color:#9B9B9B;height:20px;line-height: 20px;}
    .muser-order-count-nav-val{display: inline-block;height:42px;line-height: 42px;font-size: 32px;color:#333333;font-weight: 700;}
    .muser-order-count-nav-unit{display: inline-block;height:20px;line-height: 20px;font-size: 14px;color:#333333;}
    .muser-order-count-line{height:72px;width:1px;background: #EEEEEE;}
    a.muser-order-count-a{display: block;position: absolute;top:20px;right:50px;height:32px;line-height: 32px;padding: 0px 20px;border:1px solid #FFB300;border-radius: 20px;color:#FFB300;font-size: 14px;}
    a.muser-order-count-a.muser-afull{background: #FFB300;color:#ffffff}
    .user-show{background: #ffffff;padding: 0px 15px;}
    .user-show-title{height:32px;line-height: 32px;padding-left: 7px;position: relative;font-size: 16px;color:#333333}
    .user-show-title .sline{width: 3px;height: 14px;background: #EA312B;border-radius: 2px;position: absolute;top:9px;left:0px}
    .user-show-content{}

    table.muser-order-table{width:100%;border:1px solid #f0f0f0}
    table.muser-order-table tr:nth-child(odd){background: #F7F7F7;}
    table.muser-order-table tr th{padding: 12px 0px;font-size: 13px;color:#848484;text-align: center;}
    table.muser-order-table tr td{padding: 16px 0px;font-size: 12px;color:#333333;text-align: center;border-top:1px solid #f0f0f0}
    a.muser-order-table-a{font-size: 12px;color:#1492E6;}
    .muser-order-table-line{display: inline-block;height:10px;background: rgba(112,112,112,0.31);width:1px;margin: 0px 4px;}

    .spping{ position: absolute; width: 100%;height: 100%;z-index: 9;top: 0;left: 0; background: rgba(255,255,255,0.5);}

    .muser-tab-continer{border-bottom:1px solid #EEEEEE}
    a.muser-tab-a{display: inline-block;padding: 0px 28px;height:42px;line-height: 42px;border-bottom:3px solid transparent;font-size: 17px;color:#595959;}
    a.muser-tab-a.active{border-bottom:3px solid #EA312B;color:#EA312B}
</style>
