<template>
	<div class="flexOne">
		<div class="myApprovalMenu">
			<li :class="{cked:liCkedIndex==1}">发起审批</li>
			<li :class="{cked:liCkedIndex==2}"  @click="goUrl('forMyApproval')">我的审批</li>
			<li :class="{cked:liCkedIndex==3}"  @click="goUrl('myApprovalList')">我发起的</li>
			<li :class="{cked:liCkedIndex==4}"  @click="goUrl('sendToMeApproval')">抄送我的</li>
		</div>
		<!--<p>
			<el-input class='w200' prefix-icon="el-icon-search"   placeholder="请输入内容"></el-input>
			&nbsp;
			<input type="button" class="hollowFixedBtn" value="搜索" />
		</p>-->
		<p class="myApprovalMenuTitle" v-if='typeLength>0'>{{myTitle}}（{{typeLength}}）</p>
		<div class="myApprovalTypeList">
			<li v-for="(item,index) in typeList"  v-if="item.name!='补卡'"   @click="goUrl('leaveApproval',item.cmd,item.submitCmd,item.id)"><img :src="item.icon"> {{item.name}}</li>
		    <li v-for="(item,index) in typeList"  v-if="item.name=='补卡'" @click="outerVisible = true">   <img :src="item.icon"> {{item.name}}</li>
		</div>
		<el-dialog custom-class='w500' title="补卡申请" :visible.sync="outerVisible" center>
			<div style="text-align: center;  padding: 20px 0;">
				<i class="iconfont icon-buqiashenqing" style="font-size: 50px; color: #666;"></i>
				<p style="margin-top: 20px; font-size: 16px; color: #666;">暂只支持在手机上申请补卡！</p>
			</div>
			<div slot="footer" class="dialog-footer">
				<button class="normalBtn" @click="outerVisible = false">我知道了</button> &nbsp;
			</div>			
		</el-dialog>			
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				outerVisible:false,
				liCkedIndex:1,
				//请求数据
				msg:{
					
				},
				//返回数据
				myTitle:'',
				typeLength:'',
				typeList:[],
			}
		},
		methods: {
			getList(){
				this.apipost('app_user_workflow_auditworkflow_template',this.msg,res=>{
					if(res.data.resultCode == 1) {
						this.typeList=res.data.data[0].templateList
						this.myTitle=res.data.data[0].groupName
						this.typeLength=res.data.data[0].templateList.length
					}
				},err=>{})
			},
	        goUrl (path,cmd,submitCmd,id) {
	            this.$router.push({ name: path,query:{"cmd":cmd,"submitCmd":submitCmd,'templateId':id}}) 
	        }			
		},
		mounted() {
			this.getList()
		}
	}
</script>

<style>
	.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;}
	.myApprovalMenuTitle{height: 14px; line-height: 14px; font-size: 14px; color: #333; text-indent: 20px; border-left:3px solid #E95252; margin:40px 0 20px 0;}
	.myApprovalTypeList li{float: left; height:160px; background: #fff; box-shadow: 1px 1px 1px rgba(0,0,0,.1); cursor:pointer;  border-radius: 4px; width: 360px; line-height: 160px;margin: 0 40px 20px 0;}
	.myApprovalTypeList li>img{float: left; margin: 36px 20px 38px 22px; width: 86px;}
</style>