<template>
	<div style="height:100%;padding:3px 8px;overflow: auto;" class="postManage-wrap">
		<!--通讯,1-->
		<div id="getPostList">
		</div>
		<!--通讯,1-->
		<!--通讯,2-->
		<div id="savePost">
		</div>
		<!--通讯,2-->
		<!--通讯,3-->
		<div id="deletePosts">
		</div>
		<!--通讯,3-->
		<!--通讯,4-->
		<div id="getUserData">
		</div>
		<!--通讯,4-->
		<!--通讯,5-->
		<div id="getOrgParentTree">
		</div>
		<!--通讯,5-->
		<!--通讯,6-->
		<div id="getOrgChildTree">
		</div>
		<!--通讯,6-->
		<!--布局,5-->
		<el-row ref="postListLayout" :gutter="10" type="flex">
			<!--col,9-->
			<el-col :span="6">
			<!--卡片,2-->
				<el-card shadow="always" class="postList-wrap">
					<div slot="header">
					<i class="el-icon-s-operation front-title"></i>
					岗位列表
					</div>
				<ul id="postList" class="list-group" data-init="poin_initManage({'id':'getPostList','responseFields':{},'requestFields':{}},'handlePostList')">
						<!--文字提示,1-->
						<el-tooltip popper-class="poin-post-list-tip" v-for="(item,index) in postListInfos" :content="item.label"
							:key="item.value" effect="light" placement="bottom-end" :visible-arrow="false"
							:enterable="false" :open-delay="500">
							<li class="list-group-item" @click="getPostId(item,index)" :style="current==index?activeStyle:''">
							{{item.label}}
							</li>
						</el-tooltip>
						<!--文字提示,1-->
					</ul>
					<!--布局,9-->
					<el-row class="postList-footer" type="flex" justify="center">
						<!--col,18-->
						<el-col :span="24">
							<!--按钮,18-->
						<el-button type="primary" :loading="false" size="small" icon="el-icon-plus"
							@click="clearPostInfos">
						新增
						</el-button>
						<!--按钮,18-->
						<!--按钮,19-->
						<el-button type="primary" :loading="false" size="small" icon="el-icon-delete"
							@click="removePostTree">
						删除
						</el-button>
						<!--按钮,19-->
						</el-col>
						<!--col,18-->
					</el-row>
					<!--布局,9-->
				</el-card>
				<!--卡片,2-->
		</el-col>
		<!--col,9-->
		<!--col,10-->
		<el-col :span="18">
			<!--标签页,1-->
			<el-tabs ref="postTab" value="postInfo" type="border-card">
				<!--tabPane,1-->
				<el-tab-pane :label="$t('statics.岗位信息')" name="postInfo">
					<!--布局,7-->
					<el-row ref="postInfoLayout" type="flex" justify="center" class="row-postInfo">
						<!--col,14-->
						<el-col :span="24">
							<!--表单,1-->
							<el-form :model="ruleForm" :rules="rules" ref="postInfoForm" tokenKey="postInfoForm"
								label-width="130px" isToken>
								<!--表单行,1-->
								<el-form-item :label="$t('statics.所属机构/部门')" prop="subsidiaryOrg">
									<!--输入框,1-->
									<el-input event-render="loadText" v-model="ruleForm.subsidiaryOrg"
										type="text" :disabled="false" class="org-search" readonly>
									</el-input>
									<!--输入框,1-->
									<!--按钮,13-->
									<el-button type="primary" :loading="false" icon="el-icon-search"
										class="search-btn" @click="dialogVisible = true">
									</el-button>
									<!--按钮,13-->
								</el-form-item>
								<!--表单行,1-->
								<!--表单行,2-->
								<el-form-item :label="$t('statics.岗位名称')" prop="postName">
									<!--输入框,2-->
									<el-input event-render="loadText" v-model="ruleForm.postName" placeholder="请输入..."
										type="text" :disabled="false">
									</el-input>
									<!--输入框,2-->
								</el-form-item>
								<!--表单行,2-->
								<!--表单行,3-->
								<el-form-item :label="$t('statics.状态')" prop="state">
									<!--单选框,1-->
									<el-radio v-model="ruleForm.state" :label="1">
									有效
									</el-radio>
									<!--单选框,1-->
									<!--单选框,2-->
									<el-radio v-model="ruleForm.state" :label="0">
									锁定
									</el-radio>
									<!--单选框,2-->
								</el-form-item>
								<!--表单行,3-->
								<!--表单行,4-->
								<el-form-item :label="$t('statics.描述')" prop="description">
									<!--输入框,3-->
									<el-input event-render="loadText" v-model="ruleForm.description"
										placeholder="请输入..." type="textarea" :disabled="false">
									</el-input>
									<!--输入框,3-->
								</el-form-item>
								<!--表单行,4-->
								<!--表单行,5-->
								<el-form-item class="col-center">
									<!--按钮,14-->
									<el-button type="primary" :loading="false" icon="el-icon-check"
										@click="savePostInfo">
									提交
									</el-button>
									<!--按钮,14-->
									<!--按钮,15-->
									<el-button type="primary" :loading="false" icon="el-icon-refresh-right"
										@click="resetForm('postInfoForm')">
									重置
									</el-button>
									<!--按钮,15-->
								</el-form-item>
								<!--表单行,5-->
							</el-form>
							<!--表单,1-->
						</el-col>
						<!--col,14-->
					</el-row>
					<!--布局,7-->
				</el-tab-pane>
				<!--tabPane,1-->
				<!--tabPane,2-->
				<el-tab-pane :label="$t('statics.用户')" name="user">
					<!--卡片,3-->
								<!--表单,2-->
								<el-form ref="userInfo" tokenKey="userInfo" label-width="80px">
									<!--布局,8-->
									<el-row ref="row-userInfo" type="flex" justify="start">
										<!--col,15-->
										<el-col :span="9">
											<!--表单行,6-->
											<el-form-item :label="$t('statics.登录名')" >
												<!--输入框,4-->
												<el-input event-render="loadText" v-model="loginName" placeholder="请输入..."
													type="text" :disabled="false" @keyup.enter.native="getUserDataF">
												</el-input>
												<!--输入框,4-->
											</el-form-item>
											<!--表单行,6-->
										</el-col>
										<!--col,15-->
										<!--col,16-->
										<el-col :span="9">
											<!--表单行,7-->
											<el-form-item :label="$t('statics.姓名')">
												<!--输入框,5-->
												<el-input event-render="loadText" v-model="userName" placeholder="请输入..."
													type="text" :disabled="false" @keyup.enter.native="getUserDataF">
												</el-input>
												<!--输入框,5-->
											</el-form-item>
											<!--表单行,7-->
										</el-col>
										<!--col,16-->
										<!--col,17-->
										<el-col :span="6">
											<!--表单行,8-->
											<el-form-item label-width="0px" class="col-center">
												<!--按钮,16-->
												<el-button type="primary" :loading="false" icon="el-icon-search"
													@click="getUserDataF">
												搜索
												</el-button>
												<!--按钮,16-->
												<!--按钮,17-->
												<el-button type="primary" :loading="false" icon="el-icon-refresh-left"
													@click="resetSearch">
												重置
												</el-button>
												<!--按钮,17-->
											</el-form-item>
											<!--表单行,8-->
										</el-col>
										<!--col,17-->
									</el-row>
									<!--布局,8-->
								</el-form>
								<!--表单,2-->
						<!--分页表格,1-->
						<isc-paging-table event-render="pagingTable" ref="userInfoTable"
							:data="userInfoData" :pagination="true" paging-side="server" :offset-default="0"
							:limit-default="10" :pager-count="7" :page-sizes="[10,20,30,40,50,100]"
							:background="true" border >
							<!--分页表格列,1-->
							<el-table-column label="ID" prop="personId" :filter-multiple="true">
							</el-table-column>
							<!--分页表格列,1-->
							<!--分页表格列,2-->
							<el-table-column :label="$t('statics.登录名称')" prop="logName" :filter-multiple="true">
							</el-table-column>
							<!--分页表格列,2-->
							<!--分页表格列,3-->
							<el-table-column :label="$t('statics.姓名')" prop="name" :filter-multiple="true">
							</el-table-column>
							<!--分页表格列,3-->
							<!--分页表格列,4-->
							<el-table-column :label="$t('statics.性别')" prop="sex" :filter-multiple="true">
							</el-table-column>
							<!--分页表格列,4-->
							<!--分页表格列,5-->
							<el-table-column :label="$t('statics.邮箱')" prop="email" :filter-multiple="true">
							</el-table-column>
							<!--分页表格列,5-->
							<!--分页表格列,6-->
							<el-table-column :label="$t('statics.状态')" prop="state" :filter-multiple="true">
							</el-table-column>
							<!--分页表格列,6-->
						</isc-paging-table>
						<!--分页表格,1-->
				</el-tab-pane>
				<!--tabPane,2-->
			</el-tabs>
			<!--标签页,1-->
	</el-col>
	<!--col,10-->
