<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.mobile"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入昵称" v-model="searchForm.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入真实姓名" v-model="searchForm.realName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select v-model="searchForm.userLevel" placeholder="app用户类型">
                                    <el-option
                                        v-for="item in customerTypeList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    ></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"
                                    @click="showAddEditDialog(null)"
                                >新建</el-button>-->
                                <el-button
                                    type="primary"
                                    plain
                                    round
                                    @click="sendRedEnvelopes(1)"
                                >卡券发放</el-button>
                                <el-button
                                    type="primary"
                                    plain
                                    round
                                    @click="sendRedEnvelopes(2)"
                                >红包发放</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="mobile" label="手机号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="name" label="昵称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="realName" label="真实名" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="companyName" label="公司" :show-overflow-tooltip="true">
                        <template
                            slot-scope="scope"
                        >{{ scope.row.companyName ? scope.row.companyName : '- 无 -' }}</template>
                    </el-table-column>
                    <el-table-column prop="roleName" label="app用户类型"></el-table-column>
                    <el-table-column prop="deleteFlag" label="冻结开关" min-width="110px;">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.deleteFlag"
                                active-text="开"
                                inactive-text="关"
                                :active-value="1"
                                :inactive-value="0"
                                :disabled="scope.row.userLevel === 6"
                                @change="switchChange(scope.row)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vipEndTime" label="会员结束时间" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.vipEndTime | formatTimePipe }}</template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="380px;">
                        <template slot-scope="scope">
                            <!-- <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="deleteData(scope.row.userId)"
                            >删除</el-button>-->
                            <!-- 非会员及VIP个人会员可以升级角色(vip个人会员可以升级为vip企业会员) vipFlag:1 非会员,2 会员 -->
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="scope.row.vipFlag === 1"
                                :disabled="scope.row.userLevel === 6"
                                @click="editRoleShow(scope.row.userId)"
                            >升级角色</el-button>
                            <!-- 个人与企业会员都可以取消会员 -->
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="scope.row.vipFlag === 2"
                                @click="cancelVip(scope.row)"
                            >取消会员</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                :disabled="scope.row.expertFlag ===1 || scope.row.userLevel === 6"
                                @click="invite(scope.row)"
                            >邀请成为专家</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                :disabled="scope.row.userLevel === 6"
                                @click="viewRebates(scope.row)"
                            >查看分销返利</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="showDetailsDialog(scope.row)"
                            >详情</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>
        <!-- 添加与编辑弹层 -->
        <AddEditDialog ref="addEditDialog" @queryListData="queryListData"></AddEditDialog>
        <!-- 编辑角色弹框 -->
        <EditRoleDialog ref="editRoleDialog" @queryListData="queryListData"></EditRoleDialog>
        <!-- 发红包弹框  -->
        <RedEnvelopes ref="redEnvelopes" @queryListData="queryListData"></RedEnvelopes>
        <!-- 分销返利 -->
        <RebateDialog ref="rebateDialog"></RebateDialog>
        <!-- 详情弹层 -->
        <DetailsDialog @queryListData="queryListData" ref="detailsDialog"></DetailsDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import EditRoleDialog from './components/editRole';
import RedEnvelopes from './components/redEnvelopes';
import RebateDialog from './components/rebateDialog';
import DetailsDialog from './components/detailsDialog';
import AddEditDialog from '../../expert-database-bank/expert/components/addEditDialog';
import {
    queryPageUser,
    removeDataUser,
    editDataUser,
    cancelVip,
    queryCustomerType,
    freezeUser,
    unfreezeUser,
    inviteToBeAnExpert,
} from '@/apps/mobile/api/operation/user/index';
export default {
    components: {
        TitleBar,
        EditRoleDialog,
        RedEnvelopes,
        RebateDialog,
        DetailsDialog,
        AddEditDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            ids: [],
            listLoading: false,
            customerTypeList: [],
        };
    },
    created() {
        this.queryListData();
        this.getCustomerType();
    },
    methods: {
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.userId;
            });
        },
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                expertFlag: 0,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryPageUser(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;
                });
        },
        getCustomerType() {
            queryCustomerType({})
                .then(res => {
                    this.customerTypeList = res.data.records || [];
                })
                .catch();
        },
        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(() => {
                    removeDataUser(obj)
                        .then(() => {
                            this.$message.success('删除成功');
                            this.page.pageNum = 1;
                            this.queryListData();
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        // 查询
        query() {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '') {
                    delete this.searchForm[k];
                }
            }
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 显示编辑角色弹框
        editRoleShow(id) {
            if (id === null) {
                this.$message.warning('该数据id值为null,无法升级角色');
                return false;
            }
            this.$refs.editRoleDialog.open(id);
        },
        cancelVip(data) {
            this.$confirm('是否确定取消该用户会员身份?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    console.log(data, '取消会员');
                    let obj = {
                        userId: data.userId,
                        maintenanceCompanyId: data.maintenanceCompanyId,
                    };
                    cancelVip(obj)
                        .then(res => {
                            console.log(res);
                            if (res.statusCode == '1') {
                                this.$message.success(res.message);
                            } else {
                                this.$message.warning(res.message);
                            }
                            this.queryListData();
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        // 批量发红包
        sendRedEnvelopes(type) {
            if (this.ids.length === 0) {
                this.$message.warning('请至少选中一项 !');
                return false;
            }
            const data = {
                type,
                ids: this.ids,
            };
            this.$refs.redEnvelopes.open(data);
        },
        // 冻结解冻
        switchChange(data) {
            console.log(data.userId);
            let ids = [data.userId];
            if (data.deleteFlag) {
                freezeUser(ids)
                    .then(res => {
                        console.log(res);
                        this.queryListData();
                        this.$message.success('操作成功！');
                    })
                    .catch();
            } else {
                unfreezeUser(ids)
                    .then(res => {
                        console.log(res);
                        this.queryListData();
                        this.$message.success('操作成功！');
                    })
                    .catch();
            }
        },
        // 邀请成为专家
        invite(data) {
            inviteToBeAnExpert(data.userId)
                .then(res => {
                    console.log(res);
                    if (res.statusCode == '1') {
                        this.$message.success('邀请成功!');
                    } else {
                        this.$message.warning(res.message);
                    }
                    this.queryListData();
                })
                .catch();
        },
        viewRebates(data) {
            console.log(data);
            this.$refs.rebateDialog.open(data.userId);
        },
        showDetailsDialog(data) {
            this.$refs.detailsDialog.open(data);
        },
        showAddEditDialog(data) {
            this.$refs.addEditDialog.open('add');
        },
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
</style>
