<template>
	<div class="flexOne">
		<div class="myApprovalMenu">
			<li :class="{cked:liCkedIndex==1}" @click="goUrl('myApproval')">{{$t('objFill.v101.administrative.faqishenp')}}</li>
			<li :class="{cked:liCkedIndex==2}">{{$t('objFill.v101.administrative.woshenpd')}}</li>
			<li :class="{cked:liCkedIndex==3}" @click="goUrl('myApprovalList')">{{$t('objFill.v101.administrative.wofaqide')}}</li>
			<li :class="{cked:liCkedIndex==4}" @click="goUrl('sendToMeApproval')">{{$t('objFill.v101.administrative.caosowd')}}</li>
		</div>
			<div class="query-box" style="border-bottom: none;">
				<ul>
					<li>
						<span><em>{{$t('salesModule.keyWords')}}</em><el-input class='w210' v-model="msg.searchKey"  :placeholder="$t('objFill.v101.administrative.qingshurusqr')"  @keyup.enter.native="getList"></el-input></span>
					</li>
					<li>
						<span><em>{{$t('objFill.shengpileix')}}</em><el-select v-model='msg.applyType'>
							<el-option v-for='item in ApplyTypeList' :label='item.label' :value='item.value' :key='item.value'></el-option>
						</el-select></span>
					</li>
					<li>
						<span><em>{{$t('objFill.v101.administrative.shenpzt')}}</em><el-select v-model='msg.auditType'>
							<el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
							<el-option :label="$t('objFill.dsh')" value='1'></el-option>
							<el-option :label="$t('fnc.a_yshenhe')" value='2'></el-option>
						</el-select></span>
					</li>
					<li>
						<span><em>{{$t('objFill.v101.administrative.shenqishzt')}}</em><el-select v-model='msg.appAuditStatus'>
							<el-option v-for='item in appAuditStatusList' :label='item.label' :value='item.value' :key='item.value'></el-option>
						</el-select></span>
					</li>
					<li><input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()"/></li>
				</ul>
			</div>

			  <div class="appListparent" v-loading='loading'>
				<div class="forMyApprovalTable">
					<li>{{$t('objFill.v101.administrative.shenpibt')}}</li>
					<li>{{$t('objFill.v101.administrative.sousjiany')}}</li>
					<li>{{$t('objFill.v101.administrative.faqishij')}}</li>
					<li>{{$t('admin.admin_status')}}</li>
					<li>{{$t('hotel.table_operat')}}</li>
				</div>
				<div class="forMyApprovalItem" v-for="(item,index) in list">
				     <li>
					   <img v-if="!item.userPhoto" src="../../assets/img/litheader.png" alt="">
	                   <img v-else :src="item.userPhoto" alt="" :onerror="defaultImg">
				     <span>{{item.title}}</span>
				     </li>
				     <li>
				     	<p v-for="item in list[index].detial">{{item}}</p>
				     </li>
				     <li>
				     	<p><i class="iconfont icon-img-rili"></i>
				     	{{item.createTime}}</p></li>
				     <li>{{item.auditStatusStrt}}</li>
				     <li><input type="button" class="hollowFixedBtn" :value="$t('fnc.xiangqing')" @click="getDetail(item.workFlowId,item.templateType)"></li>
				</div>
			</div>
			<el-pagination background
				@current-change="handleCurrentChange"
				:current-page.sync="currentPage"
				 layout="total,prev, pager, next, jumper"
				:page-size=msg.pageSize
				:total=total>
			</el-pagination>


			<div :class="{forMyApprovalLayer:showlayer}"  @click="closeLayer">
				<div :class="{forMyApprovalLayercontentDiv:true,rightZero:isTransition}" @click.stop>
						<div class="title">{{detailList.Proposer}}{{detailList.TempleteTypeName}}</div>
						<div class="user">
						  	<img v-if="!detailList.ProposerPhoto" src="../../assets/img/litheader.png" alt="">
		                  	<img v-else :src="detailList.ProposerPhoto" alt="" :onerror="defaultImg">
							<p>{{detailList.Proposer}}</p>
							<p><span style="color:#257BF1; font-size: 14px;">{{detailList.Status}}</span></p>
						</div>

						<div class="detail">
							<table border="0" cellspacing="0" cellpadding="0" class="myApprovalTable">
								<tr v-for="(item,index) in detailList.Details" v-if="(item.formType=='Image' && item.value.length>0) || item.formType!='Image'">
									<td width="80" >{{item.title}}：</td>

									<td v-if="item.formType=='String'">{{item.value}}</td>
									<td v-if="item.formType=='Json'">
										<div v-for="(i,index) in item.value" style="border-bottom: 1px solid #ccc; padding:10px 0;">
											<p style="line-height: 24px;" v-for="o in i">{{o.title}}：{{o.value}}</p>
										</div>
									</td>
									<td v-if="item.formType=='Image'">
										<img v-if='item.value.length>0' style="width: 50px; height: 50px; border-radius: 4px; margin:0 10px 0 0;" v-for="(img,index) in item.value" :src="img"
											 @click="getPic(item.value)"/>
									</td>
								</tr>
							</table>
						</div>

						<div class="audit">
							<div class="auditItem">
							  	<img v-if="!detailList.ProposerPhoto" src="../../assets/img/litheader.png" alt="">
			                  	<img v-else :src="detailList.ProposerPhoto" alt="" :onerror="defaultImg">
								<p>
									<span>{{detailList.Proposer}}</span>&nbsp;&nbsp;<span>{{$t('objFill.v101.administrative.faqishenqi')}}</span><span class="fr">{{detailList.ProposerTime}}</span>
								</p>
							</div>
							<div class="auditItem" v-for="(item,index) in detailList.arList">
								<img  v-if='item.AuditRecordList.length==1&&!item.AuditRecordList[0].AuditEmPhoto' src="../../assets/img/litheader.png"   />
								<img  v-if='item.AuditRecordList.length==1&&item.AuditRecordList[0].AuditEmPhoto' :src='item.AuditRecordList[0].AuditEmPhoto' alt="" :onerror="defaultImg"  />
								<img  v-if='item.AuditRecordList.length>1' src="../../assets/img/bg_z1@2x.png" />
								<p v-if='item.AuditRecordList.length==1'>
									<span>{{item.AuditRecordList[0].AuditEmName}}</span>
									<span :style="'color: ' + item.AuditRecordList[0].StatusColor + ' !important'">{{item.AuditRecordList[0].Stauts}}</span>
									<span class="fr">{{item.AuditRecordList[0].AuditTime}}</span>
									<span style="display:block; padding-left: 40px; text-indent: 0; font-size: 12px; line-height: 24px; color: #333;">{{item.AuditRecordList[0].Description}}</span>
									<span  v-if="item.AuditRecordList[0].CareOfList!=null" style="display: inline-block; line-height: 24px; font-size: 12px; text-indent: 0; padding-left:40px; color: #666;">
										<b style="color: red;">{{$t('fnc.you')}} </b>{{item.AuditRecordList[0].CareOfList[0].BeFrom}} <b style="color: red;">{{$t('objFill.v101.administrative.zhuan')}}</b> {{item.AuditRecordList[0].CareOfList[0].Target}}
										<br/>
									   {{item.AuditRecordList[0].CareOfList[0].Remarks}}
									</span>
								</p>
								<div class="auditItemImgList" style="padding-left: 30px;">
								    	<img  v-for='img in toArr(item.AuditRecordList[0].Image)' :src="img" @click="getPic(toArr(item.AuditRecordList[0].Image))"/>
								 </div>
								<p v-if='item.AuditRecordList.length>1' style="cursor: pointer;">
									<span>{{item.AuditDescription}}{{item.AuditWay}}</span>
									<i class="el-icon-arrow-right"></i>
								</p>

								<div v-if='item.AuditRecordList.length>1'  style=" width: 300px; height: auto; margin:15px 0; border-radius: 4px; background: #F0F3FA;">
								   <p v-if='item.AuditWayStatus==2' style="padding: 10px; color: #666;">{{$t('objFill.v101.administrative.xuyixryqsptg')}}</p>
								   <p v-if='item.AuditWayStatus==3' style="padding: 10px; color: #666;">{{$t('objFill.v101.administrative.yixryayyrsptgjk')}}</p>

								   <div v-for="i in item.AuditRecordList">
								    	<p class="auditItemDetailtitle">
										  	<img  width="28" height="28" v-if="!i.AuditEmPhoto" src="../../assets/img/litheader.png" alt="">
						                  	<img  width="28" height="28" v-else :src="i.AuditEmPhoto" alt="" :onerror="defaultImg">
									    	<span>{{i.AuditEmName}}</span>
									    	<span :style="'color: ' + i.StatusColor + ' !important'">{{i.Stauts}}</span>
									    	<span style="display:block; padding-left: 40px; text-indent: 0; font-size: 12px; line-height: 24px; color: #333;">{{i.Description}}</span>
									    	<span v-if='i.CareOfList!=null' style="display: inline-block; line-height: 24px; font-size: 12px; text-indent: 0; padding-left:40px; color: #666;">
					    						<b style="color: red;">{{$t('fnc.you')}} </b>{{i.CareOfList[0].BeFrom}} <b style="color: red;">{{$t('objFill.v101.administrative.zhuan')}}</b> {{i.CareOfList[0].Target}}
												<br/>
											   {{i.CareOfList[0].Remarks}}
									    	</span>
								    	</p>
								    	<div class="auditItemImgList" v-if="toArr(i.Image).length>0">
								    	  <img  v-for='img in toArr(i.Image)' :src="img" @click="getPic(toArr(i.Image))"/>
								    	</div>
								    </div>
								</div>
							</div>
						</div>  <!--audit end-->


						<div class="send" v-if="detailList.AuditStatus==5">   <!--v-if="detailList.AuditStatus==5"-->
							<p class="sentTitle">{{$t('objFill.v101.administrative.chaosong')}}<span>{{$t('objFill.v101.administrative.shenptgtzcsr')}}</span></p>
							<div class="sendList">
								<div v-for="(item,index) in detailList.CopyToPeopleList">
								  	<img v-if="!item.EmPhoto" src="../../assets/img/litheader.png" alt="">
				                  	<img v-else :src="item.EmPhoto" alt="" :onerror="defaultImg">
									<br/>
									{{item.EmName}}
								</div>
							</div>
						</div>  <!--send end-->

						<div style="height: 50px; width: 100%;"><!--空白暂位,防止下面漂浮按钮遮挡内容--></div>
						<div class="forMyApprovalLayerBtn">
							<input v-if="IsAudit==1" type="button" class="hollowbtn" :value="$t('salesModule.Agree')"   @click="openDialog(IsAgree=true,detailList.WorkFlowId,detailList.TemplateType)"/>
							<input v-if="IsAudit==1" type="button" class="hollowbtn" :value="$t('objFill.butongyi')" @click="openDialog(IsAgree=false,detailList.WorkFlowId,detailList.TemplateType)" />
							<input v-if="IsAudit==1" type="button" class="hollowbtn" :value="$t('fnc.zhuanjiao')"  @click="transferDialog(detailList.WorkFlowId,detailList.TemplateType)"/>
							<input v-if="IsCancel==1" type="button" class="hollowbtn" :value="$t('adm.adm_chehui')  " @click="withdrawAapproval(detailList.WorkFlowId,detailList.TemplateType)"/>
							<input v-if="IsUpdate==1&&detailList.TemplateType!=4" type="button" class="hollowbtn"
								:value="$t('pub.updateMsg')" @click="updateAapproval('leaveApproval',detailList.Cmd,detailList.SubmitCmd,detailList.WorkFlowId,detailList.TempleteId)"/>
						</div>
				</div>
			</div>
				<el-dialog custom-class='w500' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="clearDialogMsg">
					<table class="layerTable" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td>{{$t('salesModule.SPYJ')}}</td>
							<td>
								<el-input type='textarea' v-model='appMsg.Description'></el-input>
							</td>
						</tr>
						<tr>
							<td>{{$t('system.label_img')}}</td>
							<td>
								<el-upload
								:file-list="fileList"
							    :http-request="UploadAttachment"
							    :multiple="true"
							    :limit="9"
								list-type="picture-card"
								:on-remove="handleRemove"
								:on-exceed="handleExceed"
								action="">
								 <i class="el-icon-plus"></i>
								</el-upload>
							</td>
						</tr>
					</table>
					<div slot="footer" class="dialog-footer">
						<button class="hollowFixedBtn" @click="btnClearDialogMsg">{{$t('pub.cancelBtn')}}</button> &nbsp;
						<button v-if='agree' class="normalBtn" type="primary" @click="agreeApproval">{{$t('objFill.v101.administrative.quedty')}}</button>
						<button v-if='!agree' class="normalBtn" type="primary" @click="rejectApproval">{{$t('objFill.v101.administrative.quedbty')}}</button>
					</div>
				</el-dialog>

				<el-dialog custom-class='w500' :title="dialogTitle1" :visible.sync="outerVisible1" center  :before-close="clearTransferDialog">
					<table class="layerTable" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="80" align="right">{{$t('fnc.zjbeizhu')}}：</td>
							<td>
								<el-input type='textarea' v-model='transferMsg.Description'></el-input>
							</td>
						</tr>
						<tr>
							<td width="80" align="right">{{$t('objFill.v101.administrative.xingmss')}}：</td>
							<td >
								<el-input class='w200' :placeholder="$t('objFill.v101.administrative.qingsrxmgjz')"  v-model="filterText"></el-input>
							</td>
						</tr>
						<tr>
							<td colspan="2">

								<el-tree class='forMyApprovalProcess'
									 :data="memberList"
									 :props="defaultProps"
									 :filter-node-method="filterNode"
									 show-checkbox
									 accordion
									 @check-change="handleNodeChange"
									 node-key="DepartmentId"
									 ref="tree"
									 check-strictly
									 >
							    </el-tree>
							</td>
						</tr>
					</table>

					<div slot="footer" class="dialog-footer">
						<button class="hollowFixedBtn" @click="btnClearTransferDialog">{{$t('pub.cancelBtn')}}</button> &nbsp;
						<button class="normalBtn" type="primary" @click="transferApproval">{{$t('pub.sureBtn')}}</button>
					</div>
				</el-dialog>
				<div :class="{viewBigPicLayer:true,viewBigPicLayerDisplayNone:dspNone}" @click="closePicLayer">
				    <i @click="closePicLayer" class="el-icon-circle-close-outline clolseViewBigPicLayer" ></i>
				    <el-carousel height="600px" :interval="5000" trigger="click">
				      <el-carousel-item v-for="(item,index) in picObj" :key="index">
				         <img :src="item" />
				      </el-carousel-item>
				    </el-carousel>
				</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				filterText:"",
				defaultProps: {
					children: 'ChildList',
					label: 'DepartmentName',
					disabled: "Disabled"
				},
				fileList:[],
				picObj:[],
				dspNone:true,
				workFlowId:'',
				templateType:"",
				agree:true,
				outerVisible:false,
				outerVisible1:false,
				dialogTitle:"",
				dialogTitle1:"",
				IsAudit:'',
				IsCancel:'',
				IsUpdate:'',
				showlayer:false,
				isTransition:false,
				loading:true,
				liCkedIndex:2,
				total:0,
  				defaultImg: 'this.src="' + require('../../assets/img/litheader.png') + '"',
				currentPage: 1,
				//请求数据
				msg:{
					auditType:'0',
					applyType:0,
					pageIndex:1,
					pageSize:5,
					searchKey:'',
					appAuditStatus:0,
				},
				appMsg:{
					WorkFlowId:'',
					TemplateType:'',
					Description:'',
					Image:[],
				},
				transferMsg:{
					WorkFlowId:'',
					TemplateType:'',
					Description:'',
					CareOfEmId:'-1',
				},

				//返回数据
				list:[],
				ApplyTypeList:[],
				appAuditStatusList:[],
				memberList:[],
				detailList:{},
				arr:[],
			}
		},
		watch: {
	      filterText(val) {
	        this.$refs.tree.filter(val);
	      }
	    },
		methods: {
			 UploadAttachment(file){   //上传
		      let newArr=[];
		      newArr.push(file.file)
		      let path="/Upload/Temporary/"
		      this.UploadSelfFileT(path,newArr,x=>{
							let url = this.domainManager().ViittoFileUrl + x.data.FilePath
		      	 this.appMsg.Image.push(url)
		      	 this.fileList.push({url:url})
		      });
		    },
		    handleRemove(file){   //删除
		    	 this.fileList.forEach((item,index)=>{
		    	 	if(item.url==file.url)
		    	 	{
		    	 		this.fileList.splice(index,1)
		    	 	}
		    	 })
		    	 this.appMsg.Image.forEach((item,index)=>{
					if(item==file.url)
		    	 	{
		    	 		this.appMsg.Image.splice(index,1)
		    	 	}
		    	 })

		    },
			handleExceed(files, fileList) {
			        this.$message.warning(this.$t('objFill.zuiduoscjzt'));
			      },
			clearDialogMsg(done){
				done()
				this.appMsg.Description=''
			//	this.appMsg.Image=[]
			},
			btnClearDialogMsg(){
				this.outerVisible=false
				this.appMsg.Description=''
			},
			btnClearTransferDialog(done){
				this.outerVisible1=false
				this.filterText=''
				this.transferMsg.WorkFlowId=''
				this.transferMsg.TemplateType=''
				this.transferMsg.Description=''
				this.transferMsg.CareOfEmId='-1'
				this.$refs.tree.setCheckedKeys([]);
			},
			closePicLayer(){
				this.dspNone=true
			},
			getPic(obj){
				this.picObj=obj
				this.dspNone=false;
			},
		    filterNode(value, data) {
		        if (!value) return true;
		        return data.DepartmentName.indexOf(value) !== -1;
		    },
			openDialog(IsAgree,workFlowId,templateType){
				this.agree=IsAgree
				this.dialogTitle=this.$t('fnc.spliucheng')
				this.outerVisible=true;
				this.workFlowId=workFlowId;
				this.templateType=templateType;
			},
			transferDialog(workFlowId,templateType){
				this.dialogTitle1=this.$t('objFill.v101.header.zhuanjialiuc')
				this.outerVisible1=true;
				this.workFlowId=workFlowId;
				this.templateType=templateType;
				this.apipost('WorkFlow_get_GetDepartMentEmployee', {}, res => {
					if(res.data.resultCode == 1) {
						this.memberList = res.data.data
					}
				}, err => {})
			},
			clearTransferDialog(done){
				done()
				this.filterText=''
				this.transferMsg.WorkFlowId=''
				this.transferMsg.TemplateType=''
				this.transferMsg.Description=''
				this.transferMsg.CareOfEmId='-1'
				this.$refs.tree.setCheckedKeys([]);
			},
			handleNodeChange(data,checked, node){
					if(checked){
						if(data.DepartmentId!=0){
							this.arr.push(data.DepartmentId)
							this.$refs.tree.setCheckedKeys([data.DepartmentId]);
							this.transferMsg.CareOfEmId=data.DepartmentId;
						}
					}else{
						if(this.arr.length==1){
							this.arr=[]
							this.transferMsg.CareOfEmId='-1'
						}else{
							this.arr=this.arr.slice(this.arr.length-1)
							this.transferMsg.CareOfEmId=this.arr[this.arr.length-1]
						}
					}
			},

			transferApproval(){
				this.transferMsg.WorkFlowId=this.workFlowId
				this.transferMsg.TemplateType=this.templateType
				if(this.transferMsg.CareOfEmId=='-1')
				{
					this.$message.warning(this.$t('rule.qxzzjiaoren'))
					return
				}
				this.apipost('WorkFlow_post_SetCareOf',this.transferMsg,res=>{
					if(res.data.resultCode == 1) {
						this.$message.success(res.data.message)
						this.outerVisible1=false;
						this.getList()
						this.closeLayer()
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
			agreeApproval(){
				this.appMsg.WorkFlowId=this.workFlowId
				this.appMsg.TemplateType=this.templateType
				this.apipost('WorkFlow_post_SetConsent',this.appMsg,res=>{
					if(res.data.resultCode == 1) {
						this.$message.success(res.data.message)
						this.outerVisible=false;
						this.getList()
						this.btnClearDialogMsg()
						this.closeLayer()

					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
			rejectApproval(){
				this.appMsg.WorkFlowId=this.workFlowId
				this.appMsg.TemplateType=this.templateType
				this.apipost('WorkFlow_post_SetNotConsent',this.appMsg,res=>{
					if(res.data.resultCode == 1) {
						this.$message.success(res.data.message)
						this.outerVisible=false;
						this.getList()
						this.btnClearDialogMsg()
						this.closeLayer()
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},

			withdrawAapproval(workFlowId,templateType){
				this.$confirm(this.$t('adm.adm_sfchehui')+"?", this.$t('tips.tips'), {
					confirmButtonText: this.$t('pub.sureBtn'),
					cancelButtonText: this.$t('pub.cancelBtn'),
					type: 'warning'
				}).then(() => {
					this.apipost('app_user_workflow_wndoaudit',{workFlowId:workFlowId,templateType:templateType},res=>{
						if(res.data.resultCode == 1) {
							this.$message.success(this.$t('adm.adm_chsuccess'));
							this.getList()
						}
					},err=>{})
				}).catch(() => {
					this.$message.info(this.$t('objFill.v101.header.yiquxiaoch'))
				});
			},
			updateAapproval(path,cmd,submitCmd,workFlowId,templateId){
			 	 this.$router.push({ name: path, query:{cmd:cmd,submitCmd:submitCmd,workFlowId:workFlowId,templateId:templateId}})
			},
			getBigpic(obj){

			},
			toArr(val){
                let arr=[]
                if(val!="[]")
                {
				    val.substring(1,val.length-1).split(',').forEach(item=>{
				    	arr.push(item.substring(1,item.length-1))
				    });
                }
			    return arr;
			},
			getDetail(id,type){
				this.showLayer();
				this.apipost('app_user_workflow_GetAuditInfo',{WorkFlowId:id,TemplateType:type},res=>{
					if(res.data.resultCode == 1) {
						this.detailList=res.data.data
						this.IsAudit=res.data.data.IsAudit
						this.IsCancel=res.data.data.IsCancel
						this.IsUpdate=res.data.data.IsUpdate
					}
				},err=>{})
			},
			getList(){
				this.loading=true;
				this.apipost('app_user_workflow_my_audit',this.msg,res=>{
					if(res.data.resultCode == 1) {
						this.list=res.data.data.pageData;
						this.total=res.data.data.count;
						this.loading=false
					}
				},err=>{})
			},
			getApplyType(){  //模板类型
				this.apipost('app_user_workflow_get_templatetype',{},res=>{
					if(res.data.resultCode == 1) {
						res.data.data.forEach(item=>{
							for(let key in item){
								 if (item.hasOwnProperty(key)){
								 	 this.ApplyTypeList.push({label:key,value:item[key]})
								 }
							}
						})
					}
				},err=>{})
			},
			getAppAuditStatus(){
				this.apipost('app_user_workflow_get_myinitiate_auditstatus',{},res=>{
					if(res.data.resultCode == 1) {
						res.data.data.forEach(item=>{
							for(let key in item){
								 if (item.hasOwnProperty(key)){
								 	 this.appAuditStatusList.push({label:key,value:item[key]})
								 }
							}
						})
					}
				},err=>{})
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1

			},
			showLayer() {
				this.showlayer = true;
				this.isTransition = true;
				this.displayNone=false
			},
			closeLayer() {
				let _this = this;
				setTimeout(function() {
					_this.showlayer = false;
				}, 300)
				this.isTransition = false;
				this.displayNone=true
			},
			goUrl (path,id) {
	            this.$router.push({ name: path})
	        }
		},
		mounted() {
			this.getList()
			this.getApplyType()
			this.getAppAuditStatus()
		}
	}
</script>

<style>
	.appListparent{ overflow-x: auto;}
    .appListparent::-webkit-scrollbar{/*滚动条整体样式*/width: 4px;/*高宽分别对应横竖滚动条的尺寸*/height: 8px;}
    .appListparent::-webkit-scrollbar-thumb{/*滚动条里面小方块*/border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
    .appListparent::-webkit-scrollbar-track{/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
	.forMyApprovalProcess {
		background: #f8f8f8;
		max-height: 400px;
		overflow-y: auto;
	}

	.auditItemImgList{}
	.auditItemImgList>img{width: 48px; height: 48px; border-radius: 4px; margin:8px 0 8px 10px;}
	.auditItemDetailtitle{}
	.auditItemDetailtitle>img{float: left; border-radius: 16px; margin: 0 10px 0 0;}
	.auditItemDetailtitle>span{line-height: 32px;}
	.forMyApprovalLayer{position: fixed; z-index: 99; background: rgba(0,0,0,.2); width: 100%; height: 100%; left: 0; top: 0;}
	.forMyApprovalLayercontentDiv{width: 400px; background: #fff; height: 100%; overflow: auto; top: 0; right:-800px; position: fixed;box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.1);transition: right .5s;}
	.forMyApprovalLayer .rightZero{right: 0px;}
	.forMyApprovalLayercontentDiv  .title{height: 48px; background: #EDEEF0; line-height: 48px; font-size:16px; color: #333; text-indent: 30px;}
	.forMyApprovalLayercontentDiv  .user{width: 340px; margin: 0 30px; border-bottom: 1px solid #E6E6E6; height: 60px; padding: 30px 0; box-sizing: content-box}
	.forMyApprovalLayercontentDiv  .user>p{line-height: 28px;}
	.forMyApprovalLayercontentDiv  .user>img{width:58px; height: 58px; border-radius: 29px; float: left; margin:0 12px 0 0;}
	.forMyApprovalLayercontentDiv  .detail{width: 340px; margin: 0 30px; padding: 25px 0; border-bottom: 1px solid #E6E6E6; min-height: 120px;}
	.forMyApprovalLayercontentDiv  .audit{width: 340px; margin: 30px 30px 0;  min-height: 120px; border-bottom: 1px solid #E6E6E6;}
	.forMyApprovalLayercontentDiv  .audit .auditItem{min-height: 80px; width: 320px; margin-left: 20px; border-left:1px solid #EDEDED; position: relative; font-size: 14px;}
	.forMyApprovalLayercontentDiv  .audit .auditItem:last-child{border-left: none;}
	.forMyApprovalLayercontentDiv  .audit .auditItem>p{line-height: 40px;text-indent: 40px;}
	.forMyApprovalLayercontentDiv  .audit .auditItem>img{width: 40px;  height: 40px; border-radius: 20px; position: absolute; left: -20px;}
	.forMyApprovalLayercontentDiv  .send{width: 340px; margin: 30px 30px 0;  min-height: 120px;}
	.forMyApprovalLayercontentDiv  .send .sentTitle{height: 14px; line-height: 14px; text-indent:10px; border-left:3px solid #E95252; font-size: 14px;}
	.forMyApprovalLayercontentDiv  .send .sentTitle span{color: #666; margin-left: 20px;}
	.forMyApprovalLayercontentDiv  .send .sendList>div{float: left; margin: 10px 10px 0 0; font-size: 12px; color: #666; width: 40px; text-align: center;}
	.forMyApprovalLayercontentDiv  .send .sendList>div>img{width: 40px; height: 40px; border-radius: 20px;}
	.forMyApprovalLayercontentDiv .myApprovalTable tr{height: 40px; font-size: 14px;}
	.forMyApprovalLayercontentDiv .myApprovalTable tr td:nth-child(1){text-align: right; color: #666; }
	.forMyApprovalLayerBtn{position: fixed; bottom: 0; background: #fff; width: 100%; height: 40px; line-height: 40px; padding: 0 30px; border-top:1px solid #F0F3FA}
	.forMyApprovalLayerBtn input{margin-right: 10px;}
	.myApprovalMenu{width: 100%;  height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 4px; margin: 30px 0;}
	.myApprovalMenu li{float: left; width:25%; font-size: 14px; color: #666; cursor: pointer;}
	.myApprovalMenu li:hover{border-bottom: 2px solid #E95252;}
	.myApprovalMenu li.cked{border-bottom: 2px solid #E95252; font-size: 16px; color:#E95252;}
    .forMyApprovalTable{width: 100%; min-width: 1600px; height: 38px;}
    .forMyApprovalTable li{float: left; width: 20%; height: 38px; line-height: 38px; font-size: 14px; text-indent: 20px;background: #EDEDED; font-family: PingFangSC-Semibold !important;}
    .forMyApprovalItem{width: 100%;  min-width: 1600px; min-height:80px; padding: 20px 0; background: #fff; border-bottom:1px solid #f9f9f9; overflow: hidden;}
    .forMyApprovalItem li{float:left;  width: 20%; height: 100%; font-size: 14px; text-indent: 20px;}
    .forMyApprovalItem li>p{line-height: 24px; color: #666;}
    .forMyApprovalItem:hover{box-shadow:0px 0px 10px rgba(191,191,191,1);transition: all linear 0.3s; position: relative; z-index: 5;}
    .forMyApprovalItem li>img{float: left; width: 40px; height: 40px; border-radius: 20px; margin: 0 10px 20px 30px;}
</style>
