<!--
* @name: 人员设置
* @author:zhangpengcheng
-->

<template>
	<div>
		<!-- 人员弹窗 -->
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="addDialog"
			@handleClose="handleClose" class="userDialog" title="新增人员" width="700px" top="10vh">
			<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" @elDialogClick="organClick"
				:rules="userRules" @onSubmit="getSubmit">
			</base-form>
		</base-dialog>
		<div flex style="height: 100%;">
			<base-layout title="组织机构" style="width:260px;" :defaultButtonSwitch="false" :isPage="false"
				:mainColor="mainColor" :operateButtonSwitch="false" v-loading="treeLoading">
				<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="treeClick"></base-tree>
				</div>
			</base-layout>
			<base-layout title="人员信息" ref="personLayout" @pageChange="pageChange" :buttonList="buttonList"
				@onFuncBtn="getFuncBtn" :isPage="true" style="flex:1;">
				<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
					<base-table ref="personCustomtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
						@radioChange="radioChange" :tableHeight="tableHeight" :tableData="tableData"
						:tableColumn="tableColumn" :slotrow="true">
						<!--  入职时间  -->
						<template v-slot:p_EntryTime="{ row }">
							<span>{{ row.row.p_EntryTime | timeDate }}</span>
						</template>
						<!--  生日  -->
						<template v-slot:p_BirthDay="{ row }">
							<span>{{ row.row.p_BirthDay | timeDate }}</span>
						</template>
					</base-table>
				</div>
			</base-layout>
		</div>

		<!-- 部门+对外签订弹窗 -->
		<base-organization ref="baseOrganization" :menuData="menuData"
			@handleConfirmClick="organizationHandleConfirm"></base-organization>
		<!-- 		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false"
			@handleConfirmClick="organizationHandleConfirm" :dialogVisible.sync="organizationDialog" class="userDialog"
			title="选择组织机构" width="700px" top="10vh" :footerShow="true">
			<div class="organizationBody">
				<base-layout title="组织机构" style="width: 45%;border-radius: 5px;height: 350px;overflow: auto;"
					:bottonShow="false" :isPage="false" :mainColor="mainColor" :mainHight='orangHight'>
					<div slot="main">
						<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false"
							:showCheckbox="false" :menuData="menuData" @handleNodeClick="orangNodeClick">
						</base-tree>
					</div>
				</base-layout>
				<base-layout title="选中机构" style="width: 45%;border-radius: 5px;height: 350px;" :bottonShow="false"
					:isPage="false" :bodyHight="treeHight">
					<div slot="main" style="padding: 10px;">
						<div flex="cross:center" style="margin-bottom: 10px;">
							<label style="width: 35%;">机构编码</label>
							<el-input style="flex:1" v-model="organizationForm.code"></el-input>
						</div>
						<div flex="cross:center">
							<label style="width: 35%;">机构名称</label>
							<el-input style="flex:1" v-model="organizationForm.ParentOrganName"></el-input></div></div></base-layout></div></base-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 baseOrganization from "@/components/base/baseOrganization/index.vue";
import { getCompanyId } from '@/utils/auth'
import {
	PersonList,
	PersonDetail,
	PersonSaveData,
	PersonDelData,
	PersonOpen,
	PersonClose
} from '@/api/apis/personnelSettings'
import {
	GetOrganTree
} from '@/api/apis/organization'
import {
	dataDictionaryGetBillList
} from '@/api/apis/dataDictionary'
import configData from "./configData";

