<template>
	<div class="flexOne">
		<div :class="{approval_page_layer:showlayer}" @click="closeLayer">
			<div :class="{approval_person_set:true,approval_person_set_right:isTransition}" @click.stop>
				<p class="setTitle">审批人设置</p>
				<div class="approval_person_layerContent">
					<div class="approval_page_title">审批人类别</div>
					<p style="padding-left: 20px;">
						<el-radio-group v-model="approvalType" @change='clearValue'>
							<el-radio :label="1">主管</el-radio>
							<el-radio :label="2">指定成员</el-radio>
							<el-radio :label="3">岗位</el-radio>
						</el-radio-group>
					</p>

					<div class="approval_layer_info" v-if="approvalType==1">
						发起人的&nbsp;
						<el-select v-model='zgObj.RoleOrInitiator' @change="changeValue">
							<el-option v-for='item in zgList' :label='item.label' :value='item.value' :key='item.value'>
							</el-option>
						</el-select>
					</div>
					<div class="approval_layer_info" v-if="approvalType==2">
						<div class="normalMember">
							<ul>
								<li v-for="item in showMember">{{item.DepartmentName}}</li>  <!-- @click="mySetCheckedKeys(item.DepartmentId)"-->
							</ul>
						</div>
						<input type="button" class="normalBtn" @click="getMember(),mySetCheckedKeys(-1)" value="添加成员" />
						<div style="margin: 10px 0;" v-if="showMember.length>1">
							<el-radio-group v-model="zgObj.AuditWay">
								<el-radio :label="2">会签（须所有审批人同意）</el-radio>
								<el-radio :label="3">或签（一名审批人同意或拒绝即可）</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="approval_layer_info" v-if="approvalType==3">
						<div class="normalMember">
							<ul>
							  <li v-for="item in showRole">{{item.DepartmentName}}</li>  <!-- @click="deleteRole()-->
							</ul>
						</div>
						<input type="button" class="normalBtn" @click="getRole()" value="添加岗位" />
						<div style="margin: 10px 0;">
							<el-radio-group v-model="zgObj.AuditWay">
								<el-radio :label="2">会签（须所有审批人同意）</el-radio>
								<el-radio :label="3">或签（一名审批人同意或拒绝即可）</el-radio>
							</el-radio-group>
						</div>
					</div>

				</div>
				<div class="approval_page_layer_bottom">
					<input type="button" class="hollowFixedBtn" value="取消" @click="closeLayer" /> &nbsp;&nbsp;
					<input type="button" class="normalBtn"  v-if='addBtn' value="确定" @click="addNode" />
					<input type="button" class="normalBtn"  v-if='!addBtn' value="修改节点" @click="saveUpdateNode" />
				</div>
			</div>
		</div>
		<input type="button" class="hollowFixedBtn approval_back_btn" value="返回" @click="goback"/>
		<div class="approval_page_content" v-loading="loading">
			<p style="text-align: center; border-bottom:1px solid #f1f1f1;  padding: 15px 0 10px 0;font-size: 16px;">{{TemplateTypeName}}流程设置</p>
			<div class="approval_page_title">默认审批流程</div>
			<div class="approval_person_content">
				<span class="approval_span_type">默认审批人</span>
				<div class="approval_person_list fl">
					<div class="approval_process_item" draggable="true" v-for="(item,index) in myAuditList" @click="getItemValue(item,index)">
						<span style="position: relative;" @mouseenter="itemIndex=index" @mouseleave="itemIndex='-1'">
							<i class="iconfont icon-user11"></i>
							{{item.AuditDescription}}&nbsp;
							<b class="bnotice" v-if="item.AuditWay!=1">({{item.AuditWay=="2"?'会签':'或签'}})</b>
							<em v-if='index==itemIndex' class="iconfont icon-guanbi approval_process_item_delete"  @click.stop='deleteItem(item.Sort)'></em>
						</span>
						<i class="iconfont icon-jiantouyou"></i>
					</div>
					<input type="button" class="hollowFixedBtn" @click="addAppPerson" value="添加" />
				</div>
			</div>
			<div class="approval_person_content">
				<span class="approval_span_type">默认抄送人</span>
				<div class="approval_person_list fl">
					<div class="approval_process_item" v-for="(item,index) in myAuditUserList">
						<span style="position: relative;" @mouseenter="itemIndex1=index" @mouseleave="itemIndex1='-1'">
							<i class="iconfont icon-user11"></i>
							{{item.EmName}}&nbsp;
							<em v-if='index==itemIndex1' @click="deleteUser(item.EmployeeId)" class="iconfont icon-guanbi approval_process_item_delete" ></em>
						</span>
					</div>
					<input type="button" class="hollowFixedBtn" value="添加" @click='addAuditUser'/>
				</div>
			</div>
			
			<div v-if='TemplateType!=4'>
			<div class="approval_page_title">分条件审批</div>
			<p>
				<input type="button" value="添加" @click="goUrl('processDesign',TemplateId)" class="hollowFixedBtn" />
			    <span style="font-size: 12px; color: #666; margin-left: 15px;">审批单首先匹配优先级高的条件</span>
			</p>
			<div>
				<div class="processOtherDiv" v-for="(item,index) in otherList"  @click="goUrl('updateProcessDesign',item.Id)">
					<p style="background: #f1f1f1; padding: 10px 30px;">{{item.Description}}  
						<span class="fr processOtherdelSpan" style="margin-left: 10px;" @click.stop="deleteOtherProcess(item.Id)">删除</span>
						<span class="fr processOtherdelSpan">修改</span> 
					</p>
					<div style="padding: 0 30px;">
						<p style="padding: 10px 0 0 0;">审批人:</p>
						<div class="approval_process_item"  v-for="(item,index) in otherList[index].AuditList">
							<span style="position: relative;">
								<i class="iconfont icon-user11"></i>
								{{item.AuditDescription}}&nbsp;
								<b class="bnotice" v-if="item.AuditWay!=1">({{item.AuditWay=="2"?'会签':'或签'}})</b>
							</span>
							<i class="iconfont icon-jiantouyou"></i>
						</div>
						<p style="padding: 10px 0 0 0;">抄送人:</p>
						<div class="approval_process_item"  v-for="(item,index) in otherList[index].AuditUserList">
							<span style="position: relative;">
								<i class="iconfont icon-user11"></i>
								{{item.EmName}}&nbsp;
							</span>
						</div>
					</div>
				</div>
			</div>
			</div>
			<div style="margin: 30px 0;">
				<input type="button" value="取消" class="hollowFixedBtn"  @click="goback" />
				<input type="button" value="保存" class="normalBtn" @click="saveApproval" />
			</div>
		</div>

		<el-dialog custom-class='w700' :title="dialogTitle" :visible.sync="outerVisible" center>
			<div class="fl" style="width: 300px; margin: 0 20px;">
				<p style="margin: 0 0 10px 0;">选择： <el-input class='w200' placeholder="输入关键字进行过滤"  v-model="filterText">
				</el-input>
				</p>
				<el-tree class='ApprovalProcessBg'
					  :data="memberList"
					  show-checkbox
					  :filter-node-method="filterNode"
					  ref="tree" :props="defaultProps"
					  :render-after-expand="false" 
					  node-key="DepartmentId"
					  @check-change="handleNodeChange">
				</el-tree>
			</div>
			<div class="fl">
				<p style="margin: 0 0 20px 0;">已选：</p>
				<div class="Approval_yxList">
					<li v-for="item in showMember">{{item.DepartmentName}}
						<i @click="mySetCheckedKeys(item.DepartmentId)" class="el-icon-circle-close showMemberIcon"></i>
					</li>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<button class="hollowFixedBtn" @click="outerVisible = false">取 消</button> &nbsp;
				<button class="normalBtn" type="primary" @click="outerVisible = false">确定</button>
			</div>
		</el-dialog>

		<el-dialog custom-class='w700' :title="dialogTitle" :visible.sync="outerVisible1" center>
			<div class="fl" style="width: 300px; margin: 0 20px;">
				<p style="margin: 0 0 10px 0;">选择岗位： <el-input class='w200' placeholder="输入关键字进行过滤"  v-model="filterText1">
				</el-input>
				</p>
				<el-tree class='ApprovalProcessBg' 
					:data="roleList" 
					ref="treeRole"
					show-checkbox 
					:filter-node-method="filterNode1"
					:props="defaultProps1"
					@check-change="checkedRole"
					>
				</el-tree>
			</div>
			<div class="fl">
				<p style="margin: 0 0 20px 0;">已选岗位：</p>
				<div class="Approval_yxList">
                    <li v-for="item in showRole">{{item.DepartmentName}}
						<i @click="deleteRole()" class="el-icon-circle-close showMemberIcon"></i>
					</li>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<button class="hollowFixedBtn" @click="outerVisible1= false">取 消</button> &nbsp;
				<button class="normalBtn" type="primary" @click="outerVisible1 = false">确定</button>
			</div>
		</el-dialog>
		
		<el-dialog custom-class='w700' :title="dialogTitle" :visible.sync="outerVisible2" center>
			<div class="fl" style="width: 300px; margin: 0 20px;">
				<p style="margin: 0 0 10px 0;">选择抄送人：<el-input class='w200' placeholder="输入关键字进行过滤"  v-model="filterText2">
				</el-input>
				</p>
				<el-tree class='ApprovalProcessBg'
					 :data="userList"
					 show-checkbox
					 :filter-node-method="filterNode2"
					 ref="treeUser" 
					 :props="defaultProps2" 
					 :render-after-expand="false" 
					 node-key="DepartmentId"
					 @check-change="handleNodeChange1">
				</el-tree>
			</div>
			<div class="fl">
				<p style="margin: 0 0 20px 0;">已选：</p>
				<div class="Approval_yxList">
					<li v-for="item in myAuditUserList1">{{item.EmName}}
						<i @click="deleteUser(item.EmployeeId)" class="el-icon-circle-close showMemberIcon"></i>
					</li>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<button class="hollowFixedBtn" @click="outerVisible2 = false">取消</button> &nbsp;
				<button class="normalBtn" type="primary" @click="saveAuditUser">确定</button>
			</div>
		</el-dialog>
		

	</div>
