<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title> 多级审核</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

<link href="<c:url value='/scripts/lib/layui/layui.css'/>" rel="stylesheet" type="text/css" />

<!-- Theme style -->
<link href="<c:url value='/styles/AdminLTE.css'/>" rel="stylesheet" type="text/css" />
<link href="<c:url value='/styles/engineeringRepair/launchRepair.css'/>" rel="stylesheet" type="text/css" />


<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->


<!-- <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->

<script type="text/javascript" src="<c:url value='/scripts/lib/jquery-1.8.2.min.js'/>"></script> 
<script type="text/javascript" src="<c:url value='/scripts/visitor/exif.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/lib/template-native.js'/>"></script>

<script src="<c:url value='/scripts/admin/notice/element/vue.js?v=1234'/>"></script>
	<link rel="stylesheet" href="//superdesk.avic-s.com/avicfile/theme/theme-chalk.css">
<script src="<c:url value='/scripts/admin/notice/element/element.js?v=1234'/>"></script>
<!-- <script src = "//cdn.polyfill.io/v2/polyfill.min.js"></script> -->
 <script src="<c:url value='/scripts/admin/notice/element/polyfill.js?v=12345555'/>"></script>
<style type="text/css">
    #app{
		background: #fff;
    	height: 100%;
		position: absolute;
		width: 100%;
		}
	.item-text-center {
		padding-left: 100px;
	}
	.form-tips{
		display: flex;
		width: 400px;
	}
	.item-tip-left{
		width: 120px;
		text-align: center;
		border: 1px solid #ddd;
	}
	.item-tip-right{
		flex: 1;
		width: 280px;
		border: 1px solid #ddd;
		text-align: center;
	}
	.form-table-content{
		margin-left: 96px;
	}
	.mult-content{
		border: 1px solid #ddd;
		width: 550px;
		padding-left: 15px;
    	padding-top: 10px;
		margin-bottom: 20px;
	}
	.addcontent{
		border: 1px solid #409EFF;
		padding: 10px;
		width:550px;
		text-align: center;
	}
	.select-item{
		width: 260px;
    	margin: 10px;
	}
	.form-tip-left{
		width: 120px;
		text-align: center;
		border: 1px solid #ddd;
		padding-top: 10px;
	}
	.el-form-item{
		margin-bottom: 7px !important;
	}
	.title-muliter{
		font-weight: 600;
		font-size: 16px;
		color: #333;
		margin-bottom: 10px;
		margin-top: 10px;
		flex: 1;
	}
	.multiter-content-title{
		display: flex;
	}
	.deleteBtn{
		margin-right: 20px;
   		margin-bottom: 10px;
	}
	.mult-wapper{
		max-height: 600px;
		overflow: auto;
	}

	
