<!-- 用户 列表 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <!-- 提示 -->
            <el-alert class="win-tips" type="error" v-if="prop.isDel === 2">
                <template #title>
                    用户回收站：本页面显示所有已被删除的用户，你可以将其 [ 恢复 ] 或者 [ 彻底删除 ]。
                </template>
            </el-alert>
            <h4 class="c-title" v-if="prop.isDel === 1">用户列表</h4>
            <h4 class="c-title" v-else>用户回收站</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form class="select-form" :inline="true" label-width="6.5em" @submit.native.prevent @keyup.enter="state.p.pageNo = 1; f5();">
                <in-input name="账号id：" v-model="state.p.id" type="num"></in-input>
                <in-input name="用户昵称：" v-model="state.p.username"></in-input>
                <in-input name="手机号码：" v-model="state.p.phone" type="num"></in-input>
                <in-input name="用户邮箱：" v-model="state.p.email"></in-input>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5()">查询</el-button>
                </in-item>
                <br />
                <in-item name="用户性别：">
                    <el-radio-group v-model="state.p.sex" class="s-radio-text">
                        <el-radio label="">不限</el-radio>
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                        <el-radio :label="3">未知</el-radio>
                    </el-radio-group>
                </in-item>
                <in-item name="账号状态：">
                    <el-radio-group v-model="state.p.status" class="s-radio-text">
                        <el-radio label="">不限</el-radio>
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </in-item>
                <in-item name="综合排序：">
                    <el-radio-group v-model="state.p.sortType" class="s-radio-text">
                        <el-radio :label="0">最近注册</el-radio>
                        <!-- <el-radio :label="1">创建时间</el-radio> -->
                        <el-radio :label="11">最近登录</el-radio>
                        <el-radio :label="13">登陆次数</el-radio>
                    </el-radio-group>
                </in-item>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <div class="fast-btn">
                <el-button type="primary" icon="el-icon-Plus" @click="add()" v-if="prop.isDel === 1">添加</el-button>
                <el-button type="primary" plain icon="el-icon-Download" @click="sa.exportExcel()">导出</el-button>
                <el-button type="danger" plain icon="el-icon-Delete" @click="deleteByIds" v-if="prop.isDel === 1">批量删除</el-button>
                <el-button type="primary" plain icon="el-icon-Refresh" @click="unDeleteByIds" v-if="prop.isDel === 2">批量恢复</el-button>
                <el-button type="danger" plain icon="el-icon-Delete" @click="realDeleteByIds" v-if="prop.isDel === 2">批量彻底删除</el-button>
                <!-- <el-button type="danger" plain icon="el-icon-Delete" @click="deleteByIds">删除</el-button>-->
                <el-button type="default" plain icon="el-icon-Refresh" @click="sa.f5CurrView()">重置</el-button>
            </div>
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info type="selection"></td-info>
                <td-info name="id号" prop="id"></td-info>
                <td-info name="用户昵称" prop="username,avatar" type="user-avatar" width="180px"></td-info>
                <!-- <sa-td name="用户头像" prop="avatar" type="img"></sa-td> -->
                <td-enum name="用户性别" prop="sex" type="enum" :jv="{1: '男', 2: '女', 3: '未知'}"></td-enum>
                <td-info name="手机号" prop="phone" type="num"></td-info>
                <td-info name="用户邮箱" prop="email" width="150px"></td-info>
                <td-info name="登陆次数" prop="loginCount"></td-info>
                <td-info name="上次登陆IP" prop="loginIp"></td-info>
                <td-info name="活跃数据" width="200px">
                    <template #default="s">
                        <p>注册时间：{{ sa.forDate(s.row.createTime, 2) }}</p>
                        <p>最近登录：{{ sa.forDate(s.row.loginTime, 2) || '暂无记录' }}</p>
                    </template>
                </td-info>
                <td-enum 
                    type="switch" name="账号状态" prop="status" :jv="{1: '正常', 2: '禁用[#ff4949]'}" 
                    @before-change="s => updateStatus(s.row, s.resolve)" width="120px"></td-enum>
                <el-table-column label="操作" fixed="right" :width=" prop.isDel === 1 ? '380px' : '330px' ">
                    <template #default="s">
                        <el-button class="c-btn" type="success" plain icon="el-icon-View" @click="get(s.row)">详细</el-button>
                        <el-button class="c-btn" type="success" plain icon="el-icon-View" @click="openLoginLog(s.row)">登录记录</el-button>
                        <el-button class="c-btn" type="primary" plain icon="el-icon-Edit" @click="update(s.row)">改资料</el-button>
                        <el-button class="c-btn" type="primary" plain icon="el-icon-Edit" @click="updatePassword(s.row)">改密码</el-button>
                        <el-button class="c-btn" type="danger" plain icon="el-icon-Delete" @click="del(s.row)" v-if="prop.isDel === 1">删除</el-button>
                        <p style="margin-top: 4px;" v-if="prop.isDel === 2">
                            <el-button class="c-btn" type="primary" plain icon="el-icon-Refresh" @click="unDelete(s.row)" v-if="prop.isDel === 2">恢复此用户</el-button>
                            <el-button class="c-btn" type="danger" plain icon="el-icon-Delete" @click="realDelete(s.row)" v-if="prop.isDel === 2">彻底删除此用户</el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="sys-user-list">
