<script setup>
import { ref, reactive } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { interactiveInterface } from '@/api/api'

let select_users = ref('')
let userList = ref([])
async function getAllDepart(){
    const res=await interactiveInterface.allUserList()
    if(res.Ret===200){
        userList.value=res.Data.List||[]
    }
}
getAllDepart()

function handleSetAuth(){
    if(!select_users.value.length>0) return ElMessage.warning('请选择用户')
    interactiveInterface.setMessageAuth({
        RoleTypeCode:'yb_voice_admin',
        AdminIds: select_users.value.join(',')
    }).then(res => {
        if(res.Ret !== 200) return
        getTableList()
        select_users.value = []
    })
}

let tableData = ref([{}])
const tableColumns = [
    {key:'RealName',label:'姓名'},
    {key:'Mobile',label:'手机号'},
    {key:'RoleName',label:'角色'},
    {key:'DepartmentGroup',label:'部门/分组',minWidth:'180'},
    {key:'Enabled',label:'状态'},
]
let tableParams = reactive({
    pageNo:1,
    pageSize:10,
    totals:0
})
function handleCurrentChange(page){
    tableParams.pageNo = page
    getTableData()
}
async function getTableData(){
    const res=await interactiveInterface.messageManageList({
        RoleTypeCode:'yb_voice_admin',
        CurrentIndex: tableParams.pageNo,
        PageSize:tableParams.pageSize
    })
    if(res.Ret !== 200) return

    const { List,Paging } = res.Data;

    tableData.value = List || [];
    tableParams.totals = Paging.Totals;
}
getTableData()

function handleDel({ SysRoleAdminId }){
    ElMessageBox.confirm('确认删除吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(()=>{
        interactiveInterface.delMessageAuth({ SysRoleAdminId }).then(res=>{
            if(res.Ret!==200) return 
            ElMessage.success('删除成功')
            handleCurrentChange(1)
        })
    }).catch(()=>{})
}
</script>

<template>
    <div class="voice-role-wrap">
        <div class="voice-role-header">
            <el-cascader
                v-model="select_users"
                placeholder="请选择用户"
                style="width: 230px"
                :options="userList"
                :props="{
                    label: 'RealName',
                    value: 'AdminId', 
                    children: 'ChildrenList',
                    emitPath: false,
                    multiple: true
                }"
                :show-all-levels="false"
                collapse-tags
                clearable
                filterable
            />
            <el-button type="primary" style="margin-left:30px" @click="handleSetAuth">配置权限</el-button>
        </div>
        <div class="voice-role-table">
            <el-table :data="tableData" border>
                <el-table-column v-for="column in tableColumns" :key="column.key" 
                    :label="column.label" 
                    :prop="column.key" 
                    :min-width="column.minWidth"
                    align="center">
                    <template #default="{row}">
                        <span v-if="column.key==='Enabled'" :style="{color:row.Enabled===1?'':'#ef0000'}">{{row.Enabled===1?'启用':'禁用'}}</span>
                        <span v-else>{{ row[column.key] }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center">
                    <template #header>
                        <el-tooltip 
                            effect="dark" 
                            content="此项删除只删除该用户的语音管理员权限" 
                            placement="top-start"
                        >   
                            <div style="display: flex;align-items: center;justify-content: center;">
                                <span>操作</span>
                                <el-icon><QuestionFilled /></el-icon>
                            </div>
                        </el-tooltip>
                    </template>
                    <template #default="{row}">
                        <span style="color:#ef0000;cursor: pointer;" @click="handleDel(row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                layout="total,prev,pager,next,jumper"
                background
                :current-page="tableParams.pageNo"
                :page-size="tableParams.pageSize"
                :total="tableParams.totals"
                style="margin-top: 20px;display: flex;justify-content: flex-end;"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<style scoped lang="scss">
.voice-role-wrap{
    .voice-role-table{
        .el-table{
            margin:20px 0;
        }
    }
}
</style>
