<template>
	<div>
		<div style="display: flex;height: 100%;">
			<base-layout title="组织机构" ref="organLayout" style="width: 20%;" :bottonShow="false" :isPage="false"
				:operateButtonSwitch="false" :mainColor="mainColor">
				<div slot="main" style="height: 100%;">
					<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
						:menuData="orangData" @handleNodeClick="orangClick"></base-tree>
				</div>
			</base-layout>
			<base-layout title="用户信息" ref="userLayout" @pageChange="pageChange" style="width: 80%;" :buttonList="buttonList"
				:defaultButtonSwitch="false" @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>
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingDialog"
			class="userDialog" title="权限设置" width="50vw" top="5vh" :footerShow="true"
			@handleConfirmClick="settingConfirmClick">
			<base-layout :showTitle="false" :defaultButtonSwitch="false" >
				<div slot="main">
					<el-tabs v-model="activeName" type="card" @tab-click="handleClick" :before-leave="beforeLeave">
						<el-tab-pane label="菜单权限" name="jurisdictionSetting">
							<jurisdiction-Setting ref="jurisdictionSetting" :menuData="menuData"></jurisdiction-Setting>
						</el-tab-pane>
						<el-tab-pane label="按钮权限" name="buttonSetting">
							<button-setting ref="buttonSetting"></button-setting>
						</el-tab-pane>
						<el-tab-pane label="数据权限" name="dataSetting">
							<data-setting ref="dataSetting"></data-setting>
						</el-tab-pane>
					</el-tabs>
				</div>
			</base-layout>
		</base-dialog>
	</div>
</template>

