<!--
 * @Descripttion: 用户列表
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-09 16:08:16
 * @LastEditors: zzx tigerzouzx@foxmail.com
 * @LastEditTime: 2024-11-22 18:00
-->
<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="hover">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float: right" type="primary" @click="handleSearchList()" size="small">
                    查询搜索
                </el-button>
                <el-button style="float: right; margin-right: 15px" @click="handleResetSearch()" size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="用户昵称：">
                        <el-input v-model="listQuery.nickName" class="input-width" placeholder="请输入用户名称"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input v-model="listQuery.phone" class="input-width" placeholder="请输入手机号码"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="注册时间：">
                        <el-date-picker v-model="date" size="small" value-format="yyyy-MM-dd HH:mm:ss"
                            class="item-width-350 ml10" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="hover">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <span class="tips">注：设置分销权限后后台账号为手机号，默认密码为123456</span>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable" :data="list" style="width: 100%" v-loading="listLoading" border>
                <el-table-column label="昵称" width="100" align="center">
                    <template slot-scope="scope">{{ scope.row.nickName || '--' }}</template>
                </el-table-column>
                <el-table-column label="手机号" align="center">
                    <template slot-scope="scope">{{ scope.row.phone || '--' }}</template>
                </el-table-column>
                <el-table-column label="属性" align="center" prop="updateBy">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 1 || scope.row.type == null" type="info">普通用户</el-tag>
                        <el-tag v-else-if="scope.row.type == 2" type="success">一级分销</el-tag>
                        <el-tag v-else-if="scope.row.type == 3" type="warning">二级分销</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="注册时间" align="center" prop="createTime"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span v-if="isAdmin == 0">
                            <el-button v-if="scope.row.type==1" size="mini" type="success" plain
                                @click="get_settingType(scope.$index, scope.row)">
                                设为一级分销
                            </el-button>
                        </span>
                        <span v-else>
                            <el-button v-if="isAdmin==2 && scope.row.type!=3" size="mini" type="warning" plain
                                @click="get_settingType(scope.$index, scope.row)">
                                设为二级分销
                            </el-button>
                        </span>
                        <el-button size="mini" v-if="scope.row.type != 1 && scope.row.type != null" type="primary" plain
                            @click="checkBindUser(scope.$index, scope.row)">
                            查看绑定用户
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="查看绑定用户" :visible.sync="forbiddenDialogVisible" width="60%" :before-close="handleClose">
            <el-table ref="adminTable" :data="dialogList" style="width: 100%" v-loading="dialogListLoading" border>
                <el-table-column label="序号" width="100" align="center" prop="id"></el-table-column>
                <el-table-column label="姓名" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.nickName||'--' }}
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.phone||'--' }}
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px;text-align: right;">
                <el-pagination background @size-change="handleSizeChangeDialog"
                    @current-change="handleCurrentChangeDialog" layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="dialogListQuery.pageNum" :page-size="dialogListQuery.pageSize"
                    :page-sizes="[10, 15, 20]" :total="dialogTotal">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { userList, settingType } from "@/api/distribution";
import { formatDate } from "@/utils/date";
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    userId: null,
    nickName: null,
    phone: null,
    registerStartTime: '',
    registerEndTime: ''
};
const dialogDefaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    userId: null,
};
export default {
    name: "userList",
    data() {
        return {
            isAdmin:null,
            date: "",
            listQuery: Object.assign({}, defaultListQuery),
            dialogListQuery: Object.assign({}, dialogDefaultListQuery),
            list: null,
            dialogList: null,
            total: null,
            dialogTotal: null,
            listLoading: false,
            dialogListLoading: false,
            forbiddenDialogVisible: false
        };
    },
    watch: {
        date(val) {
            if (val) {
                this.listQuery.registerStartTime = Date.parse(val[0]);
                this.listQuery.registerEndTime = Date.parse(val[1]);
            } else {
                this.listQuery.registerStartTime = "";
                this.listQuery.registerEndTime = "";
            }
        },
    },
    created() {
        this.isAdmin= localStorage.getItem("isAdmin");
        this.getList();
    },
    filters: {
        formatDateTime(time) {
            if (time == null || time === "") {
                return "N/A";
            }
            let date = new Date(time);
            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        },
    },
    methods: {
        // 设置分销
        get_settingType(idnex, row) {
            if(row.phone===null) return this.$message.warning("手机号为空，不可设置");
            this.$confirm("是否确认?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let updateData = {
                    cuserInfoId: row.id,
                };
                settingType({ ...updateData }).then((response) => {
                    if (response.code == 200) {
                        this.$message({
                            message: "设置成功！",
                            type: "success",
                        });
                        this.getList()
                    }
                });
            });
        },

        // 查看绑定用户
        checkBindUser(index, row) {
            this.listQuery.userId = row.id;
            this.dialogListQuery.userId = row.id;
            this.forbiddenDialogVisible = true;
            this.getList();
        },
        handleResetSearch() {
            this.date=''
            this.listQuery = Object.assign({}, defaultListQuery);
        },
        handleSearchList() {
            this.listQuery.userId = null
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },

        // dialog内事件
        handleSizeChangeDialog(val) {
            this.dialogListQuery.pageNum = 1;
            this.dialogListQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChangeDialog(val) {
            this.dialogListQuery.pageNum = val;
            this.getList();
        },
        handleClose() {
            this.forbiddenDialogVisible = false;
            this.dialogListQuery.pageNum = 1;
            this.listQuery.userId = null
        },

        getList() {
            if (this.listQuery.userId == null) {
                this.listLoading = true;
                userList(this.listQuery).then((response) => {
                    this.listLoading = false;
                    this.list = response.data.list;
                    this.total = response.data.total;
                });
            } else {
                this.dialogListLoading = true;
                userList(this.dialogListQuery).then((response) => {
                    this.dialogListLoading = false;
                    this.dialogList = response.data.list;
                    this.dialogTotal = response.data.total;
                });
            }
        },
    },
};
</script>
<style scoped></style>