</el-row>
<!--布局,5-->
		<!--对话框,1-->
		<el-dialog :visible.sync="dialogVisible" :title="$t('statics.机构部门列表')" :modal-append-to-body="true"
			:lock-scroll="true" :show-close="true" :close-on-click-modal="true" :close-on-press-escape="true"
			width="35%" v-dialogDrag>
			<el-scrollbar ref="dialogTreeWrap" class="tree-wrap">
				<!--树,1-->
				<el-tree empty-text="无数据" highlight-current lazy :load="searchChild"
					:expand-on-click-node="false" :props="nodeProp" @node-click="clickNode"
					:data="treeData">
				</el-tree>
				<!--树,1-->
			</el-scrollbar>
			<div slot="footer" class="dialog-footer">
				<!--按钮,9-->
				<el-button type="primary" :loading="false" icon="el-icon-check" @click="getSubsidiaryOrg">
				选择
				</el-button>
				<!--按钮,9-->
				<!--按钮,10-->
				<el-button type="primary" :loading="false" icon="el-icon-close" @click="dialogVisible = false">
				取消
				</el-button>
				<!--按钮,10-->
			</div>
		</el-dialog>
		<!--对话框,1-->
	</div>
</template>
<script type="text/javascript">
import * as iscMessage from '@/util/isc-common/messageManage.js'