</style>
</head>
<body>
	<div id="app">
		<div class="bread-wp">
			公告通知 > 发布公告消息管理 > 多级审核
		</div>
		<el-form class="item-text-center" ref="dataForm" width="50%">
			<el-form-item label="浏览量" prop="name">
				<el-checkbox v-model="dataForm.isViews" label="微信端展示浏览量（勾选后微信端会展示公告的浏览量）" class="checkInput" name="type"></el-checkbox>
			</el-form-item>
			<el-form-item label="多级审核" prop="name">
				<el-checkbox v-model="dataForm.isOpen" label="开启多级审核" class="checkInput" name="type"></el-checkbox>
			</el-form-item>
			<div class="mult-wapper">
			<div  v-if="dataForm.isOpen" class="mult-content" v-for="(item ,index) in dataForm.typeList" :key="index">
				<div class="multiter-content-title">
					<div class="title-muliter">添加审批类型</div>
					<el-button type="primary" class="deleteBtn" v-show="dataForm.typeList.length>1" @click.native.prevent="deleteRow(item,index,dataForm.typeList)">删除</el-button>
				</div>
				
				<el-form-item label="审批类型名称" prop="name">
					<el-input v-model="item.name" placeholder="请输入审批类型名称" style="width: 400px" clearable></el-input>
				</el-form-item>
				<el-form-item label="设置审批流程" >
					<div class="form-tips">
						<div class="item-tip-left">审核流程</div>
						<div class="item-tip-right">审核角色</div>
					</div>
					<div  class="form-table-content" v-for="(childItem,keyIndex) in item.roleList" :key="keyIndex">
						<div class="form-tips">
							<div class="form-tip-left"><span style="color: red;" v-if="childItem.orderno==1">*</span>{{childItem.orderno}}审</div>
							<div class="item-tip-right">
								<el-select v-model="childItem.roleId" placeholder="请选择审核角色" filterable clearable class="select-item" >
								<el-option  v-for="itemRole in roleArr"  :key="itemRole.id"  :label="itemRole.name"  :value="itemRole.id" ></el-option>
								</el-select>
							</div>
						</div>
				</div>
			</div>
				</el-form-item>
			</div>
			<div class="addcontent" @click="addhandler" v-if="dataForm.isOpen"> + 继续添加</div>
			<div style="margin-left: 105px;margin-top:20px;">
				<el-button @click="backClassHandle">取消</el-button>
				<el-button type="primary" @click="labelClassSubmit">确定</el-button>
			</div>

		</el-form>
		
	</div>

	<script type="text/javascript">
			// 在页面加载好后就初始化vue实例,也可以在外面直接初始化
			$(document).ready(function(){
				const vm = new Vue({
					el:'#app',
					data(){
						return {
							projectOrgID:'',
							roleArr:[],
							allRoleJobs:[],
							roleDataList:{},
							role1:'',
							deleteList:[],
							dataForm:{
								id:'',
								orgId:'',
								isOpen:false,
								isViews:false,
								delIds:[],
								typeList:[{
									id:'',
									name:'',
									isOperation:'',
									roleList:[
										{ id:'', orderno:'1', roleId:'', isOperation:'', },
										{ id:'',orderno:'2', roleId:'', isOperation:'', },
										{ id:'', orderno:'3', roleId:'', isOperation:'', },
										{  id:'',orderno:'4', roleId:'', isOperation:'', },
										{  id:'',orderno:'5', roleId:'', isOperation:'', },
									]
								}]
							}
						}
					},
					methods:{
						changeValue(index,val,childItem){
							console.log("选择的是",index)
							console.log("选择的是",val, childItem)
							if(childItem.roleId){
								for (const key in this.allRoleJobs) {
									if ( this.allRoleJobs[key].indexId==val.id) {
										let dataResult=this.allRoleJobs[key].rolesList
										let newArr=[]
										for (const k in dataResult) {
											if (dataResult[k].id!=childItem.roleId) {
												newArr.push(dataResult[k])
											}
										}
										this.allRoleJobs[key].rolesList=newArr
										// dataResult.splice(dataResult.findIndex(item => item.id ===childItem.roleId), 1)
									}
								}
							 
							}
							console.log("allRoleJobs",this.allRoleJobs)

						},
						deleteRow(row,index,rows){//row 删除的单行  rows剩余的数据\
							console.log("row---",row)
							if(row.id){
								this.deleteList.push(row.id)
							}
							console.log("deleteList", this.deleteList)
							rows.splice(index, 1);
							console.log("最后的数组数据",rows)
						},
						getApprovalSetDtoInfo(){
							let _this=this
							$.ajax({
								type: "post",
								url:  "/super_service/notice/approval/getApprovalSetDto",
								data: {
									"orgId": _this.projectOrgID
								},
								success: function (data) {
									if (data.code == '200') {
										console.log("服务返回值",data.data)
										let result=data.data
										_this.dataForm=result
										_this.dataForm.isOpen=result.isOpen==1?true:false
										_this.dataForm.isViews=result.isViews==1?true:false
										let roleInfoList=data.data.typeList

										let roleMore=[]
										for (const key in roleInfoList) {
											let rsObj={}
											rsObj["indexId"]=roleInfoList[key].id
											rsObj["rolesList"]=_this.roleArr
											roleMore.push(rsObj)
										}
										console.log("服务jue",roleMore)
										_this.allRoleJobs=roleMore


										///1.封装一个新的数组
										//2.过滤掉已经选择的角色
										// let roleMore=[]
										// for (const key in roleInfoList) {
										// 	let rsObj={}
										// 	let newRlesArr=_this.roleArr
										// 	rsObj["indexId"]=key
										// 	let roleItemList=roleInfoList[key].roleList
										// 	newRlesArr=newRlesArr.filter(item =>{
										// 		let tabIdList=roleItemList.map(v =>v.roleId)
										// 		return !tabIdList.includes(item.id)
										// 	})
										// 	rsObj["rolesList"]=newRlesArr
										// 	roleMore.push(rsObj)
										// 	console.log(rsObj)
										// }
										// _this.allRoleJobs=roleMore
										// console.log("服务列表",roleMore)

										for (const key in roleInfoList) {
											let roleitemList=roleInfoList[key].roleList
											if(roleitemList){
												if (roleitemList.length==0) {
												roleitemList.push(
													{ id:'', orderno:'1', roleId:'', isOperation:0 },
													{ id:'',orderno:'2', roleId:'', isOperation:0 },
													{  id:'',orderno:'3', roleId:'', isOperation:0 },
													{ id:'',orderno:'4', roleId:'', isOperation:0 },
													{ id:'',orderno:'5', roleId:'', isOperation:0 },
											    )
											}else if(roleitemList.length==1){
												roleitemList.push(
													{ id:'',orderno:'2', roleId:'', isOperation:0 },
													{ id:'',orderno:'3', roleId:'', isOperation:0 },
													{ id:'',orderno:'4', roleId:'', isOperation:0 },
													{ id:'',orderno:'5', roleId:'', isOperation:0 },
											    )
											}else if(roleitemList.length==2){
												roleitemList.push(
													{  id:'',orderno:'3', roleId:'', isOperation:0 },
													{ id:'',orderno:'4', roleId:'', isOperation:0 },
													{ id:'',orderno:'5', roleId:'', isOperation:0 },
											    )
											}else if(roleitemList.length==3){
												roleitemList.push(
													{ id:'',orderno:'4', roleId:'',isOperation:0 },
													{ id:'',orderno:'5', roleId:'', isOperation:0 },
											    )
											}else if(roleitemList.length==4){
												roleitemList.push(
													{ id:'',orderno:'5', roleId:'', isOperation:0 },
											    )
											}
											}else{
												let newRoleList=[]
												newRoleList.push(
													{  id:'',orderno:'1', roleId:'', isOperation:0 },
													{id:'', orderno:'2', roleId:'', isOperation:0 },
													{  id:'',orderno:'3', roleId:'', isOperation:0 },
													{ id:'',orderno:'4', roleId:'', isOperation:0 },
													{ id:'',orderno:'5', roleId:'', isOperation:0 },
											    )
												roleitemList=newRoleList
											}
										}
										console.log("isOpen",_this.dataForm.isOpen)
									} else {
										
									}
								},
								error: function (error) {
									
								}
							});
						},
						showErrorMsg(msg){
							this.$message({  type: 'error',   message: msg,   duration: 2000  })
						},
						showSuccessMsg(msg){
							this.$message({  type: 'success',   message: msg,   duration: 2000  })
						},
						submitData(){
							let _this=this
							$.ajax({
								type: "post",
								url:  "/super_service/notice/approval/saveApprovalSet",
								dataType:"json",
           						contentType : "application/json;charset=UTF-8",	  
								data: JSON.stringify(_this.dataForm),
								success: function (data) {
									if (data.code == '200') {
										_this.$message({message: '操作成功！', type: 'success'});
										window.location.href=  '/super_service/notice/audit/noticeAppVerify';

									} else {

									}
								},
								error: function (error) {
									
								}
							});
						},
						//判断2个数组是否有重复数据，true存在重复数据 false 不存在重复数据
						 removeDuplElem(array) { 
      						 var tempbool = "";
								for(var i=0; i<array.length; i++){
								  for(var j=i+1; j<array.length;j++) {
										if(array[i].roleId==array[j].roleId) {
											return tempbool = true;
											break;       
										} else {
											return tempbool =false;
										}
								}
							}
							// return tempbool;  
						} ,
						labelClassSubmit(){
							let _this=this
							let isCanApply=true
							console.log("提交",_this.dataForm.typeList)
							if(_this.dataForm.isOpen){
								let dataLists=_this.dataForm.typeList
								for (const key in dataLists) {
									if (!dataLists[key].name) {
										isCanApply=false
										_this.showErrorMsg("请填写审批类型名称！")
										return	
									}
									let roleLists=dataLists[key].roleList
									let newRoleIdList=[]
									roleLists.forEach(element => {
										if( element.orderno==1 && !element.roleId){
											isCanApply=false
											_this.showErrorMsg("审批类型名称为"+dataLists[key].name+"的审核角色不能为空！")
										    return	
										}
										if(element.roleId){
											newRoleIdList.push(element.roleId)
										}
									});

									if((new Set(newRoleIdList)).size != newRoleIdList.length){
										isCanApply=false
										_this.showErrorMsg("审核角色重复,请重新选择！")
										return	
									}

							}
							}else{
								_this.dataForm.typeList=[]
							}
							
							if(isCanApply){
								console.log("open1",_this.dataForm.isOpen)
								_this.dataForm.isOpen?_this.dataForm.isOpen=1:_this.dataForm.isOpen=0
								console.log("open2",_this.dataForm.isOpen)

								//1.处理roleId为空的数据不要提交
								//2.如果id不为空的数据 ，isOperation设置为2
								_this.dataForm.delIds=_this.deleteList
								for (const key in _this.dataForm.typeList) {
									let dataRoles=_this.dataForm.typeList[key].roleList
									if(_this.dataForm.typeList[key].id &&_this.dataForm.typeList[key].name){
										_this.dataForm.typeList[key].isOperation=2
									}else{
										_this.dataForm.typeList[key].isOperation=1
									}
									for (const j in dataRoles) {
										if (dataRoles[j].roleId&&dataRoles[j].id) {
											dataRoles[j].isOperation=2
										}else if(dataRoles[j].roleId&&!dataRoles[j].id){
											dataRoles[j].isOperation=1
										}
										
									}
									
								}
								_this.dataForm.isViews?_this.dataForm.isViews=1:_this.dataForm.isViews=0
								console.log("typeList",_this.dataForm.typeList)
								_this.submitData();
							}
						},
						backClassHandle(){
							window.location.href=  '/super_service/notice/audit/noticeAppVerify';

						},
						addhandler(){
							let list ={
									id:'',
									name:'',
									isOperation:'',
									roleList:[
										{  id:'',orderno:'1', roleId:'', isOperation:0, },
										{  id:'', orderno:'2', roleId:'', isOperation:0, },
										{  id:'',orderno:'3', roleId:'', isOperation:0, },
										{  id:'',orderno:'4', roleId:'', isOperation:0, },
										{  id:'',orderno:'5', roleId:'', isOperation:0, },
									]
								}
      					this.dataForm.typeList.push(list);

						},
						getApprovalRoleList(){
							let _this=this
							$.ajax({
								type: "post",
								url:  "/super_service/notice/approval/getApprovalRole",
								data: {
									"orgId": _this.projectOrgID
								},
								success: function (data) {
									if (data.code == '200') {
										console.log("角色返回值",data.data)
										_this.roleArr=data.data
									} else {
										_this.roleArr=[]
									}
								},
								error: function (error) {
									
								}
							});
						},
					},
					created(){
						console.log("11", localStorage.getItem("projectOrgId"))
						this.projectOrgID=localStorage.getItem("projectOrgId")
						this.dataForm.orgId=this.projectOrgID
						
						if(this.projectOrgID){
							this.getApprovalRoleList();
							this.getApprovalSetDtoInfo();
						}
					},
				})
			})
		</script>




</body>
</html>