<template>
    <div class="voice-role-wrap">
        <div>
            <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:30px" @click="handleSetAuth">配置权限</el-button>
        </div>
        <div style="margin-top:30px">
            <el-table
                :data="tableData"
                border
                style="width: 100%"
            >
                <el-table-column
                    prop="RealName"
                    label="姓名"
                    width="180"
                    align="center"
                />
                <el-table-column
                    prop="Mobile"
                    label="手机号"
                    width="180"
                    align="center"
                />
                <el-table-column
                    prop="RoleName"
                    label="角色"
                    width="180"
                    align="center"
                />
                <el-table-column
                    prop="DepartmentGroup"
                    label="部门/分组"
                    align="center"
                />
                <el-table-column
                    prop="Enabled"
                    label="状态"
                    width="180"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span :style="{color:scope.row.Enabled===1?'':'#ef0000'}">{{scope.row.Enabled===1?'启用':'禁用'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="180"
                    align="center"
                >
                    <template #header>
                        <el-tooltip 
                            effect="dark" 
                            content="此项删除只删除该用户的语音管理员权限" 
                            placement="top-start"
                        >   
                            <div>
                                <span>操作</span>
                                <i class="el-icon-question"></i>
                            </div>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <span style="color:#ef0000;cursor: pointer;" @click="handleDel(scope.row)">删除</span>
                    </template>
                
                </el-table-column>
                <template slot="empty">
                    <div style="margin:50px 0">
                        <img style="width:150px" src="~@/assets/img/cus_m/nodata.png" alt="">
                        <div>暂无数据~</div>
                    </div>
                </template>
            </el-table>
			<el-pagination
				layout="total,prev,pager,next,jumper" 
				background
				:current-page="page_no"
				@current-change="handleCurrentChange"
				:page-size="pageSize" 
				:total="totals"
				style="float:right;margin-top:20px">
			</el-pagination>
        </div>
       
    </div>
</template>

<script>
import { interactiveInterface } from '@/api/api'
export default {
    data() {
        return {
            tableData:[],
            page_no:1,
            pageSize:15,
            totals:0,

            userList:[],
            select_users:[],
            cascaderIdx: 1,
        }
    },
    created() {
        this.getAllDepart()
        this.getTableList()
    },
    methods:{
        // 获取所有部门
        async getAllDepart(){
            const res=await interactiveInterface.allUserList()
            if(res.Ret===200){
                const arr=res.Data.List||[]
                this.userList=arr
            }
        },

        removeTagChange(val) {
			this.select_users = this.select_users.filter(_ => _ !== val);
            this.cascaderIdx++;
            this.selectUsers()
		},

        /* 选中用户改变时 */
		selectUsers() {
			this.select_userArr = this.filterData([],this.userList)
		},

        filterData(arr,data) {
            data.forEach(item => {
				if(this.select_users.includes(item.AdminId)) {
					arr.push({
						id: item.AdminId,
                        name: item.RealName,
					})
				}else {
					item.ChildrenList && this.filterData(arr,item.ChildrenList)
				}
            });
			return arr
		},

        //获取列表
        async getTableList(){
            const res=await interactiveInterface.messageManageList({
                RoleTypeCode:'yb_voice_admin',
				CurrentIndex: this.page_no,
				PageSize:this.pageSize
            })
            if(res.Ret !== 200) return

			const { List,Paging } = res.Data;

			this.tableData = List || [];
			this.totals = Paging.Totals;
        },

        //翻页
        handleCurrentChange(e){
            this.page_no=e
            this.getTableList()
        },
        
        //设置权限
        handleSetAuth(){
            if(!this.select_users.length>0) return this.$message.warning('请选择用户')
            interactiveInterface.setMessageAuth({
				RoleTypeCode:'yb_voice_admin',
				AdminIds: this.select_users.join(',')
			}).then(res => {
				if(res.Ret !== 200) return
				this.getTableList();
                this.select_users=[]
			})
        },

        //删除
        handleDel({SysRoleAdminId}){
            this.$confirm('确认删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
				interactiveInterface.delMessageAuth({ SysRoleAdminId })
				.then(res => {
					if(res.Ret !== 200) return
					this.$message.success('删除成功')
					this.getTableList();
				})
			})
        }

    }
}
</script>

<style lang="scss" scoped>
.voice-role-wrap{

}
</style>