<template>
    <div class="approvalDetails padContent" v-loading="pageLoad" style="padding: 20px;">
      <div style="border-bottom:1px solid #E2E4EB;padding-bottom:10px">
          <span class="pageTitle" style="float:inherit;color: #111111;font-size: 30px;">耗材入库单详情</span>
          <!-- <span @click="backTo" class="backTo" style="">返回</span> -->
          <span @click="GoZcUrl" style="font-size:12px;text-decoration:underline;cursor: pointer;float:right">跳转到资产管理</span>      

      </div>
      <div style="margin-top:30px;background:rgba(255,255,255,1);border-radius:10px;padding:20px;position:relative;">
        <el-row class="HeaderDiv" style="border-bottom:1px solid #E2E4EB;padding-bottom:20px">
          <span class="underline"></span>
          <el-col :span="12" style="position:relative;padding-left:50px">
                  <span class="titleSpan">
                      <span>{{GetDetail.FirstStr}}</span>
                  </span>
            <p class="c11 f14" style="padding-top:12px">{{GetDetail.TemplateName}}</p>
          </el-col>
          <el-col class="StateCol" :span="12" style="text-align:right;padding-top:15px">
            <span v-if="GetDetail.StockInState==1" class="spz">{{GetDetail.StockInStateStr}}</span>
            <span v-if="GetDetail.StockInState==2 || GetDetail.StockInState==4" class="ytg">{{GetDetail.StockInStateStr}}</span>
            <span v-if="GetDetail.StockInState==3 || GetDetail.StockInState==5" class="wtg">{{GetDetail.StockInStateStr}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-row class="zcInfo">
              <el-col :span="12">
                <span>编号 :</span>
                <span>{{GetDetail.StockInNum}}</span>
              </el-col>
              <el-col :span="12">
                <span>供应商 :</span>
                <span>{{ GetDetail.SupplierName }}</span>
              </el-col>
              <el-col :span="12">
                <span>仓库名称 :</span>
                <span>{{GetDetail.WareHouseName}}</span>
                <!-- <span v-if="prohibit==true && compType=='shenpi'" style="color: #FF4048">(此仓库正在盘点)</span> -->
              </el-col>
              <el-col :span="12">
                <span>金额:</span>
                <span>￥{{GetDetail.Money}}</span>
              </el-col>
              <el-col :span="12" v-if="GetDetail.FinanceId!=null&& GetDetail.FinanceId!=''">
                <span>采购单据:</span>
                <span>{{GetDetail.FinanceId}}</span>
              </el-col>
  
              <el-col :span="24">
                <span>入库时间 :</span>
                <span>{{GetDetail.StockInDate}}</span>
              </el-col>
              <el-col :span="12">
                  <div style="display: flex;align-items: flex-start;">
                      <span style="width: 85px;">入库备注 :</span>
                      <pre  style="margin: 0;" v-html="GetDetail.AuditRemark"></pre>
                  </div>
                  
                </el-col>
                <el-col :span="24">
                  <span>入库凭证 :</span>
                  <div class="_addUpload_box">
                      <template v-for="(file,fIndex) in GetDetail.VoucherList">
                          
                          <div v-if="file.Type==1" >
                              <div style="width:100%;height:100%;overflow: hidden;">
                              <el-image  :src="file.Url?file.Url:''" @click="showUpLoadFile(file)" :preview-src-list="[file.Url]"></el-image>
                              </div>
                          </div>
                          <div v-if="file.Type==2">
                              <div class="iconfont "
                              :class="file.Url.substring(file.Url.lastIndexOf('.')+1,file.Url.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
                              @click="showUpLoadFile(file)">
                              </div>
                          </div>
                       
                      </template>
                  </div>
                
                </el-col>
    
    
  
  
            </el-row>
          </el-col>
          <!--图片 -->
          <el-col v-if="GetDetail.ImageList && GetDetail.ImageList.length>0" :span="6" style="padding-top:20px">
            <el-carousel height="150px" trigger="click" :interval="20000">
              <el-carousel-item style="text-align:center;line-height:150px" v-for="item in GetDetail.ImageList" :key="item">
                <img @click="showImg(GetDetail)" style="max-width:100%;max-height:100%" :src="item" alt="">
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
  
  
        <p class="f12 c11" style="margin-top:25px">物料清单</p>
        <table style="margin-top:10px" class="myTable noHoverTable" border="0" cellspacing="0" cellpadding="0">
          <thead>
          <!-- <th>耗材编码</th> -->
          <th>耗材名称</th>
          <!-- <th>规格</th> -->
          <th>分类名称</th>
          <th>品牌名称</th>
          <th>单价</th>
          <th>金额</th>
          <th>数量</th>
          </thead>
          <tbody>
          <tr :class="index!=0?'trNobottom':''" v-for="(item,index) in GetDetail.DetailList" :key="index">
            <!-- <td><span @click="getCheckDes(item)" style="text-decoration: underline;cursor: pointer;">{{item.SuppliesNum}}</span></td> -->
            <td>{{item.SuppliesName}}</td>
            <!-- <td>
              <span v-for="(x,y) in item.GoodsSpecificationList" :key="y">{{x}}{{y+1==item.GoodsSpecificationList.length?'':'，'}}</span>
            </td> -->
            <td>{{item.CategoryName}}</td>
            <td>{{item.BrandName}}</td>
  
            <td>{{item.UnitPrice}}</td>
            <td>{{item.Money}}</td>
            <td>{{item.Number}}</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:#089bab">{{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" v-if="danjuList.length>0">
                              <li class="changLogList_l" v-for="(log,li) in danjuList" :key="li" style="list-style:none;">
                                  <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" 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" style="margin-bottom:20px;padding-left:75px">
                      <ul class="clearfix" style="padding: 0;margin: 0;">
                          <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>
    
      <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
      </viewer>
    
  
    </div>
  </template>
  
  <script>
import {getAuditChangeLogPageList,suppliesStockInAuditOrRefund,getSuppliesStockInAuditDetail} from "../../../api/administration/AssetsShenpi"
import {
        UploadSelfFile
    } from '../../../api/common/common'
    import {url_jump_zc,ViittoFileUrl} from "../../../utils/url"
  export default {
    name: 'PurchaseRequisitionDetail',
    components: {
      },
      data(){
        return{
          images:[],
          imageOptions:{
              navbar:false,
              title:false
          },
          pageLoad:false,
          danjuList:[],
          tableData:[],
          GetDetail:{
              AuditSteps:[],
              DetailList:[],
              ImageList:[],
          },
          IsBoHui:false,
          uploadImgList:[],
          addMsg:{
              AuditDescription:'',
              ImageList:[],
              UseReceiveId:'',
              AuditType:'',
              SignImage:'',
          },
          compType:'',
          backto:'',
          showTable:'',
          danjuMsg:{
              pageIndex:1,
              pageSize:20,
              ResourceId:'',
              Type:4,
          },
  
          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,
          ManagersMsg:{
              BuyingRequisitionId:0,//采购单id
              ManagersId:0,//经办人id
          },
          EmployeeList:[],
          Managers_rules:{
            ManagersId: [
              { required: true, message: '请选择经办人', trigger: 'change' }
            ],
          }
        }
      },
      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:'';
          this.$root.$emit("goworkobj")//清楚左边的菜单

          if(this.$route.query.Id){
              this.addMsg.UseReceiveId=this.$route.query.Id;
              this.danjuMsg.ResourceId=this.$route.query.Id;
              this.ManagersMsg.BuyingRequisitionId=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:{
          inited (viewer){
              this.$viewer = viewer
          },
          showImg(obj, type){
              this.images=[];
              if(obj.ImageList && obj.ImageList.length>0){
                  this.images=obj.ImageList;
              }
            this.$viewer.show()
          },
      
          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))
              UploadSelfFile('Temporary', this.dataURLtoFile(imgUrl,fileName), x => {
                    if(x.Code==1){
                        this.addMsg.SignImage = x.FileUrl
                    }
              }, 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(){
              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;
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              
              suppliesStockInAuditOrRefund(this.addMsg).then((res)=>{
                    loading.close();
                    if (res.data.resultCode === 1) {
                        this.getDetail();
                        this.Success(res.data.message);
                        this.addMsg={
                            AuditDescription:'',
                            ImageList:[],
                            UseReceiveId:this.$route.query.Id,
                            AuditType:'',
                            SignImage:'',
                        }

                    } 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('上传中...')
              UploadSelfFile('Temporary', file.file, x => {
                if(x.Code==1){
                    let obj = x.FileUrl
                    this.uploadImgList.push(obj)
                    this.$message.success('上传成功')
                }
              }, 1);
          },
          getDetail(){
              this.pageLoad=true;
                getSuppliesStockInAuditDetail({StockInId: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;
                        this.ManagersMsg.ManagersId=data.ManagersId
                        this.GetDetail.FirstStr=this.GetDetail.TemplateName.slice(0,1)
                    } else {
                        this.Error(res.data.message);
                    }
                })
          },
          showUpLoadFile(i) { // 预览上传文件
              
              if (i.Type == 1) {
                  //   this.picObj.push(i.Url);
                  //   this.picIsShow = true;
                  } else {
                  if (i.Url.substring(i.Url.lastIndexOf('.') + 1, i.Url.length).toUpperCase() == 'PDF') {
                      window.open(i.Url);
                  } else {
                      // window.open("https://view.officeapps.live.com/op/view.aspx?src=" + i.Url)
                      window.open( i.Url)
                  }
              }
          },
          GoZcUrl(){
                let url=url_jump_zc+"/#/receiptApproval";
                window.open(url)
            },
        
      },
  }
  </script>
  
  <style>
    @import "./css/common.css";

   .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: "Microsoft YaHei";
      background: #FFA475;
      color: #fff;
  }
  .approvalDetails{
      position: relative;
  }
  .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  ul li{list-style: none;}

  .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: "Microsoft YaHei";
      margin-right: 20px;
  }
  .tongguo{
      background:rgba(0,210,214,1);
      color:#fff;
  
  }
  .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: #089bab
  }
  .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: #089bab;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}
  .approvalDetails ._left_radius{z-index:1;width: 40px;height: 40px;border-radius: 50%;text-align: center;line-height: 40px;background-color: #089bab;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: #089bab;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:#089bab;
      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:"Microsoft YaHei";
      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: "Microsoft YaHei";
  }
  .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;
  }
  .approvalDetails .HeaderDiv .underline{
      display: block;
      width:135px;
      height:2px;
      position: absolute;
      bottom: 0;
      background: #089bab;
  }
  .approvalDetails .titleSpan{
      position: absolute;
      left: 0;
  }
  .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: #089bab;
      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: "Microsoft YaHei";
  }
  .approvalDetails .StateCol .spz{
      background:rgba(114,184,255,1);
  }  
  .approvalDetails .StateCol .ytg{
      background:#089bab;
  }   
  .approvalDetails .StateCol .wtg{
      background:#FFA475;
  }
  .imgBox{
      display: flex;
  }
  .imgItem{
      min-width: 150px;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 10px;
  }
  ._addUpload_box {
      display: block;
      margin-top: 15px;
    }
  
     ._addUpload_box img {
      width: 100%;
    }
  
     ._addUpload_box>div {
      float: left;
      width: 138px;
      height: 92px;
      border: 1px dashed rgba(210, 210, 210, 1);
      border-radius: 2px;
      cursor: pointer;
      margin-bottom: 10px;
      padding: 5px;
      margin-right: 10px;
      position: relative;
    }
  
     ._addUpload_box .icon-excel,
     ._addUpload_box .icon-pdf {
      text-align: center;
      font-size: 38px;
      color: green;
      line-height: 75px;
    }
  </style>
  