<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 slot-scope="{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;" >
				<m-page
					:page_no="page_no"
					:pageSize="10"
					:total="totals"
					@handleCurrentChange="handleCurrentChange"
				/>
				
			</div>
		</div>
	</div>
</template>

<script>
import { interactiveInterface } from '@/api/api'
import mPage from '@/components/mPage.vue'
export default {
	name:'',
	components: { mPage },
	data () {
		return {
			select_users: [],
			userList: [],
			isSlideAllUsers: false,
			select_userArr: [],//选中的数组
			tableColums:[
				{
					label: '姓名',
					key: 'RealName',
				},
				{
					label: '手机号',
					key: 'Mobile',
				},
				{
					label: '角色',
					key: 'RoleName',
				},
				{
					label: '部门/分组',
					key: 'DepartmentGroup',
				},
				{
					label: '状态',
					key: 'Enabled',
				},
				{
					label: '操作',
					key: 'action',
				},
			],
			cascaderIdx: 1,
			page_no: 1,
			totals: 0,
			tableData:[],
		};
	},
	methods: {
		/* 获取所有列表 */
		getAllUser() {
			interactiveInterface.allUserList()
				.then(res => {
					if(res.Ret !== 200) return

					this.userList = res.Data.List;
				})
		},

		/* 获取表格数据 */
		getTableData() {
			interactiveInterface.messageManageList({
				RoleTypeCode:'yb_comment_admin',
				CurrentIndex: this.page_no,
				PageSize:10
			}).then(res => {
				if(res.Ret !== 200) return

				const { List,Paging } = res.Data;

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

			})
		},

		/* 配置权限 */
		setAuthHandle() {
			if(!this.select_users) return this.$message.warning('请选择用户')

			interactiveInterface.setMessageAuth({
				RoleTypeCode:'yb_comment_admin',
				AdminIds: this.select_users.join(',')
			}).then(res => {
				if(res.Ret !== 200) return
				this.getTableData();
			})
		},

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

		handleCurrentChange(e) {
			this.page_no = e;
			this.getTableData();
		},

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

		removeUser({ id }, index) {
			this.select_userArr.splice(index, 1);
      this.select_users = this.select_users.filter(_ => _ !== id );
      this.cascaderIdx++;
		},

		/* 选中用户改变时 */
		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
		}

	},
	mounted() {
		this.getAllUser();
		this.getTableData();
	},
}
</script>
<style lang='scss' scoped>
.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>