export default {
	name: "review",
	components: {
		baseLayout,
		baseTable,
		baseDialog,
		baseForm,
		baseTree,
		baseOrganization
	},
	data() {
		return {
			treeLoading: false,
			radioIndex: false,
			radioId: false,
			treeHight: '350px',
			orangHight: 'calc(100% - 39px)',
			mainColor: '#f8f8f8 ',
			organizationDialog: false, //选择组织机构弹窗
			menuData: [],
			buttonList: [
				{
					icon: 'button_reset',
					menuName: '启用',
				},
				{
					icon: 'button_reset',
					menuName: '停用',
					type: 'danger'
				},
			],
			tabLoading: false,
			tableData: [],
			// 搜索配置
			searchModel: configData.searchModelJson,
			// 列表参数
			param: {},
			addDialog: false,
			ruleForm: {
				roleName: null, // 角色名称
				roleNumber: null, // 角色编码
				order: null, // 排序
				describe: null, // 描述
			},
			roleOptions: configData.roleOptions,
			formRow: configData.formRow,
			userRules: configData.userRules,
			isFunBtn: true,
			pageModel: {
				page: 1,
				limit: 20,
				departmentID: "",
				Sequence: '',
				SequenceName: ''
			},
			P_PersonID: 0,
			organizationForm: {}
		}
	},
	computed: {
		// 表头配置
		tableColumn() {
			return configData.tableColumnJson
		},
	},
	watch: {

		addDialog: {
			deep: true,
			handler(newValue, oldValue) {
				if (newValue == false) {
					this.$refs.customForm.choiceAssignment({})
				} else {
					this.getLevelnList()
					this.getEducationList()
					this.getPostList()
				}
			}
		}
	},
	created() { },
	onShow() { },
	mounted() {
		this.initPage()

	},
	filters: {
		timeDate(row) {
			if (!row) {
				return
			}
			return row.split('T')[0]
		}
	},
	methods: {
		// 点击单元格进行多选操作
		radioChange(val) {
			this.radioIndex = val.index
			this.radioId = val.p_PersonID
		},
		// 树状图点击
		treeClick(data) {
			this.pageModel.departmentID = data.id
			this.radioIndex = false
			this.radioId = false
			this.resetTable()
		},
		// 初始化页面
		initPage() {
			// this.getTableList()
			this.getTreeList()

		},
		// 获得树状图
		async getTreeList() {
			this.treeLoading = true
			setTimeout(() => {
				this.treeLoading = false
			}, 180000)
			let params = {
				CompanyID: ""
				// CompanyID: this.$store.state.user.companyID?this.$store.state.user.companyID:getCompanyId()
			}
			let res = await GetOrganTree(params)
			if (res.success === 'true') {
				this.menuData = JSON.parse(res.data[0])
				this.treeLoading = false
			}
		},
		// 删除功能
		async tableDelData(id) {
			let params = {
				id: id
			}
			let res = await PersonDelData(params)
			if (res.code == 1) {
				this.$vmNews('删除成功', 'success')
				this.resetTable()
				// this.pageModel.page = 1
				// this.$refs.personLayout.setPageNum(1)
			}
		},

		// 获得详情
		async getDetail(id) {
			let params = {
				id: id
			}
			let res = await PersonDetail(params)
			res.data[0].o_OrganName = res.data[0].orgainName
			this.addDialog = true
			this.$nextTick(() => {
				this.$refs.customForm.choiceAssignment(res.data[0])
			})
		},
		// 获取学历类型
		async getEducationList() {
			let params = {
				KindId: 3,
				page: 1,
				limit: 999,
				Sequence: '',
				SequenceName: ''
			}
			let res = await dataDictionaryGetBillList(params)
			if (res.code == 1) {
				let arrList = []
				if (res.data[0] > 0) {
					res.data[1].forEach(el => {
						let arr = {
							label: el.ddd_DicDetailsName,
							value: el.ddd_DicDetailsID
						}
						arrList.push(arr)
					})
				}
				configData.formRow[2].elCol[1].options = arrList
			}
		},
		// 获取职务类型
		async getPostList() {
			let params = {
				KindId: 1,
				page: 1,
				limit: 999,
				Sequence: '',
				SequenceName: ''
			}
			let res = await dataDictionaryGetBillList(params)
			if (res.code == 1) {
				let arrList = []
				if (res.data[0] > 0) {
					res.data[1].forEach(el => {
						let arr = {
							label: el.ddd_DicDetailsName,
							value: el.ddd_DicDetailsID
						}
						arrList.push(arr)
					})
				}
				configData.formRow[3].elCol[0].options = arrList
			}
		},
		// 获取级别类型
		async getLevelnList() {
			let params = {
				KindId: 2,
				page: 1,
				limit: 999,
				Sequence: '',
				SequenceName: ''
			}
			let res = await dataDictionaryGetBillList(params)
			if (res.code == 1) {
				let arrList = []
				if (res.data[0] > 0) {
					res.data[1].forEach(el => {
						let arr = {
							label: el.ddd_DicDetailsName,
							value: el.ddd_DicDetailsID
						}
						arrList.push(arr)
					})
				}
				configData.formRow[3].elCol[1].options = arrList
			}
		},
		// 获得列表
		async getTableList() {
			this.tabLoading = true
			this.tableData = []
			this.$refs.personCustomtable.clearRadioIndex()
			let params = {
				...this.pageModel
			}
			let res = await PersonList(params)
			if (res.code === 1) {
				this.tableData = res.data[1]
				this.$refs.personCustomtable.clearRadioIndex()

				this.$refs.personLayout.setPageTotal(res.data[0])

			}
			this.tabLoading = false
		},
		// 停用
		async closeDelData(id) {
			let params = {
				id: id
			}
			let res = await PersonClose(params)
			if (res.code == 1) {
				this.$vmNews('已停用', 'success')
				this.resetTable()
			}
		},
		// 启用
		async openDelData(id) {
			let params = {
				id: id
			}
			let res = await PersonOpen(params)
			if (res.code == 1) {
				this.$vmNews('已启用', 'success')
				this.resetTable()
			}
		},
		// 操作按钮事件
		getFuncBtn(btnEven) {
			if (btnEven.menuName === '新增') { // 新增
				this.addDialog = true
				this.P_PersonID = 0
				// this.$nextTick(()=>{
				// 	this.$refs.customForm.resetForm('ruleForm')
				// })
			} else {
				if (!this.judgeCheckbox()) {
					return
				}
			}
			if (btnEven.menuName === '编辑') { // 编辑
				// if (!this.judgeCheckbox()) {
				// 	return
				// }
				this.P_PersonID = this.radioId
				this.getDetail(this.radioId)
			}
			if (btnEven.menuName === '删除') { // 删除
				// if (!this.judgeCheckbox()) {
				// 	return
				// }
				this.$confirm('确认删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.tableDelData(this.radioId)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
			if (btnEven.menuName === '停用') { // 停用
				// if (!this.judgeCheckbox()) {
				// 	return
				// }
				this.$confirm('确认停用吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.closeDelData(this.radioId)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
			if (btnEven.menuName === '启用') { // 停用

				// if (!this.judgeCheckbox()) {
				// 	return
				// }
				this.$confirm('确认启用吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.openDelData(this.radioId)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		judgeCheckbox() {
			if (this.radioIndex === false) {
				this.$vmNews('请勾选需要处理的信息！')
				return false
			}
			return true
		},

		// 查询、筛选事件
		pageChange(model) {
			this.pageModel.limit = model.limit
			this.pageModel.page = model.page
			this.getTableList()
		},

		async getSubmit(data) {
			let params = {
				...data,
				P_PersonID: this.P_PersonID,
			}
			let res = await PersonSaveData({
				dataMain: params
			})
			if (res.code == 1) {
				this.$vmNews('保存成功', 'success')
				this.addDialog = false
				this.resetTable()
			}
		},
		resetTable() {
			this.pageModel.page = 1
			this.radioIndex = false
			this.radioId = false
			this.$nextTick(() => {
				this.$refs.personCustomtable.clearSelect();
				this.$refs.personLayout.pageClear()
			})
			this.getTableList()
		},

		handleClose() {
			this.$nextTick(() => {
				this.$refs.customForm.resetForm('ruleForm')
			})
		},
		organClick(row) {
			// this.organizationDialog = true
			this.$refs.baseOrganization.dialogVisible = true
		},
		organizationHandleConfirm() {
			// this.$refs.customForm.getField(this.propLabel, this.propvalue)
			let organizationForm = this.$refs.baseOrganization.organizationForm
			this.$nextTick(() => {
				this.$refs.customForm.getField('o_OrganName', organizationForm.label)
				this.$refs.customForm.getField('P_OrganID', organizationForm.id)
			})
			// this.organizationDialog = false
			this.$refs.baseOrganization.dialogVisible = false
		},
		orangNodeClick(data) {
			this.organizationForm = {
				code: data.code,
				O_OrganID: data.id,
				ParentOrganName: data.label,
			}
		}
	},
}
</script>
<style scoped lang='scss'>
/* .userDialog {
		margin-top: 10vh;
		width: 700px;
		height: 80vh;
		overflow: hidden;
		overflow-y: scroll;
		scroll-widhth: 0;
	} */

.el-form-item {
	color: red !important
}

.organizationBody {
	display: flex;
	justify-content: space-evenly;
	background-color: #f2f3f4;
	padding: 10px
}
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

input[type="number"] {
	-moz-appearance: textfield;
}
</style>