</template>

<script>
	export default {
		data() {
			return {
				filterText:"",
				filterText1:"",
				filterText2:"",
				defaultProps: {
					children: 'ChildList',
					label: 'DepartmentName',
				},
				defaultProps1: {
					children: 'ChildList',
					label: 'DepartmentName',
					disabled: "Disabled"
				},
				defaultProps2: {
					children: 'ChildList',
					label: 'DepartmentName',
				},
				zgList: [{
						value: '1',
						label: '直接主管'
					},
					{
						value: '2',
						label: '第2级主管'
					},
					{
						value: '3',
						label: '第3级主管'
					},
					{
						value: '4',
						label: '第4级主管'
					},
					{
						value: '5',
						label: '第5级主管'
					},
					{
						value: '6',
						label: '第6级主管'
					},
				],
				TemplateType:'',
				addBtn:true,
				loading:true,
				dialogTitle: '',
				outerVisible:false,
				outerVisible1:false,
				outerVisible2:false,
				itemIndex: -1,
				itemIndex1: -1,
				approvalType: 1,
				showlayer: false,
				isTransition: false,
				updateItem:[],
				updateItemIndex:-1,  //修改节点
				TemplateId:'',
				addMsg:{
					Id:'',
					TemplateId:'',	
					AuditList:[],
				    AuditUserList:[],
				    ConditionSortList:[], 
				    Sort:'',
				},
				zgObj: {
					AuditDescription: '',
					RoleOrInitiator: '1',
					AuditType: '',
					AuditUserList: [],
					AuditWay:2,
					Sort: '',
				},
				tempChosenId: -1,
				//返回数据
				TemplateTypeName:'',
				myAuditList: [],
				myAuditUserList: [],
				myAuditUserList1:[],
				memberList: [],
				sysUserKeys:[],
				userList:[],
				roleList: [],
				checkedMember: [],
				showMember: [],
				showRole:[],
				memberSetCheckedKeys: [],
				memberSetCheckedUserKeys:[],
				normalMember: [],
				otherList:[],
				otherListSpr:[],
				otherListCsr:[],
			}
		},
		 watch: {
	      filterText(val) {
	        this.$refs.tree.filter(val);
	      },
	      filterText1(val) {
	        this.$refs.treeRole.filter(val);
	      },
	      filterText2(val) {
	        this.$refs.treeUser.filter(val);
	      }
	    },
		methods: {
		     filterNode(value, data) {
		        if (!value) return true;
		        return data.DepartmentName.indexOf(value) !== -1;
		      },
		      filterNode1(value, data) {
		        if (!value) return true;
		        return data.DepartmentName.indexOf(value) !== -1;
		      },
		      filterNode2(value, data) {
		        if (!value) return true;
		        return data.DepartmentName.indexOf(value) !== -1;
		      },
			deleteOtherProcess(id){
			this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.apipost('WorkFlow_post_DelOtherCondition',{ConditionId:id},res=>{
						if(res.data.resultCode==1){
							this.$message.success('删除成功！');
							this.getOtherList()
						}
					},err=>{})
				}).catch(() => {
					this.$message.info('已取消删除！');
				});
			},
			addAppPerson(){
				this.approvalType=1;
				this.addBtn=true;
				this.showLayer();
			},
			deleteUser(id){
				if(this.memberSetCheckedUserKeys.findIndex(item => item === id)!=-1){
				   this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === id), 1)	
				}
				if(this.myAuditUserList.findIndex(item => item.EmployeeId === id)!=-1)
				{
				  this.myAuditUserList.splice(this.myAuditUserList.findIndex(item => item.EmployeeId === id), 1)	
				}
				if(this.myAuditUserList1.findIndex(item => item.EmployeeId === id)!=-1)
				{
				  this.myAuditUserList1.splice(this.myAuditUserList1.findIndex(item => item.EmployeeId === id), 1)
				}
				
			},
			addAuditUser(){
			    let _arr=this.sysUserKeys.concat(this.memberSetCheckedUserKeys)
				this.dialogTitle = '选择人员';
				this.outerVisible2=true;
				let _this=this;
				this.apipost('WorkFlow_get_GetDepartMentEmployee', {}, res => {
					if(res.data.resultCode==1){
					 this.userList = res.data.data
					  _this.$refs.treeUser.setCheckedKeys(_arr);	
					}
				}, err => {})
			},
			saveAuditUser(){
				if(this.myAuditUserList1.length<=10){
					this.myAuditUserList=JSON.parse(JSON.stringify(this.myAuditUserList1))
				    this.outerVisible2 = false
				}else{
					this.$message.error('人数不能超过10人')
					return false;
				}
			},
			clearValue(value){
				if(value=='1'){
					this.zgObj.RoleOrInitiator='1'
				}
				if(value=='2'){
					this.showMember=[];
					this.memberSetCheckedKeys=[];
				}
				if(value=='3'){
					this.showRole=[]
					this.zgObj.AuditWay=2
				}
			},
			getList() {
				this.apipost('WorkFlow_get_GetDefaultCondition', {TemplateId:this.TemplateId}, res => {
					if(res.data.resultCode == 1) {
						this.loading=false
						this.addMsg.Id=res.data.data.Id
						this.myAuditList = res.data.data.AuditList==null?[]:res.data.data.AuditList
						this.myAuditUserList = res.data.data.AuditUserList==null?[]:res.data.data.AuditUserList
						this.myAuditUserList1 = JSON.parse(JSON.stringify(this.myAuditUserList))
						this.myAuditUserList1.forEach(item=>{
							this.sysUserKeys.push(item.EmployeeId)
						})
						this.TemplateTypeName=res.data.data.TemplateTypeName
						this.TemplateType=res.data.data.TemplateType;
					} else {}
				}, error => {})
			},
			getOtherList(){
					this.apipost('WorkFlow_get_GetOtherConditionList', {TemplateId:this.TemplateId}, res => {
					if(res.data.resultCode == 1) {
						this.otherList=res.data.data
						this.otherListSpr=res.data.data.AuditList
					} else {}
				}, error => {})
			},
			getMember() {
				this.outerVisible = true;
				this.dialogTitle = '选择人员';
				this.apipost('WorkFlow_get_GetDepartMentEmployee', {}, res => {
					this.memberList = res.data.data
				}, err => {})
			},
			getRole() {
				this.outerVisible1 = true;
				this.dialogTitle = '选择岗位';
				this.apipost('WorkFlow_get_GetDepartMentPost', {}, res => {
					this.roleList = res.data.data
				}, err => {})
			},
			handleNodeChange1(data, checked) {
				data.IsCheck = checked;
				if(data.Type == 2 && data.IsCheck) { //是员工且选中
					let isExsit = false
					this.myAuditUserList1.forEach(x => {
						if(x.EmployeeId == data.DepartmentId) {
							isExsit = true
							return false
						}
					})
					if(!isExsit) {
						this.myAuditUserList1.push({
							EmName: data.DepartmentName,
							EmployeeId: data.DepartmentId,
							Sort: '1'
						})
						this.memberSetCheckedUserKeys.push(data.DepartmentId)
					}
				} else if(data.Type == 2 && !data.IsCheck) {
					if(this.myAuditUserList1.findIndex(item => item.EmployeeId === data.DepartmentId) != -1) {
						this.myAuditUserList1.splice(this.myAuditUserList1.findIndex(item => item.EmployeeId === data.DepartmentId), 1)
						this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId), 1)
						if(this.myAuditUserList1.findIndex(item => item.EmployeeId === data.ParentId) != -1) {
							this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.ParentId), 1)
						}
					}
				}
				if(data.Type != 2 && data.IsCheck) {
					if(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) == -1) {
						this.memberSetCheckedUserKeys.push(data.DepartmentId)
					}
				} else if(data.Type == 2 && !data.IsCheck) {
					if(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) != -1) {
						this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId), 1)
						if(this.myAuditUserList1.findIndex(item => item.EmployeeId === data.ParentId) != -1) {
							this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.ParentId), 1)
						}
					}
				}
			},
			handleNodeChange(data, checked) {
				data.IsCheck = checked;
				if(data.Type == 2 && data.IsCheck) { //是员工且选中
					let isExsit = false
					this.showMember.forEach(x => {
						if(x.DepartmentId == data.DepartmentId) {
							isExsit = true
							return false
						}
					})
					if(!isExsit) {
						this.showMember.push({
							DepartmentName: data.DepartmentName,
							DepartmentId: data.DepartmentId
						})
						this.memberSetCheckedKeys.push(data.DepartmentId)
					}
				} else if(data.Type == 2 && !data.IsCheck) {
					if(this.showMember.findIndex(item => item.DepartmentId === data.DepartmentId) != -1) {
						this.showMember.splice(this.showMember.findIndex(item => item.DepartmentId === data.DepartmentId), 1)
						this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.DepartmentId), 1)
						if(this.showMember.findIndex(item => item.DepartmentId === data.ParentId) != -1) {
							this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.ParentId), 1)
						}
					}
				}
				if(data.Type != 2 && data.IsCheck) {
					if(this.memberSetCheckedKeys.findIndex(item => item === data.DepartmentId) == -1) {
						this.memberSetCheckedKeys.push(data.DepartmentId)
					}
				} else if(data.Type == 2 && !data.IsCheck) {
					if(this.memberSetCheckedKeys.findIndex(item => item === data.DepartmentId) != -1) {
						this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.DepartmentId), 1)
						if(this.showMember.findIndex(item => item.DepartmentId === data.ParentId) != -1) {
							this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.ParentId), 1)
						}
					}
				}
			},
			mySetCheckedKeys(id) {
				if(this.memberSetCheckedKeys.length == 0)
					return
				if(id == -1) {
					this.$refs.tree.setCheckedKeys(this.memberSetCheckedKeys)
					return
				}
				this.showMember.splice(this.showMember.findIndex(item => item.DepartmentId === id), 1)
				this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === id), 1)
				this.$refs.tree.setCheckedKeys(this.memberSetCheckedKeys);
			},
			mySetCheckedUsersKeys(){
				
			},
			checkedRole(data,checked){
				 data.IsCheck = checked;
				if(data.Disabled==false&&data.IsCheck){
					this.showRole=[];
					this.showRole.push({DepartmentName:data.DepartmentName,Id:data.DepartmentId})
				}
				
			},
			deleteItem(sort) {
				this.myAuditList.splice(this.myAuditList.findIndex(item => item.Sort === sort), 1)
			},
			getItemValue(obj,index){
				this.addBtn=false;
				this.updateItemIndex=index;
				this.updateItem=obj;
				this.showLayer();
				this.approvalType=obj.AuditType;
				if(obj.AuditType==1){
					this.zgObj.RoleOrInitiator=obj.RoleOrInitiator.toString();
				}
				if(obj.AuditType==2){
					this.showMember=[];
					this.memberSetCheckedKeys=[];
					this.zgObj.AuditWay=obj.AuditWay;
					obj.AuditUserList.forEach((item,index)=>{
						this.showMember.push({
							DepartmentName: item.EmName,
							DepartmentId: item.EmployeeId
						})
						this.memberSetCheckedKeys.push(item.EmployeeId)
					})					
				}
				if(obj.AuditType==3){
					this.zgObj.AuditWay=obj.AuditWay;
					this.showRole=[];
					this.showRole.push({DepartmentName:obj.AuditDescription})
				}
				
			},
			saveUpdateNode(){
			    let zg = {}
				if(this.approvalType == 1)
				{
					zg.AuditType = 1;
					zg.AuditWay = 1;
					zg.AuditUserList=[],
					zg.Sort = this.myAuditList.length + 1;
					zg.RoleOrInitiator = this.zgObj.RoleOrInitiator
					let obj = {}
					if(this.tempChosenId != -1) {
						obj = this.zgList.find((item) => {
							return item.value === this.tempChosenId;
						})
						zg.AuditDescription = obj.label
					} else {
						zg.AuditDescription = '直接主管'
					}
					this.myAuditList[this.updateItemIndex]=zg;
				}
				if(this.approvalType == 2) { //指定成员
					let Au = this.showMember;
					let Auu = [];
					Au.forEach((item, index) => {
						Auu.push({
							EmployeeId: item.DepartmentId,
							EmName:item.DepartmentName,
							Sort: index
						})
					})
					if(Auu.length==1){
						zg.AuditWay = 1
						zg.AuditDescription = Auu[0].EmName
					}else if(Auu.length>1){
						zg.AuditWay = this.zgObj.AuditWay;
						zg.AuditDescription = '指定' + this.showMember.length + '人'
					}
					zg.AuditType = 2;
					zg.RoleOrInitiator = '-1';
					zg.Sort = this.myAuditList.length + 1;
					zg.AuditUserList = Auu;
					if(Auu.length==0)
					{
						this.$message.error("成员不能为空")
						return
					}else if(Auu.length>10){
						this.$message.error("人数不能超过10人！")
						return
					}
					this.myAuditList[this.updateItemIndex]=zg;
				}
				if(this.approvalType == 3) { //岗位
                    zg.AuditType=3;
                    zg.AuditWay = this.zgObj.AuditWay;
                    zg.Sort = this.myAuditList.length + 1;
                    zg.AuditUserList=''; 
                    if(this.showRole.length==0)
					{
						this.$message.error("请选择岗位")
						return
					}else{
						zg.RoleOrInitiator=this.showRole[0].Id; 
					    zg.AuditDescription=this.showRole[0].DepartmentName; 	
					}
                    this.myAuditList[this.updateItemIndex]=zg;
				}
				this.closeLayer()
			},
			deleteRole(){
				this.showRole=[];
			},
			changeValue(value) {
				this.tempChosenId = value
			},
			addNode() {
				//data>>AuditList>>AuditType 核人类型 1主管(指定一级) 2 指定成员 3角色
				let zg = {}
				if(this.approvalType == 1) //主管
				{
					zg.AuditType = 1;
					zg.AuditWay = 1;
					zg.AuditUserList=[],
					zg.Sort = this.myAuditList.length + 1;
					zg.RoleOrInitiator = this.zgObj.RoleOrInitiator
					let obj = {}
					if(this.tempChosenId != -1) {
						obj = this.zgList.find((item) => {
							return item.value === this.tempChosenId;
						})
						zg.AuditDescription = obj.label
					} else {
						zg.AuditDescription = '直接主管'
					}
					this.myAuditList.push(zg);
				}
				if(this.approvalType == 2) { //指定成员
					let Au = this.showMember;
					let Auu = [];
					Au.forEach((item, index) => {
						Auu.push({
							EmployeeId: item.DepartmentId,
							EmName:item.DepartmentName,
							Sort: index
						})
					})
					if(Auu.length==1){
						zg.AuditWay = 1
						zg.AuditDescription = Auu[0].EmName
					}else if(Auu.length>1){
						zg.AuditWay = this.zgObj.AuditWay;
						zg.AuditDescription = '指定' + this.showMember.length + '人'
					}
					zg.AuditType = 2;
					zg.RoleOrInitiator = '-1';
					zg.Sort = this.myAuditList.length + 1;
					zg.AuditUserList = Auu;
					if(Auu.length==0)
					{
						this.$message.error("成员不能为空")
						return
					}else if(Auu.length>10){
						this.$message.error("人数不能超过10人！")
						return
					}
					
					this.myAuditList.push(zg);
					
				}
				if(this.approvalType == 3) { //岗位
                    zg.AuditType=3;
                    zg.AuditWay = this.zgObj.AuditWay;
                    zg.Sort = this.myAuditList.length + 1;
                    zg.AuditUserList=''; 
                    if(this.showRole.length==0)
					{
						this.$message.error("请选择部门")
						return
					}else{
						zg.RoleOrInitiator=this.showRole[0].Id; 
					    zg.AuditDescription=this.showRole[0].DepartmentName; 	
					}
                    this.myAuditList.push(zg);
				}
				this.closeLayer()
			},
			showLayer() {
				this.showlayer = true;
				this.isTransition = true;
			},
			closeLayer() {
				let _this = this;
				setTimeout(function() {
					_this.showlayer = false;
				}, 300)
				this.isTransition = false;
			},
			saveApproval(){
				this.addMsg.AuditList=this.myAuditList;
				this.addMsg.AuditUserList=this.myAuditUserList;
				this.ConditionSortList=[],
				this.addMsg.Sort=0,
				this.loading=true;
				this.apipost('WorkFlow_post_SetDefaultCondition',this.addMsg,res=>{
					 if(res.data.resultCode==1){
					 	this.loading=false;
					 	this.$message.success("操作成功！")
					 }
				},err=>{})
			},
			goUrl (path,id) {
	            this.$router.push({ name: path,query:{"id":id} }) 
	        },
	        goback(){
				this.$router.push({name: 'Approval',query:{"Bid":this.$route.query.Bid}});
			}
		},
		mounted() {
			this.TemplateId = this.addMsg.TemplateId = this.$route.query.id
			this.getList()
			this.getOtherList()
		}

	}
