<template>
  <div class="approvalDetails" v-loading="pageLoad">
    <div style="width:100%;background:#f5f5f5">
        <div style="width:80%;margin:0 auto;">
            
            <div style="margin-top:30px;background:rgba(255,255,255,1);border-radius:10px;padding:20px;position:relative;">
                <div style="padding-bottom:10px;text-align:right">
                    <span @click="GoZcUrl" style="font-size:12px;text-decoration:underline;cursor: pointer;">跳转到资产管理</span>
                </div>
                <el-row class="HeaderDiv" style="border-bottom:1px solid #E2E4EB;">
                    <span class="underline"></span>
                    <el-col :span="12" style="position:relative" class="titleSpanBox">
                        <span class="titleSpan">
                            <span>{{GetDetail.FirstStr}}</span>
                        </span>
                        <p class="c11 f14">{{GetDetail.TemplateName}}</p>
                    </el-col>
                    <el-col class="StateCol" :span="12" style="text-align:right">
                        <span v-if="GetDetail.AuditStatus==1" class="spz">{{GetDetail.AuditStatusName}}</span>
                        <span v-if="GetDetail.AuditStatus==2 || GetDetail.AuditStatus==4" class="ytg">{{GetDetail.AuditStatusName}}</span>
                        <span v-if="GetDetail.AuditStatus==3 || GetDetail.AuditStatus==5" class="wtg">{{GetDetail.AuditStatusName}}</span>
                    </el-col>
                </el-row>
                <el-row class="zcInfo">
                    <el-col :span="12">
                        <span>来源 :</span>
                        <span>{{GetDetail.SourceName}}</span>
                    </el-col>
                    <el-col v-if="GetDetail.Source!=2 && GetDetail.Source!=4 && GetDetail.Source!=5" :span="12">
                        <span>申请人 :</span>
                        <span>{{GetDetail.EmName}}</span>
                    </el-col>
                    <el-col v-if="GetDetail.Source!=2 && GetDetail.Source!=4 && GetDetail.Source!=5" :span="12">
                        <span>公司 :</span>
                        <span>{{GetDetail.BranchName}}</span>
                    </el-col>
                    <el-col v-if="GetDetail.Source==5" :span="12">
                        <span>调入公司 :</span>
                        <span>{{GetDetail.InBranchName}}</span>
                    </el-col>
                    
                    <el-col v-if="GetDetail.Source!=2 && GetDetail.Source!=4 && GetDetail.Source!=5" :span="12">
                        <span>部门 :</span>
                        <span>{{GetDetail.DepartmentName}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span>单号 :</span>
                        <span>{{GetDetail.OrderCode}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span>时间 :</span>
                        <span v-if="GetDetail.Time!=''">{{GetDetail.Time}}</span>
                        <span v-if="GetDetail.BackTime!=''">{{GetDetail.BackTime}}</span>
                        
                    </el-col>
                    <el-col v-if="GetDetail.ChangePerson && GetDetail.ChangePerson!=''" :span="12">
                        <span>原领用人 :</span>
                        <span>{{GetDetail.ChangePerson}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span>备注 :</span>
                        <span>{{GetDetail.Remark}}</span>
                    </el-col>
                </el-row>
                <p class="f12 c11" style="margin-top:25px">资产清单</p>
                <table style="margin-top:10px" class="zcmyTable noHoverTable" border="0" cellspacing="0" cellpadding="0">
                        <thead>
                            <th>资产编号</th>
                            <th>资产名称</th>
                            <th>品牌名称</th>
                            <th>分类名称</th>
                            <th>型号</th>
                        </thead>
                        <tbody>
                            <tr  v-for="(item,index) in GetDetail.DetailList" :key="index">    
                                <td><span @click="getCheckDes(item)" style="text-decoration: underline;cursor: pointer;">{{item.PropertyNum}}</span></td>         
                                <td>{{item.PropertyName}}</td>  
                                <td>{{item.BrandName}}</td>     
                                <td>{{item.CategoryName}}</td>     
                                <td>{{item.PropertyModel}}</td>  
                            </tr>
                            
                            <tr v-show="GetDetail.DetailList.length==0">
                                <td colspan="4" align="center">暂无数据</td>
                            </tr>
                        </tbody>
                    </table>
            </div>
            <div style="margin-top:30px;background:rgba(255,255,255,1);border-radius:10px;padding:20px;position:relative;">
                <ul class="allStep" style="position:relative;">
                    <li v-for="(item,index) in GetDetail.AuditSteps" :key="index">
                        <div>
                            <span v-if="index!=0" class="line"></span>
                            <span class="circle">
                                <img src="../../../assets/img/step2.png" alt="">
                            </span>
                            <span style="display:inline-block;position:relative;top:20px">
                                <div>{{item.AuditDescription}}</div>
                                <div style="margin-top:10px;color:#28CACC">{{item.AuditWayName}}</div>
                            </span>
                        </div>
                        
                    </li>
                    <el-popover
                            popper-class="detailsIT_Journal"
                            width="250"
                            trigger="click">
                            <div class="InfoChangeLog" >
                                <div class="changLog">
                                <p class="_log_t">流程日志</p>
                                <ul class="changLogList" style="height:154px" v-if="danjuList.length>0">
                                    <li class="changLogList_l" v-for="(log,li) in danjuList">
                                        <span style="background-color: #47BF8C"  class="_radius_green"></span>
                                        <p> <span class="_color_blue">{{log.UpdateBy}}</span>  <span style="float:right" class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                                        <p class="_dtel">{{log.Content}}</p>
                                    </li>
                                </ul>
                                <ul v-else>
                                    <li>暂无修改日志</li>
                                </ul>
                            </div>
                        </div>
                        <span slot="reference" class="rizhi underline">单据操作日志</span>
                    </el-popover>
                    
                </ul>
                <div class="_process clearfix">
                    <div class="_process_box">
                        <template v-for="(item,index) in GetDetail.AuditSteps">
                            <div class="_pb_son" :class="{_none_after:(item.NextStep==1||item.Status==4),_bohui_after:(GetDetail.Status==3 && !IsBoHui && index===GetDetail.AuditSteps.length-1)}" v-if="item.Sort==0 || (item.Status==1 && item.NextStep==1) || (item.Status==2 && item.Sort!=0) || (item.Status==4)">
                                <div class="_left_radius" v-if="item.Sort==0">发起</div>
                                <div class="_left_radius _left_radius_sus" v-if="item.NextStep==1">
                                    <span v-if="item.SpecialNode==2">待签</span>
                                    <span v-else>待审</span>
                                </div>
                                <div class="_left_radius" v-if="item.Sort!=0 && item.Status==2">
                                    <span v-if="item.SpecialNode==2">已签</span>
                                    <span v-else>通过</span>
                                </div>
                                <div class="_left_radius _left_radius_err" v-else-if="item.Status==4">驳回</div>
                                <div class="_right_content" v-if="item.AuditWay==2 || item.AuditWay==3">
                                    <p class="_name">
                                        <span class="_n">{{item.AuditDescription}}<span class="_sm">({{item.AuditWay==2?'会签':'或签'}})</span></span>
                                    </p>
                                    <div class="_more _mgt_15" v-for="(son,sindex) in item.AuditRecordList" v-if="son.AuditStatus==2">
                                        <div class="_right_content">
                                            <p class="_name">
                                                <span class="_n PingFangSC">{{son.AuditName}}</span>
                                                <span class="_sn" v-if="son.AuditStatus==2">
                                                    <span v-if="item.SpecialNode==2">已签</span>
                                                    <span v-else>通过</span>
                                                </span>
                                                <span class="_time _time_n">{{son.AduitDate}}</span>
                                            </p>
                                            <template  v-if="son.CareOfRemarks">
                                                <div class="_zhuan_msg" v-for="(z,zIndex) in JSON.parse(son.CareOfRemarks)">
                                                    <p><span>由</span>{{z.BeFrom}}<span><i class="_color_green">转交</i>给</span>{{z.Target}}</p>
                                                    <p class="_pp_info">转交备注：{{z.Remarks?z.Remarks:'无'}}</p>
                                                </div>
                                            </template>
                                            <div class="_pp_info" v-if="son.AuditStatus!=1 && item.SpecialNode!=2">
                                                <p>{{!son.Remark || son.Remark==''?'无' : son.Remark}}</p>
                                                <div class="_info_img" v-if="son.ImageList!=null&&son.AuditStatus==2" >
                                                    <ul class="clearfix"  v-if="son.ImageList.length&&son.ImageList.length>=1">
                                                        <li v-for="(img,imgI) in son.ImageList">
                                                            <img v-if="!img" src="../../../assets/img/Travelslider.png" alt="">
                                                            <img v-else :src="img" alt="">
                                                            <div class="_see_img" @click="showImg(son,2)">
                                                                <i class="iconfont icon-sousuo"></i>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div v-if="son.SignImage!=''">
                                                <img style="height: 82px;width: 143px;margin-top:10px;border: 1px solid #eee" :src="son.SignImage">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="_more _mgt_15" v-for="(son,sindex) in item.AuditRecordList" v-if="son.AuditStatus!=2">
                                        <div class="_right_content" v-if="item.AuditWay==2&&son.AuditStatus!=2">
                                            <p class="_name">
                                                <span class="_n PingFangSC">{{son.AuditName}}</span>
                                                <span class="_sn" v-if="son.AuditStatus==2">
                                                    <span v-if="item.SpecialNode==2">已签</span>
                                                    <span v-else>通过</span>
                                                </span>
                                                <span class="_m" v-else-if="son.AuditStatus==4">驳回</span>
                                                <span class="_sm" v-else-if="son.AuditStatus==1">
                                                    <span v-if="item.SpecialNode==2">待签</span>
                                                    <span v-else>待审</span>
                                                </span>
                                                <span class="_time _time_n" v-if="item.Status!=1">{{son.AduitDate}}</span>
                                            </p>
                                            <template  v-if="son.CareOfRemarks">
                                                <div class="_zhuan_msg" v-for="(z,zIndex) in JSON.parse(son.CareOfRemarks)">
                                                    <p><span>由</span>{{z.BeFrom}}<span><i class="_color_green">转交</i>给</span>{{z.Target}}</p>
                                                    <p class="_pp_info">转交备注：{{z.Remarks?z.Remarks:'无'}}</p>
                                                </div>
                                            </template>
                                            <div class="_pp_info" v-if="item.Status!=1">
                                                <p>{{!son.Remark || son.Remark==''?'无' : son.Remark}}</p>
                                                <div class="_info_img" v-if="son.ImageList!=null&&item.Status!=1" >
                                                    <ul class="clearfix"  v-if="son.ImageList.length&&son.ImageList.length>=1">
                                                        <li v-for="(img,imgI) in son.ImageList">
                                                            <img v-if="!img" src="../../../assets/img/Travelslider.png" alt="">
                                                            <img v-else :src="img" alt="">
                                                            <div class="_see_img" @click="showImg(son,2)">
                                                                <i class="iconfont icon-sousuo"></i>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div v-if="son.SignImage!=''">
                                                <img style="height: 82px;width: 143px;margin-top:10px;border: 1px solid #eee" :src="son.SignImage">
                                            </div>
                                        </div>
                                        <div class="_right_content" v-else-if="item.AuditWay==3 && son.AuditStatus==1">
                                            <p class="_name">
                                            <span class="_n PingFangSC">{{son.AuditName}}</span>
                                            <span class="_sm" v-if="item.Status==2 && item.Sort!=0">通过</span>
                                            <span class="_m" v-else-if="item.Status==4">驳回</span>
                                            <span class="_sm _left_radius_sus" v-else-if="son.AuditStatus==1">待审</span>
                                            <span class="_time _time_n" v-if="item.Status!=1">{{son.AduitDate}}</span>
                                            </p>
                                            <template  v-if="son.CareOfRemarks">
                                                <div class="_zhuan_msg" v-for="(z,zIndex) in JSON.parse(son.CareOfRemarks)">
                                                    <p><span>由</span>{{z.BeFrom}}<span><i class="_color_green">转交</i>给</span>{{z.Target}}</p>
                                                    <p class="_pp_info">转交备注：{{z.Remarks?z.Remarks:'无'}}</p>
                                                </div>
                                            </template>
                                            <div class="_pp_info" v-if="item.Status!=1">
                                                <p>{{!son.Remark || son.Remark==''?'无' : son.Remark}}</p>
                                                <div class="_info_img" v-if="son.ImageList!=null&&item.Status!=1" >
                                                    <ul class="clearfix" v-if="son.ImageList.length&&son.ImageList.length>=1">
                                                        <li v-for="(img,imgI) in son.ImageList">
                                                            <img v-if="!img" src="../../../assets/img/Travelslider.png" alt="">
                                                            <img v-else :src="img" alt="">
                                                            <div class="_see_img" @click="showImg(son)">
                                                                <i class="iconfont icon-sousuo"></i>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="_right_content" v-else-if="item.AuditWay==3 && son.AuditStatus==4">
                                            <p class="_name">
                                                <span class="_n PingFangSC">{{son.AuditName}}</span>
                                                <span class="_sm" v-if="item.Status==2 && item.Sort!=0">通过</span>
                                                <span class="_m" v-else-if="item.Status==4">驳回</span>
                                                <span class="_sm _left_radius_sus" v-else-if="son.AuditStatus==1">待审</span>
                                                <span class="_time _time_n" v-if="item.Status!=1">{{son.AduitDate}}</span>
                                            </p>
                                            <template  v-if="son.CareOfRemarks">
                                                <div class="_zhuan_msg" v-for="(z,zIndex) in JSON.parse(son.CareOfRemarks)">
                                                    <p><span>由</span>{{z.BeFrom}}<span><i class="_color_green">转交</i>给</span>{{z.Target}}</p>
                                                    <p class="_pp_info">转交备注：{{z.Remarks?z.Remarks:'无'}}</p>
                                                </div>
                                            </template>                                    
                                            <div class="_pp_info" v-if="item.Status!=1">
                                                <p>{{son.Remark!=''?son.Remark:'无'}}</p>
                                                <div class="_info_img" v-if="son.ImageList!=null&&item.Status!=1" >
                                                    <ul class="clearfix" v-if="son.ImageList.length&&son.ImageList.length>=1">
                                                        <li v-for="(img,imgI) in son.ImageList">
                                                            <img v-if="!img" src="../../../assets/img/Travelslider.png" alt="">
                                                            <img v-else :src="img" alt="">
                                                            <div class="_see_img" @click="showImg(son)">
                                                                <i class="iconfont icon-sousuo"></i>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div v-if="son.SignImage!=''">
                                                <img style="height: 82px;width: 143px;margin-top:10px;border: 1px solid #eee" :src="son.SignImage">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="_right_content" v-else>
                                    <div class="_more" v-for="(son,sindex) in item.AuditRecordList">
                                    <p class="_name">
                                        <span class="_n">{{son.AuditName}}<span class="_sm">{{item.AuditDescription}}</span></span>
                                        <span class="_time _time_n" style="marginLeft:6px" v-if="item.NextStep!=1">{{son.AduitDate}}</span>
                                    </p>
                                        <div class="_right_content">
                                            <div class="_pp_info" v-if="item.NextStep!=1 && item.SpecialNode!=2">
                                                <p>{{son.Remark==''?'无':son.Remark}}</p>
                                                <div class="_info_img" v-if="son.ImageList!=null" >
                                                    <ul class="clearfix"  v-if="son.ImageList.length&&son.ImageList.length>=1">
                                                        <li v-for="(img,imgI) in son.ImageList">
                                                            <img v-if="!img" src="../../../assets/img/Travelslider.png" alt="">
                                                            <img v-else :src="img" alt="">
                                                            <div class="_see_img" @click="showImg(son)">
                                                                <i class="iconfont icon-sousuo"></i>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- beizhu -->
                                <textarea v-if="item.NextStep==1 && compType=='shenpi' && item.SpecialNode!=2" class="_textareaNew" v-model="addMsg.AuditDescription" placeholder="请输入..."></textarea>
                                <!-- 签名(当前审核人是否需要签名) -->
                                <div v-if="GetDetail.Is_CanAudit==1 && item.NextStep==1 && item.SpecialNode!=0 && compType=='shenpi'" style="margin:10px 0;padding:10px 0 0 0">
                                    <p>
                                        <span @click="signState=true" class="signSpan f12">签名</span>
                                    </p>
                                    <div v-show="addMsg.SignImage!=''">
                                        <img style="height: 82px;width: 143px;margin-top:10px;border:1px solid rgb(238, 238, 238)" :src="addMsg.SignImage">
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div v-if="GetDetail.Is_CanAudit==1 && compType=='shenpi' && !needSign" class="_upload_box basefix" style="margin-bottom:20px;padding-left:75px">
                            <ul class="clearfix">
                                <li v-for="(img,imgIndex) in uploadImgList" :key="imgIndex">
                                    <img :src="img" alt="">
                                    <div class="_delete_img" @click="deleteImg(imgIndex)">
                                        <i style="color:#FFA475" class="iconfont icon-shanchu"></i>
                                    </div>
                                </li>
                                <li v-if="uploadImgList.length<10">
                                    <el-upload
                                    action=""
                                    class="avatar-uploader"
                                    :http-request="uploadFileBtn"
                                    :show-file-list="false"
                                    :multiple="true"
                                    :limit="10">
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                    <span class="_upload_tips f12">最多可上传10张图片</span>
                                </el-upload>
                                </li>
                            </ul>
                        </div>
                        <div class="_pb_son" :class="GetDetail.AuditStatus==1?'_none_after':''" v-if="GetDetail.AuditStatus==1">
                            <div class="_left_radius" >结束</div>
                            <div class="_right_content">
                                <p class="_time">累计耗时：{{endDate}}</p>
                            </div>
                        </div>
                        <div v-if="GetDetail.Is_CanAudit==1 && compType=='shenpi'" class="button" style="padding-left:15px;margin-top:20px">
                            <span v-if="needSign" @click="approvalOrder(1)" class="tongguo" >保存</span>
                            <div v-if="!needSign" style="display:inline-block">
                                <span @click="approvalOrder(1)" class="tongguo" >通过</span>
                                <span  @click="approvalOrder(2)" class="bohui" >驳回</span>
                            </div>
                            
                        </div>
                        <!-- 申请人审批 -->

                    </div>
                </div>
                
            </div>
            <!-- 签名 -->
            <div class="Sign" :class="signState?'zindex':''">
                <div class="signature">
                    <p class="f14" style="padding:10px 10px 10px 0">签名
                        <span @click="CloseSign" style="float:right" class="el-icon-close"></span>
                    </p>
                    <div class="signatureBox">
                        <div class="canvasBox" ref="canvasHW">
                            <canvas ref="canvasF" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
                            <div class="button" style="text-align:center;margin-top:20px">
                                <span @click="commit" class="bohui" >提交</span>
                                <span @click="overwrite" class="tongguo" >重写</span>
                                
                            </div>   
                        </div>
                    </div>
                    
                </div>   
            </div>
            <el-dialog title="详情" :visible.sync="CheckDetailState" width="1200px">
                <CheckDetails ref="mychild"></CheckDetails>
            </el-dialog>
            <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
            <img v-for="src in images" :src="src" :key="src">
            </viewer>
        </div>
    </div>
  </div>
</template>

<script>
import CheckDetails from "./CheckDetails.vue";
import {getAuditChangeLogPageList,auditOrRefund,getPropertyAuditDetail,UploadSelfFileT} from "../../../api/administration/AssetsShenpi"
import {url_jump_zc,ViittoFileUrl} from "../../../utils/url"
export default {
  name: 'approvalDetails',
  components: {
      CheckDetails
    },
    data(){
      return{
        images:[],
        imageOptions:{
            navbar:false,
            title:false
        },
        pageLoad:false,
        danjuList:[],
        tableData:[],
        GetDetail:{
            AuditSteps:[],
            DetailList:[],
        },
        IsBoHui:false,
        uploadImgList:[],
        addMsg:{
            AuditDescription:'',
            ImageList:[],
            UseReceiveId:115,
            AuditType:'',
            SignImage:'',
        },
        compType:'',
        backto:'',
        showTable:'',
        danjuMsg:{
            pageIndex:1,
            pageSize:20,
            ResourceId:'',
            Type:1,
        },

        imgSrc:'',
        stageInfo:'',
        imgUrl:'',
        client: {},
        points: [],
        canvasTxt: null,
        startX: 0,
        startY: 0,
        moveY: 0,
        moveX: 0,
        endY: 0,
        endX: 0,
        w: null,
        h: null,
        isDown: false,
        isViewAutograph: this.$route.query.isViews > 0,
        contractSuccess: this.$route.query.contractSuccess,
        signState:false,
        needSign:false,
        endDate:'',
        PropertyId:'',
        CheckDetailState:false,
      }
    },
    created(){
        if(this.$route.query.compType){
            this.compType=this.$route.query.compType;
        }
        this.backto=this.$route.query.backto?this.$route.query.backto:'';
        this.showTable=this.$route.query.showTable?this.$route.query.showTable:'';
        if(this.$route.query.Id){
            this.addMsg.UseReceiveId=this.$route.query.Id;
            this.danjuMsg.ResourceId=this.$route.query.Id;
        }
        this.getDetail();
        this.getdanjuList();
        
        
    },
    mounted(){
      let canvas = this.$refs.canvasF
      canvas.height = this.$refs.canvasHW.offsetHeight - 100
      canvas.width = this.$refs.canvasHW.offsetWidth - 10
      this.canvasTxt = canvas.getContext('2d')
      this.stageInfo = canvas.getBoundingClientRect()
    },
    
    methods:{
        GoZcUrl(){
            let url=url_jump_zc+"/#/Home";
            window.open(url)
        },
        inited (viewer){
            this.$viewer = viewer
        },
        showImg(obj, type){
            this.images=[];
            if(obj.ImageList && obj.ImageList.length>0){
                this.images=obj.ImageList;
            }
          this.$viewer.show()
        },
        getCheckDes(item){
            this.PropertyId=item.PropertyId;
            this.CheckDetailState=true;
            setTimeout(()=>{
                this.$refs.mychild.InitData(this.PropertyId);
            },10)
        },
        CloseSign(){
            this.signState=false;
        },
        // 签名
        //重写
        overwrite() {
            this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
            this.points = []
        },
        uuid(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [],
            i;
            radix = radix || chars.length;
            if (len) {
            // Compact form
            for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
            var r;
            uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
            uuid[14] = '4';
            for (i = 0; i < 36; i++) {
                if (!uuid[i]) {
                r = 0 | Math.random() * 16;
                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
            }
            }
            return uuid.join('');
        },
        dataURLtoFile(dataurl, filename) {//将base64转换为文件
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime});
        },
        //提交签名
        commit() {
            let that=this;
            let imgUrl =this.$refs.canvasF.toDataURL();
            let newArr = [];
            var fileName = `${that.uuid(10,10)}.png`;
            var path = `/assets/sign/`;
            newArr.push(this.dataURLtoFile(imgUrl,fileName))
            this.UploadSelfFileT(path, newArr, x => {
                this.addMsg.SignImage=ViittoFileUrl+x.data.FilePath;
            }, 1);
            
            this.signState=false;
        },
        mouseDown(ev) {
            ev = ev || event
            ev.preventDefault()
            if (1) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.startX = obj.x
            this.startY = obj.y
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            this.isDown = true
            }
        },
        mouseMove(ev) {
            ev = ev || event
            ev.preventDefault()
            if (this.isDown) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.moveY = obj.y
            this.moveX = obj.x
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.startY = obj.y
            this.startX = obj.x
            this.points.push(obj)
            }
        },
        mouseUp(ev) {
            ev = ev || event
            ev.preventDefault()
            if (1) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            this.points.push({x: -1, y: -1})
            this.isDown = false
            }
        },
        //mobile
        touchStart(ev) {
            ev = ev || event
            ev.preventDefault()
            if (ev.touches.length == 1) {
            let obj = {
                x: ev.targetTouches[0].clienX,
                y: ev.targetTouches[0].clientY,
            }
            this.startX = obj.x
            this.startY = obj.y
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            }
        },
        touchMove(ev) {
            ev = ev || event
            ev.preventDefault()
            if (ev.touches.length == 1) {
            let obj = {
                x: ev.targetTouches[0].clientX - this.stageInfo.left,
                y: ev.targetTouches[0].clientY - this.stageInfo.top
            }
            this.moveY = obj.y
            this.moveX = obj.x
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.startY = obj.y
            this.startX = obj.x
            this.points.push(obj)
            }
        },
        touchEnd(ev) {
            ev = ev || event
            ev.preventDefault()
            if (ev.touches.length == 1) {
            let obj = {
                x: ev.targetTouches[0].clientX - this.stageInfo.left,
                y: ev.targetTouches[0].clientY - this.stageInfo.top
            }
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            }
        },
        //   签名结束
        backTo(){
            if(this.showTable!=''){
                this.$router.push({
                    path: "/" + this.backto,
                    query:{
                        showTable:this.showTable
                    }
                });
            }else{
               this.$router.push({
                    path: "/" + this.backto
                }); 
            }
            
        },
        getdanjuList(){
            // this.apiJavaPostZc("/api/property/GetAuditChangeLogPageList",this.danjuMsg,
            //     res => {
            //     if (res.data.resultCode === 1) {
            //         let data=res.data.data.pageData;
            //         data.forEach(x=>{
            //             x.UpdateDate = this.$commonUtils.formatMsgTime(x.UpdateDate)
            //         })
            //         this.danjuList=data;

            //     } else {
            //         this.Error(res.data.message);
            //     }
            //     },
            //     null
            // );
           
            getAuditChangeLogPageList(this.danjuMsg).then((res)=>{
                    if (res.data.resultCode === 1) {
                    let data=res.data.data.pageData;
                    data.forEach(x=>{
                        x.UpdateDate = this.$commonUtils.formatMsgTime(x.UpdateDate)
                    })
                    this.danjuList=data;

                } else {
                    this.Error(res.data.message);
                }
            })
        },
        approvalOrder(num){
            if(this.GetDetail.Is_AuditSelf==1){
                this.Error("制单人跟审核人不能相同哟，请转交!");
                return;
            }
            if(this.needSign){
                if(this.addMsg.SignImage==""){
                    this.Error("请签名！");
                    return;
                }  
            }
            this.addMsg.AuditType=num;
            this.addMsg.ImageList=this.uploadImgList;
            auditOrRefund(this.addMsg).then((res)=>{
                if (res.data.resultCode ==1) {
                    this.getDetail();
                    this.Success(res.data.message);
                    this.addMsg={
                        AuditDescription:'',
                        ImageList:[],
                        UseReceiveId:'',
                        AuditType:'',
                        SignImage:'',
                    }
                    // this.reload();
                } else {
                    this.Error(res.data.message);
                }
            })

        },
        deleteImg(i){  // 删除
            this.uploadImgList.splice(i,1)
        },
        uploadFileBtn(file) { //上传
            if(file.file.size > 1024 * 1024 * 10) {
                this.$message.warning('文件大小不能超过10M！')
                return
            }
            //  1 文档  2 数据 3 图片
            let typeArr=[
                {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
                {stringArr:'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',type:1},
            ]
            let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
            let fileTypeNumber = 2;
            let typeOk  = false;
            typeArr.forEach(x=>{
                if(x.stringArr.indexOf(ft)!='-1')
                {
                  fileTypeNumber=x.type;
                  typeOk = true;
                }
            })
            if (!typeOk) return this.$message.error('请上传图片、word、excel类型的文件！');
            let newArr = [];
            newArr.push(file.file)
            let path = "/Upload/Temporary/"
            this.$message.info('上传中...')
            UploadSelfFileT(path, newArr, x => {
                let obj = ViittoFileUrl + x.data.FilePath
                this.uploadImgList.push(obj)
                this.$message.success('上传成功')
            }, 1);
        },
        getDetail(){
            this.pageLoad=true;
            // this.apiJavaPostZc("/api/property/GetPropertyAuditDetail",{UseReceiveId:this.addMsg.UseReceiveId},
            //     res => {
            //     this.pageLoad=false;

            //     if (res.data.resultCode === 1) {
            //         let data=res.data.data;
            //         this.GetDetail=res.data.data;
            //         if(data.AuditStatus==1){
            //             let len = data.AuditSteps.length - 1;
            //             let sLen = data.AuditSteps[len].AuditRecordList[data.AuditSteps[len].AuditRecordList.length-1];
            //             let begTime = data.AuditSteps[0].AuditRecordList[0].AduitDate;
            //             let enTime = sLen && sLen.AduitDate ? sLen.AduitDate : begTime;
            //             let newTime = this.$commonUtils.formatMsgTime2(begTime,enTime);
            //             this.endDate = newTime.replace("前","");
            //         }
            //         let list = [];
            //         for ( let i = 0; i < this.GetDetail.AuditSteps.length ; i++ ){
            //             list.push(this.GetDetail.AuditSteps[i]);
            //             if(this.GetDetail.AuditSteps[i].Status==4){
            //               this.IsBoHui = true;
            //               break;
            //             }
            //             if(this.GetDetail.AuditSteps[i].NextStep==1 && this.GetDetail.AuditSteps[i].SpecialNode==2){
            //               this.needSign = true;
            //               break;
            //             }
            //         }
                    
            //         this.GetDetail.FirstStr=this.GetDetail.SourceName.slice(0,1)
            //         this.GetDetail.AuditSteps = list;

            //     } else {
            //         this.Error(res.data.message);
            //     }
            //     },
            //     null
            // );
            getPropertyAuditDetail({UseReceiveId:this.addMsg.UseReceiveId}).then((res)=>{
                 this.pageLoad=false;
                if (res.data.resultCode === 1) {
                    let data=res.data.data;
                    this.GetDetail=res.data.data;
                    if(data.AuditStatus==1){
                        let len = data.AuditSteps.length - 1;
                        let sLen = data.AuditSteps[len].AuditRecordList[data.AuditSteps[len].AuditRecordList.length-1];
                        let begTime = data.AuditSteps[0].AuditRecordList[0].AduitDate;
                        let enTime = sLen && sLen.AduitDate ? sLen.AduitDate : begTime;
                        let newTime = this.$commonUtils.formatMsgTime2(begTime,enTime);
                        this.endDate = newTime.replace("前","");
                    }
                    let list = [];
                    for ( let i = 0; i < this.GetDetail.AuditSteps.length ; i++ ){
                        list.push(this.GetDetail.AuditSteps[i]);
                        if(this.GetDetail.AuditSteps[i].Status==4){
                          this.IsBoHui = true;
                          break;
                        }
                        if(this.GetDetail.AuditSteps[i].NextStep==1 && this.GetDetail.AuditSteps[i].SpecialNode==2){
                          this.needSign = true;
                          break;
                        }
                    }
                    
                    this.GetDetail.FirstStr=this.GetDetail.SourceName.slice(0,1)
                    this.GetDetail.AuditSteps = list;
                } else {
                    this.Error(res.data.message);
                }
            })
        },
      
    },
}
</script>