<script>
import router from '@/router'
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
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 jurisdictionSetting from "./jurisdictionSetting.vue";
import buttonSetting from "./buttonSetting.vue";
import dataSetting from "./dataSetting.vue"
import configData from "./configData";
import { getCompanyId } from '@/utils/auth'
import {
	GetMenuTree,
} from '@/api/apis/menuManage'
import {
	userGetBillList,

} from '@/api/apis/userInformation'
import {
	GetOrganTree,
} from '@/api/apis/organization'
import {
	GetPppedomSet,
	GetAllButton,
	GetAllBillDataPepedom,
	GetAllBilldata,
	PopedomSaveData
} from '@/api/apis/jurisdiction'
export default {
	name: "review",
	components: {
		buttonSetting,
		dataSetting,
		baseLayout,
		baseTable,
		baseDialog,
		baseForm,
		baseTree,
		jurisdictionSetting
	},
	data() {
		return {
			activeName: 'jurisdictionSetting',
			radioIndex: false,
			userRadioId: false,
			settingDialog: false,
			// tableHeight: 'calc(100vh - 227px)',
			mainColor: '#f8f8f8',
			tabLoading: false,
			tableData: [],
			// 搜索配置
			menuData: [],
			orangData: [],
			buttonList: [{
				'icon': 'el-icon-plus',
				'menuName': '权限设置',
				btnFunciton: 'setting'
			},],
			pageModel: {
				page: 1,
				limit: 20,
				departmentID: '',
			},
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			buttonArray: [],
			allButtonList: [],
			menuIDs: [],
			menuList: [],
			menuPopedom: []
		}
	},
	computed: {
		// 表头配置
		tableColumn() {
			return configData.tableColumnJson
		},
	},
	watch: {
		settingDialog: {
			deep: true,
			handler(newValue, oldValue) {
				if (newValue == false) {
					this.$refs.dataSetting.dataList = []
					this.$refs.jurisdictionSetting.$refs.menuTree.$refs.elTree.setCheckedKeys([])
					this.$refs.buttonSetting.classifyButtonList = []
				}
			}
		}
	},
	created() { },
	onShow() { },
	mounted() {
		this.initPage()
	},
	filters: {

	},
	methods: {
		beforeLeave(activeName, oldActiveName) {
			if(oldActiveName == 'jurisdictionSetting'){
				this.menuPopedom = this.$refs.jurisdictionSetting.menuPopedom
				this.checkdata = this.$refs.jurisdictionSetting.checkdata
			}
			if (oldActiveName == 'jurisdictionSetting' && activeName == "buttonSetting") {
				if (this.menuPopedom.length == 0) {
					this.$vmNews("当前用户未分配菜单权限")
					return false
				}
			}
			if (oldActiveName == 'dataSetting' && activeName == "buttonSetting") {
				// return false
			}
		},
		// 切换tab
		handleClick(tab, event) {
			if (this.activeName == 'buttonSetting') {
				this.checkdata = this.$refs.jurisdictionSetting.checkdata
				this.$refs.buttonSetting.GetAllButtonList(this.menuPopedom, this.checkdata)
			}
			if (this.activeName == 'dataSetting') {
				this.$refs.dataSetting.inPage()
			}
		},
		// 获取菜单选中
		getMenuIDs(menuData) {
			menuData.forEach(el => {
				if (el.type) {
					this.menuList.push(el)
					this.menuIDs.push(el.id)
				}
				if (el.children != null && el.children && el.children.length) {
					this.getMenuIDs(el.children)
				}
			})
		},
		// 初始化页面
		initPage() {
			this.getTableList()
			this.getOrganList()
		},
		//获取菜单树
		async getMenuData() {
			let res = await GetMenuTree({})
			if (res.code == 1) {
				let arr = JSON.parse(res.data[0])
				this.menuData = JSON.parse(res.data[0])
				this.changeMenu(this.menuData, 0)
				// this.getButtonArray(this.menuData)
			}
		},
		// 菜单树添加参数
		changeMenu(data, num) {
			let level = num
			level = level + 1
			data.forEach(el => {
				el.buttonList = []
				el.type = false
				// el.level = level
				if (el.children != null && el.children && el.children.length) {
					this.changeMenu(el.children, level)
				}
			})
		},
		// 获取用户信息列表
		async getTableList() {
			this.tabLoading = true
			this.tableData = []
			let params = {
				...this.pageModel
			}
			let res = await userGetBillList(params)
			if (res.code === 1) {
				this.tableData = res.data[1]
				this.$nextTick(() => {
				this.$refs.userCustomtable.clearRadioIndex()

					this.$refs.userLayout.setPageTotal(res.data[0])
				})
				this.tabLoading = false
			}
		},

		getButtonArray(menuData) {
			menuData.forEach((el, index) => {
				this.allButtonList.forEach(item => {
					if (el.id == item.MenuID) {
						item.active = false
						el.buttonList.push(item)
					}
				})
				if (el.children != null && el.children && el.children.length) {
					this.getButtonArray(el.children)
				}
			})
		},
		// 单选
		userRadioChange(val) {
			this.radioIndex = val.index
			this.userRadioId = val.u_UserID
		},
		// 获取组织列表
		async getOrganList() {
			this.$refs.baseTree.treeLoading = true
			setTimeout(() => {
				this.$refs.baseTree.treeLoading = false
			}, 3000)
			let params = {
				// CompanyID: "46"
				CompanyID: this.$store.state.user.companyID ? this.$store.state.user.companyID : getCompanyId()
			}
			let res = await GetOrganTree(params)
			if (res.success === 'true') {
				this.orangData = JSON.parse(res.data[0])
				this.$refs.baseTree.treeLoading = false
			}
		},

		// 树状图点击
		orangClick(data) {
			this.pageModel.departmentID = data.id
			this.resetTable()
			// this.result()
		},

		resetTable() {
			this.pageModel.page = 1
			this.userRadioId = false
			this.radioIndex = false
			this.$nextTick(() => {
				this.$refs.userCustomtable.clearRadioIndex()
				this.$refs.userLayout.pageClear()
			})
			this.getTableList()
		},
		// 操作按钮事件
		getFuncBtn(btnEven) {
			if (this.radioIndex === false) {
				this.$vmNews("请选择一条数据")
				return
			}
			this[btnEven.btnFunciton]()
		},
		setting() {
      this.getMenuData()
			this.settingDialog = true
			this.activeName = "jurisdictionSetting"
			this.GetPppedomData()

		},
		async GetPppedomData() {
			let params = {
				objectID: this.userRadioId,
				kindid: 1
			}

			let res = await GetPppedomSet(params)
			this.$refs.jurisdictionSetting.menuLoading = true
			setTimeout(() => {
				this.$refs.jurisdictionSetting.menuLoading = false
			}, 3000)
			if (res.code == 1) {
				const data = res.data
				let menuIDs = data[0].length > 0 ? data[0][0].fp_MenuIdList.split(',') : []
				this.$refs.jurisdictionSetting.$refs.menuTree.selectData = menuIDs
				this.$refs.jurisdictionSetting.$refs.menuTree.checkChange(menuIDs)
				let buttonPopedom = this.getbuttonPopedomList(res.data[1])
				this.$refs.buttonSetting.buttonPopedom = buttonPopedom
				let activeList = this.getActiveList(res.data[2])
				this.$refs.dataSetting.activeList = activeList
				this.$refs.jurisdictionSetting.menuLoading = false
				// selectData
			}
		},
		getActiveList(data) {
			let array = []
			data.forEach(el => {
				el.dp_popeList.split(',').forEach(item => {
					array.push(item)
				})
			})
			return array
		},
		getbuttonPopedomList(data) {
			let array = []
			data.forEach(el => {
				el.op_OperateKindList.split(',').forEach(item => {
					array.push(item)
				})
			})
			return array
		},
		pageChange(model) {
			this.pageModel.page = model.page
			this.pageModel.limit = model.limit
			this.getTableList()
		},
		settingConfirmClick() {
			let menuPopedom = this.$refs.jurisdictionSetting.menuPopedom.join(",")
			let buttonPopedom = this.getButtonPopedom(this.$refs.buttonSetting.classifyButtonList)
			let dataPopedom = this.getDataPopedom(this.$refs.dataSetting.dataList)
			let params = {
				kindid: 1,
				objectID: this.userRadioId,
				menuPopedom: menuPopedom,
				buttonPopedom: buttonPopedom,
				dataPopedom: dataPopedom,
			}
			this.saveData(params)
		},
		async saveData(params) {
			let res = await PopedomSaveData(params)
			if (res.code == 1) {
				this.$vmNews("保存成功", 'success')
				this.activeName = "jurisdictionSetting"
				this.settingDialog = false

				this.$store.dispatch('GenerateRoutes').then(accessRoutes => {
					// 根据roles权限生成可访问的路由表
					for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
						const element = accessRoutes[i]
						router.addRoutes(accessRoutes) // 动态添加可访问路由表
					}
					localStorage.setItem('routeList', JSON.stringify(accessRoutes))
				})
			}
		},
		getDataPopedom(dataPopedom) {
			let array = []
			dataPopedom.forEach(el => {
				el.dp_popeList = []
				el.buttonList.forEach(item => {
					if (item.type) {
						el.dp_popeList.push(item.id)
					}
				})
			})
			dataPopedom.forEach(el => {
				if (el.dp_popeList.length > 0) {
					let params = {
						dp_billKindID: el.billKindID,
						dp_popeList: el.dp_popeList.join(',')
					}
					array.push(params)
				}
			})
			return array
		},
		getButtonPopedom(buttonPopedom) {
			let array = []
			// let op_OperateKindList = []
			buttonPopedom.forEach(el => {
				el.op_MenuID = el.id
				el.op_OperateKindList = []
				el.buttonList.forEach(item => {
					if (item.type) {
						el.op_OperateKindList.push(item.id)
					}
				})
			})
			buttonPopedom.forEach(el => {
				if (el.op_OperateKindList.length > 0) {
					let params = {
						op_MenuID: el.op_MenuID,
						op_OperateKindList: el.op_OperateKindList.join(',')
					}
					array.push(params)
				}
			})
			return array
		},
	},
}
</script>
<style scoped>
>>>.el-dialog__body {
	padding: 0 25px;
}
</style>
<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>