import TdInfo from '../../sa-frame/com/td/td-info';
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
const { proxy } = getCurrentInstance();

// 获取插值 
const prop = defineProps({
    isDel: {
        type: Number,
        default: 1
    }
})

// ------------------ 数据 ------------------
const state = reactive({
    p: {    // 查询条件
        id: '', // id号 
        username: '', // 用户昵称 
        password: '', // 账号密码 
        pw: '', // 明文密码 
        intro: '', // 个人介绍(签名) 
        age: '', // 用户年龄 
        sex: '', // 用户性别 (1=男,2=女,3=未知) 
        phone: '', // 手机号 
        email: '', // 用户邮箱 
        status: '', // 账号状态(1=正常,2=禁用) 
        loginIp: '', // 上次登陆IP 
        loginCount: '', // 登陆次数 
        isDel: prop.isDel, // 是否删除(1=是,2=否)
        pageNo: 1, // 当前页 
        pageSize: 10, // 页大小 
        sortType: 0 // 排序方式 
    },
    dataCount: 0,   // 数据总数 
    dataList: [],   // 数据表格 
})

// 组件加载时触发
onMounted(() => {
    f5();
})


// ------------------ 查找数据 ------------------
const f5 = function() {
    sa.ajax('/SysUser/getList', sa.removeNull(state.p), function (res) {
        state.dataList = res.data;
        state.dataCount = res.dataCount;
    })
};

// 增加 
const add = function () {
    sa.showModel('用户添加', import('./sys-user-add.vue'));
}
// 修改
const update = function (data) {
    sa.showModel('用户修改', import('./sys-user-add.vue'), { id: data.id });
};
// 详情 
const get = function (data) {
    sa.showModel('用户详情', import('./sys-user-info.vue'), { id: data.id });
};
// 修改密码
const updatePassword = function(data) {
    sa.layer.prompt({
        title: '修改密码'
    }, function(pass, index) {
        sa.layer.close(index);
        if (pass.length < 4) {
            return sa.msg('新密码长度请不要低于4位');
        }
        sa.ajax('/SysUser/updatePassword', {
            id: data.id,
            password: pass
        }, function(res) {
            sa.msg('修改成功');
        })
    });
};
// 改 - 应用状态(1=启用, 2=禁用)
const updateStatus = function(data, resolve) {
    if(data.id === undefined) {
        return;
    }

    const status = 3 - data.status;
    sa.ajax('/SysUser/updateStatus', {id: data.id, status: status}, function () {
        sa.msg('修改成功');
        resolve(true);
    });

};
// 删除用户 
const del = function(data) {
    sa.confirmWarn(`是否删除  [ id=${data.id} ] 的用户 ? 删除后可从 [ 用户回收站 ] 中恢复此用户`, function(){
        sa.ajax('/SysUser/delete', { id: data.id }, function(res){
            sa.ok('删除成功');
            sa.arrayDelete(state.dataList, data);
        })
    });
};
// 批量删除
const deleteByIds = function() {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 提交删除
    sa.confirmWarn(`是否删除选中的 ${selection.length} 条用户 ? 删除后可从 [ 用户回收站 ] 中恢复这些用户`, function() {
        sa.ajax('/SysUser/deleteByIds', { ids: ids.join(',') }, function(res) {
            let msg = "";
            for (const str of res.data) {
                msg += `<p>${str}</p>`;
            }
            sa.alert(msg, function (){
                f5();
            });
        })
    });
};
// 恢复用户 
const unDelete = function(data) {
    sa.confirmWarn(`是否恢复  [ id=${data.id} ] 的用户 ? `, function(){
        sa.ajax('/SysUser/unDelete', { id: data.id }, function(res){
            sa.ok('恢复成功');
            f5();
        })
    });
};
// 批量恢复用户
const unDeleteByIds = function() {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 提交删除
    sa.confirmWarn(`是否恢复选中的 ${selection.length} 条用户 ? `, function() {
        sa.ajax('/SysUser/unDeleteByIds', { ids: ids.join(',') }, function(res) {
            let msg = "";
            for (const str of res.data) {
                msg += `<p>${str}</p>`;
            }
            sa.alert(msg, function (){
                f5();
            });
        })
    });
};
// 彻底删除  
const realDelete = function(data) {
    sa.confirmWarn(`是否彻底删除  [ id=${data.id} ] 的用户 ? 此操作无法撤销，请谨慎操作`, function(){
        sa.ajax('/SysUser/realDelete', { id: data.id }, function(res){
            sa.ok('彻底删除成功');
            f5();
        })
    });
};
// 批量恢复用户
const realDeleteByIds = function() {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 提交删除
    sa.confirmWarn(`是否彻底删除选中的 ${selection.length} 条用户 ? 此操作无法撤销，请谨慎操作`, function() {
        sa.ajax('/SysUser/realDeleteByIds', { ids: ids.join(',') }, function(res) {
            let msg = "";
            for (const str of res.data) {
                msg += `<p>${str}</p>`;
            }
            sa.alert(msg, function (){
                f5();
            });
        })
    });
};

// 打开登录日志
const openLoginLog = function(data) {
    sa.showTempView('sys-login-log-list-' + data.id, '用户登录记录-' + data.id, import('../sys-login-log/sys-login-log-list.vue'), {userId: data.id});
};

// 对外开放函数 
defineExpose({f5})

</script>

<style scoped lang="scss">

</style>