<style>
.approvalDetails .backTo{
    width:80px;
    height:34px;
    line-height:34px;
    background:rgba(0,210,214,1);
    border-radius:17px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-family: "宋体";
    display: inline-block;
    margin-left:15px;
    cursor: pointer;
}
.detailsIT_Journal p{
    margin:0;
}
li{
    list-style: none;
}
.detailsIT_Journal .changLogList_l {
    border-left: 1px solid #E9E9E9;
    position: relative;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;
}
.detailsIT_Journal ._radius_green {
    background-color: #47BF8C;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: -4px;
    top: 19px;
}
/* myTable */
.approvalDetails .zcmyTable{
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    font-family: "宋体"!important;
}
.approvalDetails .zcmyTable thead th{
    color:#A6C6C6;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    font-weight:bold;
    text-align: left;
}
.approvalDetails .zcmyTable thead tr{
    background:transparent!important;

}
.approvalDetails .zcmyTable .hoverSpan1{
    left: -20px;
}
.approvalDetails .zcmyTable .hoverSpan2{
    right: -20px;
}
.approvalDetails .zcmyTable .commonStyle{
    height:100%;
    background:#fff;
    position: absolute;
    width: 20px;
    top:0;
    display: none;
}

.approvalDetails .zcmyTable tr{
    background:#fff;
    border-bottom: 4px solid #F8FAFB;
    cursor: pointer;
}
.approvalDetails .noHoverTable tr{
    border-bottom:none!important;
}
.approvalDetails .zcmyTable .trNobottom{
    border-top:  4px solid #F8FAFB!important;
    border-bottom:none!important;
}
.approvalDetails .zcmyTable tbody tr:hover{
    box-shadow:0px 0 20px 0px rgba(176,176,176,0.2);
    transition: transform .5s ease;  
    /* transform: scaleX(1.02); */
}
.approvalDetails .noHoverTable tbody tr:hover{
    box-shadow:0 0 0 transparent!important;
}
.approvalDetails .zcmyTable tbody tr:hover .commonStyle{
    display: block;
    transition: transform .5s ease;  
    box-shadow:0px 0px 0px 0px rgba(176,176,176,0.2);

}
.approvalDetails .zcmyTable tbody tr:hover td{
    border-radius:0!important;
}
.approvalDetails .zcmyTable tbody tr:first-child td:first-child{
    border-radius:20px 0 0 0;
}
.approvalDetails .zcmyTable tbody tr:first-child td:last-child{
    border-radius:0 20px 0 0;
}
.approvalDetails .zcmyTable tbody tr:last-child td:first-child{
    border-radius:0 0 0 20px;
}
.approvalDetails .zcmyTable tbody tr:last-child td:last-child{
    border-radius:0 0 20px 0;
}
.approvalDetails .zcmyTable tr td{
    position: relative;
    padding:11px 0 11px 20px;
}
 .approvalDetails .f14{
    font-size:14px;
    margin: 0;
}
 .approvalDetails .basefix:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    overflow: hidden;
}
 .approvalDetails li{
     list-style: none;
 }
 .approvalDetails .viewer{display: none !important;}
 .approvalDetails ._pp_info ._info_img li:hover ._see_img{
     opacity: 1;
 }
