<script setup>
//留言管理员
import { ref, reactive } from 'vue'
import { interactiveInterface } from '@/api/api'
import { ElMessage, ElMessageBox } from 'element-plus'
let select_users = ref([])
let userList = ref([])
function getAllUser(){
    interactiveInterface.allUserList()
        .then(res => {
            if(res.Ret !== 200) return

            userList.value = res.Data.List||[];
        })
}
getAllUser()
let cascaderIdx = ref(0)
function removeTagChange(){
    select_users.value = select_users.value.filter(_ => _ !== val);
    cascaderIdx.value = cascaderIdx.value++;
    selectUsers()
}
/* 选中用户改变时 */
function selectUsers(){
    select_userArr.value = filterData([],userList.value)
}
function filterData(arr,data){
    data.forEach(item => {
        if(select_users.value.includes(item.AdminId)) {
            arr.push({id: item.AdminId,name: item.RealName,})
        }else {
            item.ChildrenList && filterData(arr,item.ChildrenList)
        }
    });
    return arr
}
function setAuthHandle(){
    if(!select_users.value) return ElMessage.warning('请选择用户')
    interactiveInterface.setMessageAuth({
        RoleTypeCode:'yb_comment_admin',
        AdminIds: select_users.value.join(',')
    }).then(res => {
        if(res.Ret !== 200) return
        getTableData()
    })
}
let select_userArr = ref([])
function removeUser({id},index){
    select_userArr.value.splice(index, 1);
    select_users.value = select_users.value.filter(_ => _ !== id );
    cascaderIdx.value = cascaderIdx.value++
}
let isSlideAllUsers = ref(false)
const tableColums = [
    {label: '姓名',key: 'RealName'},
    {label: '手机号',key: 'Mobile'},
    {label: '角色',key: 'RoleName'},
    {label: '部门/分组',key: 'DepartmentGroup'},
    {label: '状态',key: 'Enabled'},
    {label: '操作',key: 'action'}
]
function delHandle({SysRoleAdminId}){
    ElMessageBox.confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        interactiveInterface.delMessageAuth({ SysRoleAdminId })
            .then(res => {
                if(res.Ret !== 200) return
                ElMessage.success('删除成功')
                getTableData()
            })
    })
}
let tableParams = reactive({
    pageNo:1,
    pageSize:10,
    total:0
})
function handleCurrentChange(page){
    tableParams.pageNo = page
    getTableData()
}
let tableData = ref([])
function getTableData(){
    interactiveInterface.messageManageList({
        RoleTypeCode:'yb_comment_admin',
        CurrentIndex: tableParams.pageNo,
        PageSize:tableParams.pageSize
    }).then(res => {
        if(res.Ret !== 200) return

        const { List,Paging } = res.Data;

        tableData.value = List || [];
        tableParams.total = Paging.Totals||0;

    })
}
getTableData()
</script>

<template>
    <div class="messageManage-conatainer">
        <div class="main_top">
            <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"
                :key="cascaderIdx"
                @remove-tag="removeTagChange"
                collapse-tags
                clearable
                filterable
                @change="selectUsers"
            />
            <el-button type="primary" style="margin-left: 10px;" @click="setAuthHandle">配置权限</el-button>
            <div class="select-users" :style="`height: ${isSlideAllUsers ? 'auto' : '40px'}`"  v-if="select_userArr.length">
                <el-tag v-for="(user,index) in select_userArr" :key="user.id" type="info" closable @close="removeUser(user,index)">{{ user.name }}</el-tag>
                <div class="slide-cont" @click="isSlideAllUsers = !isSlideAllUsers">
                    <span>{{ isSlideAllUsers ? '收起' : '展开'}}</span>  
                    <i :class="isSlideAllUsers ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </div>
            </div>
        </div>
        <div class="main">
            <label>留言管理员列表</label>
            <el-table
                border
                :data="tableData"
                style="margin-top: 20px"
            >
                <el-table-column
                    v-for="item in tableColums"
                    :key="item.label"
                    :label="item.label"
                    :width="item.widthsty"
                    :min-width="item.minwidthsty"
                    align="center"
                >
                    <template #header>
                        <span>{{ item.label }}</span>
                        <el-tooltip  content="此项删除只删除该用户的留言管理员权限" placement="top-start" v-if="item.key === 'action'">
                            <i class="el-icon-question"/>
                        </el-tooltip>
                    </template>	
                    <template #default="{row}">
                        <span v-if="item.key === 'Enabled'">{{ row[item.key] === 1 ? '启用' : '禁用' }}</span>
                        <span v-else-if="item.key === 'action'" class="deletesty" @click="delHandle(row)">删除</span>
                        <span v-else>{{ row[item.key] || '——' }}</span>
                    </template>
                </el-table-column>
                <div slot="empty" style="padding: 100px 0">
                    <img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:128px;height:128px;margin: 0 auto;">
                    <span>暂无数据</span>
                </div>
            </el-table>
            <div style="height: 40px;margin-top: 10px; padding: 0 20px;" >
                <el-pagination
                    layout="total,prev,pager,next,jumper"
                    background
                    :current-page="tableParams.pageNo"
                    :page-size="tableParams.pageSize"
                    :total="tableParams.total"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px;display: flex;justify-content: flex-end;"
                />
                
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.messageManage-conatainer{
	.main_top {
		margin-bottom: 20px;
		padding: 20px 30px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
		.select-users{
			margin-top: 20px;
			padding-right: 45px;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			overflow: hidden;
			.slide-cont {
				position: absolute;
				right: 0;
				top: 10px;
				color: #409EFF;
			}
			.el-tag {
				margin: 5px;
			}
		}
	}
	.main {
		background: #fff;
		padding: 20px;
		border: 1px solid #ececec;
		border-radius: 4px;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
		height: calc(100vh - 240px);
		overflow: hidden;
		position: relative;
	}
}
</style>
