<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入昵称" v-model="searchForm.userName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入手机号" v-model="searchForm.mobile"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select
                                    placeholder="是否专家"
                                    v-model="searchForm.expertFlag"
                                    clearable
                                >
                                    <el-option label="普通用户" :value="0"></el-option>
                                    <el-option label="专家" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" plain round @click="query">查询</el-button>
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item>
                                <!-- <el-button type="primary" round icon="el-icon-plus">新建</el-button> -->
                                <!-- <el-button
                                    type="primary"
                                    plain
                                    round
                                    @click="deleteData(ids, 'batch')"
                                >批量删除</el-button>-->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{ ids.length }}</span> 项
            </div>

            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectionChange"
                    class="OutTable"
                    border
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="userName" label="昵称" :show-overflow-tooltip="true"></el-table-column>

                    <el-table-column prop="head" label="头像">
                        <template slot-scope="scope">
                            <span @click="imgOpen(scope.row.avatarUrl)">
                            <el-image
                                :src="scope.row.avatarUrl | pathPipe"
                                style="width:40px;height:40px;cursor:pointer"
                            ></el-image>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mobile" label="手机号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="是否专家" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.expertFlag == 1 ? '专家' : '普通用户' }}</template>
                    </el-table-column>
                    <el-table-column prop="amount" label="提现金额" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{scope.row.amount}}</template>
                    </el-table-column>
                    <el-table-column label="审核状态" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-show="scope.row.statuz == 0" class="warn">申请中</span>
                            <span v-show="scope.row.statuz == 1" class="success">审批通过</span>
                            <span v-show="scope.row.statuz == 3" class="success">提现成功</span>
                            <span v-show="scope.row.statuz == 4" class="warn">审核不通过</span>
                            <span v-show="scope.row.statuz == 5" class="warn">提现失败</span>
                            <span v-show="scope.row.statuz == 6" class="warn">提现处理中</span>
                            <RejectReason :content="scope.row.mome" v-show="scope.row.statuz == 4"></RejectReason>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="180px;">
                        <template slot-scope="scope">
                            <!-- <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="deleteData(scope.row.id)"
                            >删除</el-button>-->
                            <el-button
                                size="mini"
                                type="warning"
                                plain
                                round
                                @click="pass(scope.row)"
                                :disabled="scope.row.statuz != 0"
                            >通过</el-button>
                            <!-- <el-button
                                size="mini"
                                type="success"
                                plain
                                round
                                @click="rejectShow(scope.row.id)"
                                :disabled="scope.row.statuz != 0"
                            >驳回</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagenation">
                    <PageComponent
                        :total="total"
                        @pagination="handlePagination"
                        :pageSize.sync="page.pageSize"
                        :pageNum.sync="page.pageNum"
                    ></PageComponent>
                </div>
            </div>
        </div>
        <!-- 驳回弹窗 -->
        <RejectDialog @isReject="isReject" ref="regectDialog"></RejectDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import RejectDialog from '@/apps/mobile/components/reject/index';
import RejectReason from '@/apps/mobile/components/ReasonForRejection/index';
import {
    queryPageWithdraws,
    removeWithdraws,
    examineWithdraws,
    alipayWithdrawMoney,
} from '@/apps/mobile/api/payment/withdrawApprove/index';
export default {
    components: {
        TitleBar,
        RejectDialog,
        RejectReason,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false,
            time: [],
            ids: [],
        };
    },
    created() {
        this.queryListData();
    },
    methods: {
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.id;
            });
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        closeDialog(dialogVisibleName) {
            console.log(dialogVisibleName);

            this[dialogVisibleName] = false;
        },
        queryListData() {
            // this.listLoading = true;
            let obj = {
                // examineFlag: this.show === 0 ? 0 : null,
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryPageWithdraws(obj)
                .then(res => {
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },

        // 驳回弹框
        rejectShow(id) {
            this.$refs.regectDialog.open(id);
        },
        // 驳回 (审批页面调用)
        isReject(data) {
            console.log(data, 'isRegect is Ok');
            let obj = {
                id: data.id,
                mome: data.checkComment,
                statuz: 4,
            };
            this.rejectHandle(obj);
        },
        rejectHandle(obj) {
            examineWithdraws(obj).then(res => {
                if (res.statusCode === '1') {
                    this.$refs.regectDialog.close();
                    this.queryListData();
                    this.$message.success('操作成功');
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        // 审核通过  (仅在审批页面使用)
        pass(data) {
            this.$confirm('是否通过审批?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let obj = {
                        id: data.id,
                        statuz: 1,
                    };
                    this.approval(obj, data.orders);
                })
                .catch(() => {});
        },
        // 审批
        approval(obj, orders) {
            if (orders) {
                examineWithdraws(obj).then(res => {
                    console.log(res);
                    if (res.statusCode === '1') {
                        let param = {
                            orders: orders,
                        };
                        console.log(param);
                        alipayWithdrawMoney(param)
                            .then(result => {
                                console.log(result);
                                if (result.statusCode === '1') {
                                    this.$message.success(result.message);
                                } else {
                                    this.$message.warning(result.message);
                                }
                                this.queryListData();
                            })
                            .catch();
                    } else {
                        this.$message.warning(res.message);
                    }
                });
            } else {
                this.$message.warning('无效提现申请!');
            }
        },
        deleteData(id, type = 'single') {
            let obj = {};
            if (type === 'batch') {
                if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
                // console.log(this.ids, "ids");
                obj = {
                    ids: this.ids
                }
                this.delete(obj);
            } else {
                obj = {
                    ids: [id]
                }
                this.delete(obj);
            }
        },
        delete(obj) {
            this.$confirm('确定要删除该数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal: false,
            })
                .then(() => {
                    removeWithdraws(obj)
                        .then(() => {
                            this.$message.success('删除成功');
                            this.queryListData();
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        // 查询
        query() {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '') {
                    delete this.searchForm[k];
                }
            }
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.queryListData();
        },
        imgOpen(imgs){
            window.open(imgs);
        }
    },
};
</script>
<style scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
.el-date-editor {
    border-radius: 20px;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
}
.el-range-editor.el-input__inner {
    margin-top: 5px;
}
</style>