.approvalDetails ._pp_info ._see_img .icon-sousuo{
    color:#fff!important;
}
.approvalDetails ._pp_info ._see_img{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 120px;
    text-align: center;
    background-color: rgba(2, 2, 2, 0.4);
    display: inherit;
    opacity: 0;
    left:0;
    -webkit-transition: all linear .4s;
    transition: all linear .4s;
    
}
 .approvalDetails ._pp_info ._info_img li img{
     width: 100%;
     height: 100%;
 }
 .approvalDetails ._pp_info ._info_img li{
     display: inline-block;
     width:120px;
     height:120px;
     overflow:hidden;
     position: relative;
     cursor: pointer;
 }
 .approvalDetails ._pp_info ._info_img{
     margin-top:10px;
     
 }
.approvalDetails ._pb_son:last-child::after{
    display: none;
}
.approvalDetails .signSpan{
    display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    border-radius: 22px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    font-family: "宋体";
    background: #FFA475;
    color: #fff;
}
.approvalDetails{
    position: relative;
    background: #fff;
    
}
.approvalDetails .zindex{
    z-index: 9999!important;
    opacity: 1!important;
}
.approvalDetails .signature{
    width:600px;
    background: #fff;
    padding:15px;
    border-radius: 20px;
    cursor: pointer;
}
.approvalDetails .Sign{
    position: fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: rgba(0,0,0,.4);
    z-index: -500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.approvalDetails .Sign .signatureBox {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    margin-top:20px;
    padding:0 20px;
    box-sizing: border-box;
  }
.Sign .canvasBox {
    box-sizing: border-box;
    flex: 1;
  }
.approvalDetails .Sign canvas {
    border: 1px solid #7d7d7d;
  }
.approvalDetails .Sign .btnBox {
    padding: 10px;
    text-align: center;
  }
.approvalDetails .Sign .btnBox button:first-of-type {
    background: transparent;
    border-radius: 4px;
    height: 40px;
    width: 80px;
    font-size: 14px;
  }
.approvalDetails .Sign .btnBox button:last-of-type {
    background: #71b900;
    color: #fff;
    border-radius: 4px;
    height: 40px;
    width: 80px;
    font-size: 14px;
  }
.approvalDetails ._textareaNew{
    width: 80%;
    height: 50px;
    background-color: white;
    border-radius: 4px;
    border: 1px solid #E5E5E5;
    font-size: 12px;
    color: #333333;
    padding: 12px 14px;
    margin-top: 13px;
    position: relative;
}
.approvalDetails ._upload_tips{font-size: 12px;position: absolute;top: 71%;width: 100%;left: 0;text-align: center;color: #949494;}

.approvalDetails ._pb_son._none_after::after{content: '';display: none}
.approvalDetails .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 143px;
    height: 82px;
    line-height: 82px;
    text-align: center;
}
.approvalDetails .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.approvalDetails ._delete_img{position: absolute;top: 0px;height:82px;width:143px;line-height: 34px;text-align: center;background-color: rgba(2, 2, 2, 0.6);display: inherit;opacity: 0;transition: all linear .5s}
.approvalDetails ._delete_img i.iconfont{display: inline-block;width: 32px;height: 32px;border-radius: 50%;color: #E95252 !important;background-color:rgba(251, 251, 251, 0.9);   margin-top: 26px;}
.approvalDetails ._upload_box ul li{float: left;height:82px;width:143px;padding:0px 20px 20px 0;text-align: center;position: relative;cursor: pointer;margin-right: 10px;}
.approvalDetails ._upload_box ul li img{height:82px;width:143px;}
.approvalDetails ._upload_box ul li:hover ._delete_img{opacity: 1;}
.approvalDetails .button span{
    display: inline-block;
    width:120px;
    height:40px;
    line-height:40px;
    border-radius:22px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    font-family: "宋体";
    margin-right: 20px;
}
.approvalDetails .tongguo{
    background:rgba(0,210,214,1);
    color:#fff;

}
.approvalDetails .bohui{
    border:1px solid rgba(0,210,214,1);
    color:rgba(0,210,214,1);
}
.approvalDetails ._zhuan_msg{
    font-size: 12px;
    margin-top:10px;
    padding-bottom: 10px;
}
.approvalDetails ._zhuan_msg span{
    display: inline-block;
    margin-right: 5px;
    color: #696969;
}
.approvalDetails ._zhuan_msg span:last-child{
    margin-left: 5px;
}
.approvalDetails ._zhuan_msg p:nth-child(2){
        color: #696969;
}
.approvalDetails ._zhuan_msg ._color_green{
        color: #00D2D6
}
.approvalDetails ._right_content ._name ._n{font-size: 14px;color: #333333;font-weight: bold;}
.approvalDetails ._right_content ._name ._m{color: #FFFFFF;font-size: 12px;display: inline-block;padding: 2px 5px;background-color: #E95252;margin-left: 5px;border-radius: 4px;}
.approvalDetails ._right_content ._name ._sm{color: #FFFFFF;font-size: 12px;display: inline-block;padding: 2px 5px;background-color: #FF9600;margin-left: 5px;border-radius: 4px;font-weight: 100;}
.approvalDetails ._right_content ._name ._sn{color: #FFFFFF;font-size: 12px;display: inline-block;padding: 2px 5px;background-color: #00D2D6;margin-left: 5px;border-radius: 4px;}
.approvalDetails ._right_content ._time,.approvalDetails ._time{font-size: 12px;color: #666666;padding-top: 5px;}
.approvalDetails ._right_content ._pp_info,.approvalDetails ._textarea{border-radius: 10px; background:rgba(245,245,245,1);font-size: 12px;color: #333333;padding: 12px 14px;margin-top: 13px;position: relative;width:80%}
.approvalDetails ._right_content ._pp_info:before{display:block;content:'';border-width:8px 8px 8px 8px;border-style:solid;border-color: transparent transparent rgba(245,245,245,1) transparent;position:absolute;left:10px;top:-16px;}
.approvalDetails ._mgt_15{margin-top: 15px;}
.approvalDetails ._more ._right_content .iconfont{color: #AAAAAA}
.approvalDetails ._more ._right_content ._name ._n{font-size: 14px;color: #333333;font-weight: bold;padding-left: 3px;}
.approvalDetails ._pb_son{position: relative;padding-left: 75px;min-height: 100px;padding-bottom: 10px;border-top:1px solid #fff}
.approvalDetails ._left_radius{z-index:1;width: 40px;height: 40px;border-radius: 50%;text-align: center;line-height: 40px;background-color: #00D2D6;color: white;font-size: 12px;position: absolute;left: 15px;}
.approvalDetails ._left_radius_err{background-color: #E95252 !important;}
.approvalDetails ._left_radius_sus{background-color: #FFA475 !important;}
.approvalDetails ._pb_son::after{content: '';width: 4px;height: 100%;background-color: #00D2D6;display: inline-block;position: absolute;clear: both;left: 33px;top: 0;}
.approvalDetails ._pb_son._none_after::after{content: '';display: none}
.approvalDetails ._pb_son._bohui_after::after{background-color: #E95252 !important;display: inline-block}
.approvalDetails ._process_box{padding-top: 30px;padding-bottom: 40px;}
.approvalDetails ._process{margin-top: 20px}
.approvalDetails .rightDiv .FirstName{
    width:40px;
    height:40px;
    line-height:40px;
    background:rgba(40,202,204,0.3);
    color:#28CACC;
    border-radius:50%;
    text-align: center;
    display: inline-block;
    font-size: 18px;
}
.approvalDetails .stepItem .rightDiv{
    width: 100%;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 5px 0px rgba(176,176,176,0.1);
    border-radius:10px;
}
.approvalDetails .stepItem ._left_radius{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 0;
    z-index: 2;
}
.approvalDetails .stepItem{
    position: relative;
    padding-left: 75px;
    min-height: 100px;
    padding-bottom: 30px;
}
.approvalDetails .rizhi{
    font-size:12px;
    font-family:"宋体";
    font-weight:400;
    text-decoration:underline;
    color:rgba(166,198,198,1);
    position: absolute;
    right: 0;
    cursor: pointer;
}
.approvalDetails .allStep li .line{
    width:57px;
    display: inline-block;
    border-bottom: 1px dashed #FFA475;
    margin:0 10px;
    position: relative;
    top: -7px;
}
.approvalDetails .allStep li{
    display: inline-block;
    font-size: 12px;
    font-family: "宋体";
}
.approvalDetails .allStep .circle img{
    width: 100%;
    height: 100%;
}
.approvalDetails .allStep .circle .circleSpan{
    display: inline-block;
    width:16px;
    height:16px;
    background:rgba(232,232,232,1);
    border-radius:50%;
}
.approvalDetails .allStep .circle{
    display: inline-block;
    width:16px;
    height:16px;
    border-radius:50%;
}
.approvalDetails .zcInfo .el-col {
    font-size: 12px;
    margin-top: 20px;
    color:#111111;
}
.approvalDetails .zcInfo .el-col span:nth-child(1){
    color:#999999;
    display: inline-block;
    width: 85px;
}
.HeaderDiv{
    height: 55px;
    display: flex;
    align-items: center;
}

.approvalDetails .HeaderDiv .underline{
    display: block;
    width:135px;
    height:2px;
    position: absolute;
    bottom: 0;
    background: #00D2D6;
    
}
.titleSpanBox{
    height: 100%;
    display: flex;
    align-items: center;
}
.approvalDetails .titleSpan{
    margin-right: 10px;
}
.approvalDetails .titleSpan span{
    display: inline-block;
    width:44px;
    height:44px;
    line-height:44px;
    background:rgba(40,202,204,0.3);
    border-radius:50%;
    font-size: 20px;
    color: #28CACC;
    text-align: center;
}
.approvalDetails .StateCol span{
    width:60px;
    height:26px;
    line-height:26px;
    border-radius:8px;
    display: inline-block;
    color:#fff;
    text-align: center;
    font-size: 12px;
    font-family: "宋体";
}
.approvalDetails .StateCol .spz{
    background:rgba(114,184,255,1);
}  
.approvalDetails .StateCol .ytg{
    background:#00D2D6;
}   
.approvalDetails .StateCol .wtg{
    background:#FFA475;
}    
</style>