import { Col,TabPane,Message,Form,FormItem,Tooltip,Radio,TableColumn,Card,Input,Button,Dialog,Select,Tree,Tabs,Option,Row,Scrollbar} from 'element-ui'

import { IscPagingTable} from '@/components/isc'
export default {
 data () {
  return {
    current: -1,
    departmentId: '',
	businessId: '',
	entity: '',
	postListInfos:[],
	postListData:[],
	postNameId: '',
	userName:'',
	loginName: '',
	userInfoData:null,
	dialogVisible:false,
	treeData:[{label: this.$t('statics.一级 1'),children: [{label: this.$t('statics.二级 1-1'),children: [{label: this.$t('statics.三级 1-1-1') }]}]}],
	nodeProp:{children:'children',label: 'text',isLeaf: 'leaf'},
	subsidiaryOrgTemp: '',
	skinName: '',
    getPostList:{"fileName":"post.json","basePath":"{{basePath}}","method":"get","scheme":"{{schemes}}","host":"{{host}}","consume":"0","produce":"0","uri":"/post/get/posts"},
    savePost:{"fileName":"post.json","basePath":"{{basePath}}","method":"post","scheme":"{{schemes}}","host":"{{host}}","consume":"0","produce":"0","uri":"/post/save"},
    getUserData:{"fileName":"post.json","basePath":"{{basePath}}","method":"get","scheme":"{{schemes}}","host":"{{host}}","consume":"0","produce":"0","uri":"/post/get/persons/{postId}"},
    getOrgParentTree:{"fileName":"department.json","basePath":"{{basePath}}","method":"get","scheme":"{{schemes}}","host":"{{host}}","consume":"0","produce":"0","uri":"/department/find/treeParent"},
    getOrgChildTree:{"fileName":"department.json","basePath":"{{basePath}}","method":"get","scheme":"{{schemes}}","host":"{{host}}","consume":"0","produce":"0","uri":"/department/find/treeNode/{departmentNumber}"},
    deletePosts:{"fileName":"post.json","basePath":"{{basePath}}","method":"post","scheme":"{{schemes}}","host":"{{host}}","consume":"0","produce":"0","uri":"/post/delete/{postId}"},
    ruleForm: {
		subsidiaryOrg:'',
		postName:'',
		state: 1,
		description:'',
	},
	rules: {
	subsidiaryOrg: [{ required: true, message: this.$t('statics.请选择所属机构或部门'), trigger: 'change' }],
	postName: [{ required: true, message: this.$t('statics.名称必填'), trigger: 'blur' }]
	}
  }
 },
components: {
    'isc-paging-table':IscPagingTable,
    'el-form':Form,
    'el-radio':Radio,
    'el-scrollbar':Scrollbar,
    'el-col':Col,
    'el-row':Row,
    'el-tabs':Tabs,
    'el-option':Option,
    'el-input':Input,
    'el-button':Button,
    'el-select':Select,
    'el-form-item':FormItem,
    'el-dialog':Dialog,
    'el-table-column':TableColumn,
    'el-card':Card,
    'el-tooltip':Tooltip,
    'el-tree':Tree,
    'el-tab-pane':TabPane
},
mounted (){
let $this = this;
	this.$el.querySelectorAll('*[isToken]').forEach(function(el,index){
		var key =el.getAttribute('tokenKey');
		iscMessage.getTokenID($this,key);
	});
	this.$el.querySelectorAll('*[data-init]').forEach(function(el,index){
		var init =el.getAttribute('data-init');
		var message = iscMessage.initMessageKey(init);
		$this.poin_initManage(message[0],message[1],message[2]);
	});
},
computed : {
	activeStyle: function(){
		this.skinName = this.$store.state.common.skinName
		if(this.skinName == 'purple'){
			return {color: '#fff',backgroundColor: '#a973c1'}
		} else if (this.skinName == 'blue'){
			return {color: '#fff',backgroundColor: '#379cd8'}
		}
	}
},
methods : {
	poin_initManage(messageKey,callback,execBefore){
	messageKey.vue = this;
	iscMessage.messageManage(messageKey,callback,execBefore);
	},
// 岗位列表点击选中事件
	getPostId(item,index) {
		this.current = index;
		this.postNameId = item.value;
		this.postChange();
	},
// 岗位列表初始化
	handlePostList(res,data,mesObj,err){
		if (null != data) {
			if (data.length != 0) {
				var arr = []
				for(var i = 0; i < data.length; i++) {
					var obj = {};
					obj.value = data[i].id;
					obj.label = data[i].name + '(' + data[i].departmentName + ')';
					arr.push(obj);
			}
		this.postListInfos = arr;
		this.postListData = data;
}
}
},
// 岗位列表点击选中事件
	postChange(){
	var listArr = this.postListData;
	var len = listArr.length;
	for(var i = 0; i < len; i++){
		if (listArr[i].id == this.postNameId){
		this.ruleForm.subsidiaryOrg = listArr[i].departmentName;
		this.ruleForm.postName = listArr[i].name;
		this.ruleForm.state = listArr[i].state;
		this.ruleForm.description = listArr[i].description;
		this.departmentId = listArr[i].departmentId;
		this.entity = listArr[i].entity;
		this.businessId = listArr[i].businessId;
		break;
	}
	};
	this.getUserDataF()
	},
//----------------------新增和修改岗位信息------------------------//
	// 保存岗位信息
	savePostInfo(){
		this.$refs.postInfoForm.validate((valid) => {
			if (valid) {
			this.poin_initManage({'id':'savePost','responseFields':{},'requestFields':{}},'afterSavePostInfo','beforeSavePostInfo');
		}
		});
		},
	// 保存岗位信息之后
	afterSavePostInfo(res,data,msgObj,error){
		if(res && res.ok) {
			if ('200' != res.status || null == data) {
			this.$message.error('提交失败');
		} else if (data.post_id == "0") {
			this.$message.error('岗位名称重复');
		} else {
			this.$message.success('提交成功');
			this.poin_initManage({
				'id':'getPostList',
				'responseFields':{},
				'requestFields':{}},
				'handlePostList', null)
			}
		} else if(data){
			this.$message.error(data.errorMsg)
		}	
	},
	// 保存岗位信息之前
	beforeSavePostInfo(msgObj){
		msgObj.setData({
			'id': this.postNameId,
			'departmentId': this.departmentId,
			'name': this.ruleForm.postName,
			'entity': this.entity,
			'state': this.ruleForm.state,
			'description': this.ruleForm.description
		});
		msgObj.setToken("postInfoForm");
		msgObj.loading = true;
	},
// 重置岗位信息的form表单
	resetForm(formName) {
     this.$refs[formName].resetFields();
},
// 清空岗位信息标签页中的岗位信息
	clearPostInfos(){
		this.ruleForm.subsidiaryOrg = '';
		this.ruleForm.postName = '';
		this.ruleForm.description = '';
		this.postNameId = '';
	},
// 选择机构/部门节点
	getSubsidiaryOrg(){
		if(this.subsidiaryOrgTemp) {
			this.ruleForm.subsidiaryOrg = this.subsidiaryOrgTemp
			this.dialogVisible = false
		} else {
			this.$message.info('请选择机构或部门！')
		}
		
	},
//------------------删除岗位列表------------------//
// 删除（岗位）按钮点击事件
	removePostTree() {
		if (this.postNameId == '') {
			this.$message.warning(this.$t('statics.请选择要删除的岗位！'));
			return;
		}
		this.$confirm(this.$t('statics.删除岗位，将会删除岗位及其该岗位下的用户关联信息，是否删除？'), this.$t('statics.提示'), {
			confirmButtonText: this.$t('statics.确定'),
			cancelButtonText: this.$t('statics.取消'),
			type: 'warning'
		}).then(() => {
			this.poin_initManage({
			'id':'deletePosts',
			'responseFields':{},
			'requestFields':{}},
			'afterDeletePosts', 'beforeDeletePosts');
		}).catch(() => {
		
		});
	},
// 删除岗位之前
	beforeDeletePosts(msgObj){
		msgObj.setUriParam({
			'postId': this.postNameId,
		})
	},
// 删除岗位之后
	afterDeletePosts(res, data, msgObj, error) {
		if(res && res.ok){
			this.postNameId = '';
			this.poin_initManage({'id':'getPostList','responseFields':{},'requestFields':{}},'handlePostList')
			this.$message.success(this.$t('statics.删除成功'));
			//清除点击状态
			this.current = -1;
		} else if(data){
			this.$message.error(this.$t('statics.删除该岗位失败！'))
		}
	},

//-----------------------用户表格--------------------------//
// 获取分页表格数据
	getUserDataF(){
		this.poin_initManage({
			'id':'getUserData',
			'responseFields':{'total':'%userInfoTable.total'},
			'requestFields':{'offset':'%userInfoTable.offset','limit':'%userInfoTable.limit'}},
			'afterGetUserData', 'beforeGetUserData')
		},
// 获取分页表格数据之前
	beforeGetUserData(msgObj){
		msgObj.setUriParam({
			'postId': this.postNameId,
		})
		msgObj.addRequestParam({
			'order' : 'asc',
			'postId' : this.postNameId,
			'logname' : this.loginName,
			'name' : this.userName,
		})
	},
// 获取分页表格数据之后
	afterGetUserData(res, data, msgObj, err){
		if(res && res.ok) {
			var newRows = data.rows
			var len = newRows.length
			for(var i = 0; i < len; i++){
				if(newRows[i].sex == 2) {
				   newRows[i].sex = '女';
				} else if(newRows[i].sex == 1) {
				   newRows[i].sex = '男';
				} else { 
				   newRows[i].sex = '-';
				}
				newRows[i].state ? newRows[i].state = this.$t('statics.有效'):newRows[i].state = this.$t('statics.无效')
			if(!newRows[i].email) {
				newRows[i].email = '-'
		}
		}
		this.userInfoData = newRows
		} else if(data){
			this.$message.error(data.errorMsg)
		}
	},
//--------------------用户页面搜索功能------------------------//
// 重置
	resetSearch(){
	this.loginName = '',
	this.userName = ''
	},
//--------------------部门树------------------------------//
	searchChild(node, resolve){
		var $this = this;
		//渲染树方法
		if(node.level == 0){
			//加载树的根节点
			this.poin_initManage({"id":"getOrgParentTree"},function aftert(response,responseData,messageObj){
			var treeDatas=[];
			if(response && response.ok){
			treeDatas = iscMessage.arrayToTree(responseData,'0','id','pid');
			}else{
			$this.$message({message: responseData.errorMsg,center: true,type: 'error'});
		}
			resolve(treeDatas);
			$this.$nextTick(() => {
				$this.$refs.dialogTreeWrap.update()
			})
		});
		}else{
			var nodeid = node.data.id;
			//根据id加载子节点
			this.poin_initManage({"id":"getOrgChildTree"},function aftert(response,responseData,messageObj){
			var treeDatas=[];
			if(response && response.ok){
				//子节点的数据处理
				treeDatas = iscMessage.arrayToTree(responseData,nodeid,'id','pid');
			}else{
				$this.$message({message: responseData.errorMsg,center: true,type: 'eroor'});
			}
			resolve(treeDatas);
			$this.$nextTick(() => {
				$this.$refs.dialogTreeWrap.update()
			})
		},function beforeGet(messageObj){
			messageObj.setUriParam({'departmentNumber':nodeid});
			});
		}
		},
			clickNode(data,node,ev){
			this.subsidiaryOrgTemp = data.text;
			this.departmentId = data.id;
		}
}
}
</script>
<style type="text/css" lang="less" scoped>
.row-postInfo /deep/ .el-col {
	width: 500px;
	margin-left: -130px;
}
.search-btn {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	height: 32px;
	width: 13%;
}
.org-search {
	width: 87%;
}
.org-search /deep/ .el-input__inner {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	border-right: 0px;
	background-color: #eee;
}
/deep/ .el-card.card-postList {
	height: 100%;
}
.col-center {
	display: flex;
	justify-content: center;
}
/deep/ .el-scrollbar__view,.postManage-wrap {
	height: 100%;
}
.tree-wrap /deep/ .el-scrollbar__wrap {
	height: 400px;
}
/* 岗位列表变更  */
.list-group .list-group-item {
	font-size: 14px;
	cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10px 15px;
}
.list-group .list-group-item:hover {
	background-color: #F5F5F5;
}
.list-group {
	padding: 15px;
	height: 643px;
	overflow: auto;
	overflow-x: hidden;
}
.postList-footer {
	position: absolute;
	bottom: 0px;
	border-top: 1px solid #eee;
	padding: 15px 0px;
	width: 100%;
}
.postList-footer /deep/ .el-col {
	display: flex;
	justify-content: center; 
}
.postList-wrap {
	position: relative;
	height: 750px;
}
.postList-wrap /deep/ .el-card__body {
	padding: 0;
}
</style>
<style type="text/css" lang="less">
.poin-post-list-tip {
	padding: 2px 4px;
}
</style>