<!-- 管理员 列表 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <h4 class="c-title">管理员列表</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form
                class="select-form" :inline="true" label-width="6em"
                @submit.native.prevent @keyup.enter="state.p.pageNo = 1; f5();">
                <in-input name="账号id：" v-model="state.p.id" type="num" />
                <in-input name="名称：" v-model="state.p.name" type="text" />
                <in-item name="角色：">
                    <el-select v-model="state.p.roleId">
                        <el-option label="全部" value="" />
                        <el-option v-for="role in state.roleList" :key="role.id" :label="role.name" :value="role.id" />
                    </el-select>
                </in-item>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5();">查询</el-button>
                </in-item>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <div class="fast-btn">
                <el-button type="primary" icon="el-icon-Plus" @click="add" v-if="sa.isAuth('admin-add')">新增</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">批量删除</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 type="num" name="记录id" prop="id" min-width="70px" />
                <td-info type="user-avatar" name="昵称" prop="name,avatar" min-width="120px" />
                <td-info type="text" name="手机" prop="phone" />
                <td-info name="创建人">
                    <template #default="s">
                        <span v-if="s.row.createByAid === -1">无</span>
                        <el-link v-else @click="sa.$page.openAdminInfo(s.row.createByAid, s.row.name)">{{ s.row.createByAid }}</el-link>
                    </template>
                </td-info>
                <td-info type="text" name="所属角色" prop="roleName" />
                <td-info type="datetime" name="注册时间" prop="createTime" width="150px" />
                <td-info type="datetime" name="最后登录" prop="loginTime" width="150px" />
                <td-info type="text" name="登录次数" prop="loginCount" not="0" width="100px" />
                <td-enum 
                    type="switch" name="账号状态" prop="status" :jv="{1: '正常', 2: '禁用[#ff4949]'}" width="120px" 
                    @before-change="s => updateStatus(s.row, s.resolve)" />
                <el-table-column label="操作" fixed="right" width="400px">
                    <template #default="s">
                        <el-button type="success" plain class="c-btn" icon="el-icon-View" @click="getInfo(s.row)">详情</el-button>
                        <el-button type="success" plain class="c-btn" icon="el-icon-View" @click="getAdminLogin(s.row)" v-if="sa.isAuth('sp-admin-login')">登录日志</el-button>
                        
                        <el-dropdown trigger="click" style="font-size: 0.85em;">
                            <el-button type="primary" plain class="c-btn" icon="el-icon-Edit">
                                修改 <el-icon><el-icon-ArrowDown /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <span @click="update(s.row)">
                                        <el-dropdown-item>改资料</el-dropdown-item>
                                    </span>
                                    <span @click="updatePassword(s.row)">
                                        <el-dropdown-item>改密码</el-dropdown-item>
                                    </span>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button type="warning" plain class="c-btn" icon="el-icon-Pointer" @click="mockLogin(s.row)">模拟登录</el-button>
                        <el-button type="danger" plain class="c-btn" icon="el-icon-Delete" @click="del(s.row)">删除</el-button>
                    </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="admin-list">
import TdInfo from '../../sa-frame/com/td/td-info';
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
const { proxy } = getCurrentInstance();


// ------------------ 数据 ------------------
const state = reactive({
    p: {    // 查询条件
        id: '',
        name: '',
        roleId: '',
        sortType: 'id',
        pageNo: 1,
        pageSize: 10,
    },
    dataCount: 0,   // 数据总数 
    dataList: [],   // 数据表格 
    roleList: [],   // 角色列表 
})

// 加载角色数据 
onMounted(() => {
    f5();
    sa.ajax('/role/getList?pageSize=1000', function(res){
        state.roleList = res.data;
    }, { msg: null });
})


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

// 增加 
const add = function () {
    sa.showModel('添加一个管理员', () => import('./admin-add'));
}
// 修改
const update = function (data) {
    sa.showModel('修改管理员信息', import('./admin-add.vue'), { id: data.id });
};
// 查看详情
const getInfo = function(data) {
    sa.showModel('管理员详情', import('./admin-info'), { id: data.id });
};
// 查看登录日志
const getAdminLogin = function(data) {
    sa.showTempView('sp-admin-login-' + data.id, '登录日志-' + data.id, import('../sp-admin-login/sp-admin-login-list'), {accId: data.id});
};
// 修改密码
const updatePassword = function(data) {
    layer.prompt({ title: '修改密码' }, function(pass, index){
        layer.close(index);
        if (pass.length < 4) {
            return layer.msg('新密码长度请不要低于4位');
        }
        sa.ajax('/admin/updatePassword', { id: data.id, password: pass }, function(res){
            layer.msg('修改成功');
        })
    });
};
// 修改用户的状态
const updateStatus = function(data, resolve) {
    if (data.id === sa.$sys.getCurrUser().id) {
        return sa.alert('不能自己封禁自己');
    }

    const status = 3 - data.status;
    sa.ajax('/admin/updateStatus', {id: data.id, status: status}, function () {
        sa.msg('修改成功');
        resolve(true);
    });
};
// 模拟登陆
const mockLogin = function(data) {
    if(data.id === sa.$sys.getCurrUser().id) {
        return sa.alertError('不能自己模拟自己');
    }
    sa.showModel('模拟登录 - ' + data.id, import('./admin-mock-login.vue'), { id: data.id, btnText: '复制并关闭' });
};
// 删除
const del = function(data) {
    sa.confirm('是否删除，此操作不可撤销', function(){
        sa.ajax('/admin/delete', { id: data.id }, function(res){
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
        })
    });
};
// 批量删除
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.confirm(`是否删除选中的 ${selection.length} 条数据？此操作不可撤销`, function() {
        sa.ajax('/admin/deleteByIds', { ids: ids.join(',') }, function(res) {
            sa.arrayDelete(state.dataList, selection);
            sa.ok('删除成功');
        })
    });
};

// 对外开放方法 
defineExpose({f5})

</script>

<style scoped lang="scss">

</style>
