<template>
	<div>
		<div style="display: flex;height: 100%;">
			<base-layout title="组织机构" ref="organLayout" style="width: 240px;" :bottonShow="false" :isPage="false"
				:operateButtonSwitch="false" >
				<div slot="main" style="height: 100%;border-right: 1px solid #dfe6ec;overflow-y: auto;">
					<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
						:menuData="menuData" @handleNodeClick="orangClick"></base-tree>
				</div>
			</base-layout>
			<base-layout title="用户信息" ref="userLayout"  @pageChange="pageChange" style="flex:1"
				:buttonList="buttonList"  @onFuncBtn="getFuncBtn" :isPage="true">
				<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
					<base-table ref="userCustomtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
						@radioChange="userRadioChange" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData"
						:tableColumn="tableColumn">
					</base-table>
				</div>
			</base-layout>
		</div>
			<right-dialog ref="rightDialog" :orgData="menuData" @handleDialogClose="resetTable"></right-dialog>
			<table-dialog ref="tableDialog" :orgData="menuData" @handleDialogClose="resetTable"></table-dialog>
	</div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
// import baseDialog from "@/components/base/BaseNewDialog";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import basePerson from "@/components/base/basePerson/index.vue";
import configData from "./configData";
import rightDialog from "./rightDialog";
import tableDialog from "./tableDialog";
	import {
		authApi
	} from '@/api/apis/auth'
export default {
	name: "UserInformation",
	components: {
		baseLayout,
		baseTable,
		baseDialog,
		baseForm,
		baseTree,
		basePerson,
		rightDialog,
		tableDialog
	},
	data() {
		return {
			userRadioIndex: false,
			userRadioId: false,
			tabLoading: false,
			tableData: [],
			// 搜索配置
			menuData: [],
			buttonList: [

				{
					'icon': 'el-icon-refresh',
					'menuName': '设置角色'
				},
				{
					'icon': 'el-icon-open',
					'menuName': '设置组织'
				},
				{
					'icon': 'el-icon-turn-off',
					'menuName': '停用',
					type: 'danger'
				},
			],
			pageModel: {
				pageNum: 1,
				pageSize: 20,
			},
			orgId:null,
		}
	},
	computed: {
		// 表头配置
		tableColumn() {
			return configData.tableColumnJson
		},
		// 表头配置
		personColumn() {
			return configData.personColumn
		},
	},
	created() { },
	onShow() { },
	mounted() {
		this.initPage()
		// this.$refs.baseTree.getMenuList()
	},
	filters: {

	},
	methods: {
		// 初始化页面
		initPage() {
			this.getMenuData()
		},
		// 获得树状图
		async getMenuData() {
			let res = await authApi('orgService', 'org', 'queryTree')
			if(res.status == '200'){
				this.menuData = res.attribute
			}
		},
		// 获取用户信息列表
		async getTableList() {
			this.tabLoading = true
			setTimeout(()=>{
				this.tabLoading = false
			},100000)
			this.tableData = []
			let params = {
				...this.pageModel,
				department:this.orgId
			}
			let res =await authApi('userService', 'user', 'queryList','',params)
			if (res.status == '200') {
				this.tableData = res.attribute.list
				this.$nextTick(() => {
				this.$refs.userCustomtable.clearRadioIndex()
				this.$refs.userLayout.setPageTotal(res.attribute.total)
				})
				this.tabLoading = false
			}
		},
		// 单选
		userRadioChange(val) {
			this.userRadioIndex = val.index
			this.userRadioId = val.id
		},
		// 树状图点击
		orangClick(data) {
			this.orgId = data.id
			this.resetTable()
		},
		resetTable() {
			this.pageModel.page = 1
			this.userRadioId = false
			this.userRadioIndex = false
			this.$nextTick(() => {
				this.$refs.userCustomtable.clearSelect()
				this.$refs.userCustomtable.clearRadioIndex()
				this.$refs.userLayout.pageClear()
			})
			this.getTableList()
		},
		// 操作按钮事件
		getFuncBtn(btnEven) {
			if (btnEven.menuName === '新增') { // 新增
				this.$refs.rightDialog.openDialog('新增',this.orgId)
			}
			if (btnEven.menuName != '新增') {
				if (this.userRadioIndex === false) {
					this.$tipConfirm('请勾选需要处理的信息')
					return
				}
			}
			if (btnEven.menuName === '编辑') { // 编辑
				this.$refs.rightDialog.openDialog('编辑',this.orgId,this.userRadioId)
			}
			if (btnEven.menuName === '设置角色') { // 编辑
				this.$refs.tableDialog.openDialog(this.userRadioId)
			}
			if(btnEven.menuName === '删除'){
				this.$delConfirm().then(()=>{
					this.delData(this.userRadioId)
				})
			}
			if (btnEven.menuName === '重置密码') { // 重置密码
				this.$confirm('确认重置密码吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.ResetPwd(this.userRadioId)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});
			}
			if (btnEven.menuName === '启用') { // 导入
				this.$confirm('确认启用吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.openDelData(this.userRadioId)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});
			}
			if (btnEven.menuName === '停用') { // 
				this.$confirm('确认停用吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.closeDelData(this.userRadioId)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});
			}

		},
		async delData(id) {
			let params = {
				id: id
			}
			let res = await authApi('userService','user','delectEntity','',params)
			if(res.status == '200'){
				this.$vmNews("删除成功",'success')
				this.resetTable()
			}
		},
		pageChange(model) {
			this.pageModel= model
			this.getTableList()
		}
	},
}
</script>
<style scoped lang='scss'>
.roleName {
	padding: 10px 0;
	width: 90px;
	border: 2px solid #f2f2f2;
	background-color: #f2f2f2;
	margin: 0px 10px 10px 0px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 0 0 2px #f2f2f2;
	border-radius: 5px;
}

.active {
	background-color: #00a490;
	border: 2px solid #ffffff;
	color: white;
	box-shadow: 0 0 0 2px #00a490;
}

.bigTitle {
	padding-bottom: 10px;
	margin: 10px 0;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
}

.organizationBody {
	display: flex;
	justify-content: space-evenly;
	background-color: #f2f3f4;
	padding: 10px
}
</style>
