<template>
  <div class="flexOne">
    <div class="myApprovalMenu">
      <li :class="{cked:liCkedIndex==1}" @click="goUrl('myApproval')">发起审批</li>
      <li :class="{cked:liCkedIndex==2}">我的审批</li>
      <li :class="{cked:liCkedIndex==3}" @click="goUrl('myApprovalList')">我发起的</li>
      <li :class="{cked:liCkedIndex==4}" @click="goUrl('sendToMeApproval')">抄送我的</li>
    </div>
    <div style="text-align: right">
      <input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList()"/>
    </div>
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <span><em>关键字</em><el-input class='w210' v-model="msg.searchKey"  placeholder="请输入申请人"  @keyup.enter.native="getList"></el-input></span>
        </li>
        <li>
						<span><em>审批类型</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>审批状态</em><el-select v-model='msg.auditType'>
							<el-option label='不限' value='0'></el-option>
							<el-option label='待审核' value='1'></el-option>
							<el-option label='已审核' value='2'></el-option>
						</el-select></span>
        </li>
        <li>
						<span><em>申请审核状态</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></li>
      </ul>
    </div>

    <div class="appListparent" v-loading='loading'>
      <div class="forMyApprovalTable">
        <li>审批标题</li>
        <li>搜索简要</li>
        <li>发起时间</li>
        <li>状态</li>
        <li>操作</li>
      </div>
      <div class="forMyApprovalItem" v-for="(item,index) in list">
        <li>
          <img v-if="!item.userPhoto" src="../../assets/images/administration/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="详情" @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/images/administration/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/images/administration/litheader.png" alt="">
            <img v-else :src="detailList.ProposerPhoto" alt="" :onerror="defaultImg">
            <p>
              <span>{{detailList.Proposer}}</span>&nbsp;&nbsp;<span>发起申请</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/images/administration/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/images/administration/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;">由 </b>{{item.AuditRecordList[0].CareOfList[0].BeFrom}} <b style="color: red;">转</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;">须以下人员全部审批通过</p>
              <p v-if='item.AuditWayStatus==3' style="padding: 10px; color: #666;">以下人员大于等于一人审批通过即可</p>

              <div v-for="i in item.AuditRecordList">
                <p class="auditItemDetailtitle">
                  <img  width="28" height="28" v-if="!i.AuditEmPhoto" src="../../assets/images/administration/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;">由 </b>{{i.CareOfList[0].BeFrom}} <b style="color: red;">转</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">抄送<span>审批通过后，通知抄送人</span></p>
          <div class="sendList">
            <div v-for="(item,index) in detailList.CopyToPeopleList">
              <img v-if="!item.EmPhoto" src="../../assets/images/administration/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="同意"   @click="openDialog(IsAgree=true,detailList.WorkFlowId,detailList.TemplateType)"/>
          <input v-if="IsAudit==1" type="button" class="hollowbtn" value="不同意" @click="openDialog(IsAgree=false,detailList.WorkFlowId,detailList.TemplateType)" />
          <input v-if="IsAudit==1" type="button" class="hollowbtn" value="转交"  @click="transferDialog(detailList.WorkFlowId,detailList.TemplateType)"/>
          <input v-if="IsCancel==1" type="button" class="hollowbtn" value="撤回" @click="withdrawAapproval(detailList.WorkFlowId,detailList.TemplateType)"/>
          <input v-if="IsUpdate==1&&detailList.TemplateType!=4" type="button" class="hollowbtn"
                 value="修改" @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>审批意见</td>
          <td>
            <el-input type='textarea' v-model='appMsg.Description'></el-input>
          </td>
        </tr>
        <tr>
          <td>图片</td>
          <td>
            <el-upload
              :file-list="fileList"
              :http-request="uploadTest"
              :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">取 消</button> &nbsp;
        <button v-if='agree' class="normalBtn" type="primary" @click="agreeApproval">确定同意</button>
        <button v-if='!agree' class="normalBtn" type="primary" @click="rejectApproval">确定不同意</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">转交备注：</td>
          <td>
            <el-input type='textarea' v-model='transferMsg.Description'></el-input>
          </td>
        </tr>
        <tr>
          <td width="80" align="right">姓名搜索：</td>
          <td >
            <el-input class='w200' placeholder="请输入姓名关键字"  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="DeptId"
                     ref="tree"
                     check-strictly
            >
            </el-tree>
          </td>
        </tr>
      </table>

      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="btnClearTransferDialog">取 消</button> &nbsp;
        <button class="normalBtn" type="primary" @click="transferApproval">确定</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>
  import {
    myInitiateAudit,
    gettemplatetype,
    getMyInitiateAuditStatus,
    getAuditInfo,
    undoAudit,//撤回
    setConsent,
    setNotConsent,
    setCareOf,
    myAudit
  } from '../../api/administration/administration';
  import {
    getEmployeeAddrBook
  } from '../../api/users/user'
  import {
    UploadSelfFile
  } from '../../api/common/common'
  export default {
    data() {
      return {
        filterText:"",
        defaultProps: {
          children: 'ChildList',
          label: 'DeptName',
          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/images/administration/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: {
      uploadTest(file){   //上传
        let newArr=[];
        newArr.push(file.file)
        let path="/Upload/Temporary/"

        UploadSelfFile('Temporary', file.file, x => {
          if(x.Code==1){
            let url =  x.FileUrl
            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('最多只能上传9张图片！');
      },
      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.DeptName.indexOf(value) !== -1;
      },
      openDialog(IsAgree,workFlowId,templateType){
        this.agree=IsAgree
        this.dialogTitle='审批流程'
        this.outerVisible=true;
        this.workFlowId=workFlowId;
        this.templateType=templateType;
      },
      transferDialog(workFlowId,templateType){
        this.dialogTitle1='转交流程'
        this.outerVisible1=true;
        this.workFlowId=workFlowId;
        this.templateType=templateType;
        getEmployeeAddrBook({}).then(res => {
          if(res.Code == 1) {
            this.memberList = res.Data;
          }
        }).catch(() => {

        })
        // 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.DeptId!=0){
            this.arr.push(data.DeptId)
            this.$refs.tree.setCheckedKeys([data.DeptId]);
            this.transferMsg.CareOfEmId=data.DeptId;
          }
        }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('请选择转交人！')
          return
        }
        setCareOf(this.transferMsg).then(res => {
          if(res.Code == 1) {
            this.$message.success(res.Message)
            this.outerVisible1=false;
            this.getList()
          }else {
            this.$message.error(res.Message)
          }
        }).catch(() => {

        })
      },
      agreeApproval(){
        this.appMsg.WorkFlowId=this.workFlowId
        this.appMsg.TemplateType=this.templateType
        setConsent(this.appMsg).then(res => {
          if(res.Code == 1) {
            this.$message.success(res.Message)
            this.outerVisible=false;
            this.getList()
            this.btnClearDialogMsg()
            this.closeLayer()
          }else {
            this.$message.error(res.Message)
          }
        }).catch(() => {

        })
      },
      rejectApproval(){
        this.appMsg.WorkFlowId=this.workFlowId
        this.appMsg.TemplateType=this.templateType
        setNotConsent(this.appMsg).then(res => {
          if(res.Code == 1) {
            this.$message.success(res.Message)
            this.outerVisible=false;
            this.getList()
            this.btnClearDialogMsg()
            this.closeLayer()
          }else {
            this.$message.error(res.Message)
          }
        }).catch(() => {

        })
      },

      withdrawAapproval(workFlowId,templateType){
        this.$confirm('是否撤回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          undoAudit({workFlowId:workFlowId,templateType:templateType}).then(res => {
            if(res.Code == 1) {
              this.$message.success('撤回成功。')
              this.getList()
              this.showlayer = false;
            }
          }).catch(() => {

          })
        }).catch(() => {
          this.$message.info('已取消撤回。')
        });
      },
      updateAapproval(path,cmd,submitCmd,workFlowId,templateId){
        this.$router.push({ path: 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();
        getAuditInfo({WorkFlowId:id,TemplateType:type}).then(res => {
          if(res.Code == 1) {
            this.detailList=res.Data
            this.IsAudit=res.Data.IsAudit
            this.IsCancel=res.Data.IsCancel
            this.IsUpdate=res.Data.IsUpdate
          }
        }).catch(() => {

        })
      },
      getList(){
        this.loading=true;

        myAudit(this.msg).then(res => {
          if(res.Code == 1) {
            this.list=res.Data.PageData;
            this.total=res.Data.Count;
            this.loading=false
          }
        }).catch(() => {

        })

      },
      getApplyType(){  //模板类型
        gettemplatetype({}).then(res => {
          if(res.Code == 1) {
            res.Data.forEach(item=>{
              for(let key in item){
                if (item.hasOwnProperty(key)){
                  this.ApplyTypeList.push({label:key,value:item[key]})
                }
              }
            })
          }
        }).catch(() => {

        })
      },
      getAppAuditStatus(){
        getMyInitiateAuditStatus({}).then(res => {
          if(res.Code == 1) {
            res.Data.forEach(item=>{
              for(let key in item){
                if (item.hasOwnProperty(key)){
                  this.appAuditStatusList.push({label:key,value:item[key]})
                }
              }
            })
          }
        }).catch(() => {

        })
      },
      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({ path: path})
      }
    },
    mounted() {
      this.getList()
      this.getApplyType()
      this.getAppAuditStatus()
    }
  }
</script>

<style>
  @import "../financial/css/cssReset.css";
  .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: 10px 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>