</script>

<style>
	.processOtherdelSpan{
		 color: #E95252;
	}
	.processOtherdelSpan:hover{
		text-decoration: underline;
	}
	.processOtherDiv{
		font-size: 12px;
		min-height: 80px;
		border:1px solid #D2D2D2;
		margin-top: 20px;
		cursor: pointer;
	}
	.showMemberIcon {
		float: right;
		font-size: 20px;
		margin: 10px 20px 0 0;
		color: #999;
		cursor: pointer;
	}
	
	.normalMember {
		margin: 10px 0;
		width: 700px;
		max-height: 500px;
		overflow: auto
	}
	
	.normalMember li {
		display: inline-block;
		margin: 10px;
		padding: 5px 10px;
		background: #f8f8f8;
		border-radius: 4px;
		text-align: center;
		font-size: 14px;
		color: #333;
	}
	
	.approval_layer_info {
		padding: 20px 0 0 30px;
	}
	
	.ApprovalProcessBg {
		background: #f8f8f8;
		max-height: 400px;
		overflow-y: auto;
	}
	
	.Approval_yxList {
		width: 300px;
		background: #f8f8f8;
		min-height: 400px;
		max-height: 400px;
		overflow-y: auto;
	}
	
	.Approval_yxList li {
		line-height: 40px;
		text-indent: 15px;
		border-bottom: 1px dotted #eee;
	}
	
	.approval_page_content i {
		color: #999!important;
	}
	
	.approval_page_layer_bottom {
		position: absolute;
		bottom: 20px;
		padding-left: 20px;
	}
	
	.approval_span_type {
		float: left;
		width: 120px;
		margin-bottom: 10px;
	}
	
	.approval_process_item_delete {
		position: absolute;
		right: 2px;
		top: -11px;
		font-size: 5px;
	}
	
	.approval_process_item {
		display: inline-block;
		margin: 10px 5px 10px 0;
		cursor: pointer;
	}
	
	.approval_process_item b.bnotice {
		color: #E95252;
	}
	
	.approval_process_item>span {
		padding: 0 10px;
		min-width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 12px;
		background: #f8f8f8;
		border-radius: 4px;
		display: inline-block;
	}
	
	.approval_page_layer {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 99;
		height: 100%;
		background: rgba(0, 0, 0, .2);
	}
	
	.approval_page_title {
		height: 14px;
		line-height: 14px;
		padding-left: 15px;
		border-left: 3px solid #E95252;
		margin: 20px 0;
	}
	
	.approval_back_btn {
		margin: 20px 0;
	}
	
	.approval_page_content {
		width: 680px;
		min-height: 480px;
		overflow: hidden;
		padding: 0 20px;
		background: #fff;
		border-radius: 4px;
	}
	
	.approval_person_content {
		padding: 0 30px;
		overflow: hidden;
		margin-bottom: 30px;
	}
	
	.approval_person_content>span {
		font-size: 12px;
		color: #666;
		margin-right: 30px;
	}
	
	.approval_person_list {
		float: left;
		width: 550px;
		max-height: 400px;
		overflow: auto;
	}
	
	.approval_person_set {
		width: 800px;
		height: 100%;
		transition: right .3s;
		background: #fff;
		position: fixed;
		top: 0;
		right: -800px;
		box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.1)
	}
	
	.approval_person_set_right {
		right: 0;
	}
	
	.approval_person_set .setTitle {
		height: 48px;
		line-height: 48px;
		background: #EDEEF0;
		font-size: 16px;
		color: #333;
		text-indent: 20px;
	}
	
	.approval_person_layerContent {
		padding-left: 20px;
		overflow: hidden;
	}
</style>