<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>
  import {
    auditworkflowTemplate,
  } from '../../api/administration/administration';
  export default {
    data() {
      return {
        outerVisible:false,
        liCkedIndex:1,
        //请求数据
        msg:{

        },
        //返回数据
        myTitle:'',
        typeLength:'',
        typeList:[],
      }
    },
    methods: {
      getList(){
        auditworkflowTemplate(this.msg).then(res => {
          if(res.Code == 1) {
            this.typeList=res.Data[0].templateList
            this.myTitle=res.Data[0].groupName
            this.typeLength=res.Data[0].templateList.length
          }
        }).catch(() => {

        })

      },
      goUrl (path,cmd,submitCmd,id) {
        this.$router.push({ path: path,query:{"cmd":cmd,"submitCmd":submitCmd,'templateId':id}})
      }
    },
    mounted() {
      this.getList()
    }
  }
</script>

<style>
  @import "../financial/css/cssReset.css";

  .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>
