<template>
<div class="desc-container" style="width: 100%;padding-right:8px;overflow:auto;">
  <!-- <el-divider content-position="left">案件办理进度</el-divider> -->
  <div style="position:relative;">
     <el-steps :space="200"  simple finish-status="success" align-center style="width:100%;font-size:14px;margin-bottom:12px;">
      <el-step v-for="(item,index) in flowLog"  :key="index" :title="item.name"  @click.native="changeSpeed(index+1,item)" :status="item.state"></el-step>
      <!-- <el-step title="案件核查"></el-step>
      <el-step title="案件办理" ></el-step>
      <el-step title="案件审核" ></el-step>
      <el-step title="案件归档" ></el-step> -->
     </el-steps>
     <!-- <div style="padding:12px;border-bottom:1px solid #fff;margin-top:6px;text-indent:24px;min-height:50px;idth:100%;background:#f5f7fa;display:none;">
        <div >
          <p><i class="el-icon-bell" style="color:#409EFF"></i>&nbsp;&nbsp;&nbsp;{{caseDetail.createtime}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{caseDetail.createusername}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;上报了案件</p>
          <p><i class="el-icon-bell" style="color:#409EFF"></i>&nbsp;&nbsp;&nbsp;{{caseDetail.identification_time}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{caseDetail.identification_user}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;判读了案件</p>
          <p style="margin-top:8px;" v-for="(item,index) in caselog" :key="index"><i class="el-icon-bell" style="color:#409EFF"></i>&nbsp;&nbsp;&nbsp;{{item.createtime}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{item.createusername}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{item.description}}</p>
          <p><i class="el-icon-bell" style="color:#409EFF"></i>&nbsp;&nbsp;&nbsp;{{caseDetail.verifytime}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{caseDetail.verifyuser}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;审核通过了案件</p>
        </div>
     </div> -->
  </div>
  <el-row :gutter="24">
    <el-col :span="isShowMap ? 14 : 24" class="case-desc" style="height:610px;overflow:auto;">
      <el-divider content-position="left" v-if="speed == 1 || speed == 5" >【案件下发信息】</el-divider>
      <el-descriptions v-if="speed == 1 || speed == 5" class="margin-top" :column="3" border size="small">
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-collection-tag"></i>
            案件编号
          </template>
          {{caseDetail.case_no}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            上报人
          </template>
          {{caseDetail.createusername}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-time"></i>
            上报时间
          </template>
          {{caseDetail.createtime}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            判读人
          </template>
          {{caseDetail.identification_user}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-time"></i>
            判读时间
          </template>
          {{caseDetail.identification_time}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-menu"></i>
            案件状态
          </template>

          <el-tag size="small" v-if="caseDetail.handle_status_id == 0" type="warning">{{caseDetail.handle_status_name}}</el-tag>
          <el-tag size="small"  v-else-if="caseDetail.handle_status_id == 1">{{caseDetail.handle_status_name}}</el-tag>
          <el-tag size="small"  v-else type="success">{{caseDetail.handle_status_name}}</el-tag>
        </el-descriptions-item>


        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-position"></i>
            行政区划
          </template>
          /&nbsp;{{caseDetail.countyname}}&nbsp;/&nbsp;{{caseDetail.streetname}}&nbsp; / &nbsp;{{caseDetail.communityname}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-position"></i>
            案件地址
          </template>
          {{caseDetail.address}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-information"></i>
            经纬度
          </template>
          {{caseDetail.lng}},{{caseDetail.lat}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            案件面积
          </template>
          {{caseDetail.area}}&nbsp;(m²)
        </el-descriptions-item>
      

        
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            案件类型
          </template>
          {{caseDetail.typename}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-collection-tag"></i>
            案件备注
          </template>
          {{caseDetail.remark}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            案件描述
          </template>
          {{caseDetail.case_description}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            案结图片
          </template>
            <el-image 
              v-show="imageList.length>0"
              v-for="(item,index) in imageList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item" 
              fit="cover"
              :preview-src-list="imageList_a">
            </el-image>
        </el-descriptions-item>



      </el-descriptions>
      <el-divider content-position="left" v-if="speed == 2 || speed == 5">【案件核查信息】</el-divider>
      <el-descriptions v-if="speed == 2 || speed == 5" class="margin-top" :column="2" border size="small">
            <el-descriptions-item>
              <template slot="label">
              <div style="min-width:80px;height:10px;">
                  <i class="el-icon-user"></i>
                  核查人
              </div>
              </template>
              {{caseHandleInfo.info.createusername}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div style="min-width:80px;height:10px;">
                  <i class="el-icon-time"></i>
                  核查时间
                </div>
              </template>
              {{caseHandleInfo.info.createtime}}
            </el-descriptions-item>
          
            
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                处理进度
              </template>
              {{caseDetail.verifystatusname}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                是否违法
              </template>
              {{caseHandleInfo.is_illegal}}
            </el-descriptions-item>

            <el-descriptions-item v-if="caseHandleInfo.is_illegal == '是'">
              <template slot="label">
                <i class="el-icon-tickets"></i>
                处理措施
              </template>
              {{caseHandleInfo.info.measure_name}}
            </el-descriptions-item>

            <el-descriptions-item v-if="caseHandleInfo.is_illegal == '是' && caseHandleInfo.info.measure_name == '查处'">
              <template slot="label">
                <i class="el-icon-user"></i>
                立案号
              </template>
              {{caseHandleInfo.info.registr_number}}
            </el-descriptions-item>
            <el-descriptions-item v-if="caseHandleInfo.is_illegal == '是' && caseHandleInfo.info.measure_name == '查处'">
              <template slot="label">
                <i class="el-icon-tickets"></i>
                查处结果
              </template>
              {{caseHandleInfo.info.investigation_result}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                联系人
              </template>
              {{caseHandleInfo.info.contacts_people}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                联系人联系方式
              </template>
              {{caseHandleInfo.info.contacts_phone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                现场情况
              </template>
              {{caseHandleInfo.info.actual_scene_case}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  处理结果
                </template>
                {{caseHandleInfo.info.result_name}}
              </el-descriptions-item>

          
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    现场照片
                  </template>
                    <el-image 
                      v-show="threadImageList.length>0"
                      v-for="(item,index) in threadImageList"
                      :key="index"
                      style="width:85px;height:112px;margin-right:8px;"
                      :src="item.s_filePath" 
                      fit="cover"
                      :preview-src-list="[item.filePath]">
                    </el-image>
                </el-descriptions-item>

                <el-descriptions-item >
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    现场视频
                  </template>
                  <div v-if="playerOptions.length>0">
                    <video-player  class="video-player vjs-custom-skin"
                                v-for="(item,index) in playerOptions"
                                :key = "index"
                                ref="videoPlayer"
                                :playsinline="true"
                                :options="item"
                                style="width:400px;"
                    ></video-player>
                  </div>
                </el-descriptions-item>

                <!-- <el-descriptions-item v-if="caseHandleInfo.info.measure_name=='拟拆除' && caseHandleInfo.is_illegal == '是'">
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    处理后照片
                  </template>
                    <el-image 
                      v-show="threadAfterImageList.length>0"
                      v-for="(item,index) in threadAfterImageList"
                      :key="index"
                      style="width:85px;height:112px;margin-right:8px;"
                      :src="item" 
                      fit="cover"
                      :preview-src-list="threadAfterImageList_a">
                    </el-image>
                </el-descriptions-item> -->

      
      </el-descriptions>
      <el-divider content-position="left" v-if="(caseHandleInfo.is_illegal=='合法' && speed == 3) || caseHandleInfo.is_illegal=='合法' && speed == 5">【案件办理信息-合法举证】</el-divider>
      <el-descriptions class="margin-top" :column="2" border size="small" v-if="(caseHandleInfo.is_illegal=='合法' && speed == 3) ||(caseHandleInfo.is_illegal=='合法' && speed == 5)">
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              项目名称
            </div>
          </template>
          {{caseHandleInfo.info.result_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              联系人
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              联系电话
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact_phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              现场情况
            </div>
          </template>
          {{caseHandleInfo.info.actual_scene_case}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              实际用途
            </div>
          </template>
          {{caseHandleInfo.info.actual_use_to}}
          
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              建筑结构
            </div>
          </template>
          {{caseHandleInfo.info.build_structure}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              批准文件名称
            </div>
          </template>
          {{caseHandleInfo.info.evidence_file_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              批文有效日期
            </div>
          </template>
          {{caseHandleInfo.info.evidence_file_indate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              批准文件编号
            </div>
          </template>
          {{caseHandleInfo.info.evidence_file_number}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              合法举证材料
            </div>
          </template>
            <el-image 
              v-show="evidenceFileList.length>0"
              v-for="(item,index) in evidenceFileList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item.s_filePath" 
              fit="cover"
              :preview-src-list="[item.filePath]">
            </el-image>
            <!-- <p v-for="(item,index) in evidenceFileList" :key="index" style="margin-bottom:2px;font-size:12px;">
              <el-link type="primary" :underline="false" style="font-size:12px;" @click="downloadEvidence(item)"> 合法举证材料{{index+1}}（点击下载<i class="el-icon-download" style="font-size:14px;margin-left:6px;"></i>）</el-link>
            </p> -->
        </el-descriptions-item>
      </el-descriptions>   
      <el-divider content-position="left" v-if="(caseHandleInfo.is_illegal=='伪变化' && speed == 3) || (caseHandleInfo.is_illegal=='伪变化' && speed == 5)">【案件办理信息-伪变化】</el-divider>
      <el-descriptions class="margin-top" :column="2" border size="small" v-if="(caseHandleInfo.is_illegal=='伪变化' && speed == 3) || (caseHandleInfo.is_illegal=='伪变化' && speed == 5)">
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              实际用途
            </div>
          </template>
          {{caseHandleInfo.info.actual_use_to}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              为变化原因
            </div>
          </template>
          {{caseHandleInfo.info.pseudo_change_reason}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              实际面积
            </div>
          </template>
          {{caseHandleInfo.info.actual_area}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              是否有建筑物
            </div>
          </template>
          {{caseHandleInfo.info.is_have_build == 1 ? '是' : '否'}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              是否永久性建筑
            </div>
          </template>
          {{caseHandleInfo.info.is_forever_build == 1 ? '是' : '否'}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              建筑结构
            </div>
          </template>
          {{caseHandleInfo.info.build_structure}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              现场处置情况图片
            </div>
          </template>
            <el-image 
              v-show="threadAfterImageList.length>0"
              v-for="(item,index) in threadAfterImageList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item" 
              fit="cover"
              :preview-src-list="threadAfterImageList_a">
            </el-image>
        </el-descriptions-item>
      </el-descriptions>   
      <el-divider content-position="left" v-if="(caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '拟拆除' && speed == 3) || (caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '拟拆除' && speed == 5)">【案件办理信息-违法-拟拆除】</el-divider>
      <el-descriptions class="margin-top" :column="2" border size="small" v-if="(caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '拟拆除' && speed == 3) || (caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '拟拆除' && speed == 5)">
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              实际用途
            </div>
          </template>
          {{caseHandleInfo.info.actual_use_to}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              联系人
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              联系电话
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact_phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              处理办法
            </div>
          </template>
          {{caseHandleInfo.info.measure_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              建设情况
            </div>
          </template>
          {{caseHandleInfo.info.is_build_complete == 1 ? '已建成' : '建设中'}} 
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              建筑结构
            </div>
          </template>
          {{caseHandleInfo.info.build_structure}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              拟拆除后照片
            </div>
          </template>
            <el-image 
              v-show="threadAfterImageList.length>0"
              v-for="(item,index) in threadAfterImageList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item" 
              fit="cover"
              :preview-src-list="threadAfterImageList_a">
            </el-image>
        </el-descriptions-item>
      </el-descriptions>   
      <el-divider content-position="left" v-if="(caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '查处' && speed == 3) || (caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '查处' && speed == 5)">【案件办理信息-违法-查处】</el-divider>
      <el-descriptions class="margin-top" :column="2" border size="small" v-if="(caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '查处' && speed == 3) || (caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '查处' && speed == 5)">
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              实际用途
            </div>
          </template>
          {{caseHandleInfo.info.actual_use_to}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              联系人
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              联系电话
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact_phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              处理办法
            </div>
          </template>
          {{caseHandleInfo.info.measure_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              建筑结构
            </div>
          </template>
          {{caseHandleInfo.info.build_structure}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              立案号
            </div>
          </template>
          {{caseHandleInfo.info.registr_number}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              当事人姓名
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              身份证号码
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact_idcard}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              违法类型
            </div>
          </template>
          {{caseHandleInfo.info.illegal_type}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              处罚通知书
            </div>
          </template>
            <el-image 
              v-show="punishImageList.length>0"
              v-for="(item,index) in punishImageList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item.s_filePath" 
              fit="cover"
              :preview-src-list="[item.filePath]">
            </el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              交款通知单
            </div>
          </template>
            <el-image 
              v-show="paymentImageList.length>0"
              v-for="(item,index) in paymentImageList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item.s_filePath" 
              fit="cover"
              :preview-src-list="[item.filePath]">
            </el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              恢复后照片
            </div>
          </template>
            <el-image 
              v-show="threadAfterImageList.length>0"
              v-for="(item,index) in threadAfterImageList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item" 
              fit="cover"
              :preview-src-list="threadAfterImageList_a">
            </el-image>
        </el-descriptions-item>
      </el-descriptions>  
      <el-divider content-position="left" v-if="(caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '拟完善手续' && speed == 3) || (caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '拟完善手续' && speed == 5)">【案件办理信息-违法-拟完善手续】</el-divider>
      <el-descriptions class="margin-top" :column="2" border size="small" v-if="(caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '拟完善手续' && speed == 3) || (caseHandleInfo.is_illegal=='违法' && caseHandleInfo.info.measure_name == '拟完善手续' && speed == 5)">
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              实际用途
            </div>
          </template>
          {{caseHandleInfo.info.actual_use_to}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              联系人
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              联系电话
            </div>
          </template>
          {{caseHandleInfo.info.illegal_contact_phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              处理办法
            </div>
          </template>
          {{caseHandleInfo.info.measure_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              项目名称
            </div>
          </template>
          {{caseHandleInfo.info.result_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              政府统一完善手续证明
            </div>
          </template>
            <el-image 
              v-show="agreeImageList.length>0"
              v-for="(item,index) in agreeImageList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item.s_filePath" 
              fit="cover"
              :preview-src-list="[item.filePath]">
            </el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              办理手续照片
            </div>
          </template>
            <el-image 
              v-show="checkoutImageList.length>0"
              v-for="(item,index) in checkoutImageList"
              :key="index"
              style="width:85px;height:112px;margin-right:8px;"
              :src="item.s_filePath" 
              fit="cover"
              :preview-src-list="[item.filePath]">
            </el-image>
        </el-descriptions-item>
      </el-descriptions>  
      <el-divider content-position="left" v-if="speed == 4 || speed == 5">【案件审核信息】</el-divider>
      <el-descriptions v-if="speed == 4 || speed == 5" class="margin-top" :column="3" border size="small">
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              审核人
            </div>
          </template>
          {{flowLog[3].user_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div style="min-width:80px;height:10px;">
              <i class="el-icon-user"></i>
              审核时间
            </div>
          </template>
          {{flowLog[3].time}}
        </el-descriptions-item>
      </el-descriptions>
    </el-col>
    <el-col :span="isShowMap ? 10 : 0">
        <el-divider content-position="left"   v-if="isShowMap">【地图位置】</el-divider>
        <div style="width:100%;height:560px;"  v-if="isShowMap">
          <Map :ruleForm="caseDetail"></Map>
        </div>
    </el-col>
  </el-row>


    <el-image-viewer
      v-if="imagePreviewShow"
      style="z-index:100000"
      :initial-index="0"
      :on-close="onClose"
  
      :url-list="[currentImage]"
    />
</div>
</template>
<script>
import {getMethodCommon } from "@/api/common";
import {getCaseInfo,getCaseHandleInfo} from "../../../api/forms"
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import Map from "./DetailMap.vue"
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
export default {
  props:['caseDetailId','isShowMap'],
  data(){
    return {
      handleForm:{},
      imagePreviewShow:false,
      currentImage:null,
      caseHandleInfo:{
        info:{},
      },
      imageList:[],
      imageList_a:[],
      videoList:[],
      threadImageList:[],//现场照片
      threadImageList_a:[],
      threadAfterImageList:[], // 整改后、处理后照片
      threadAfterImageList_a:[],
      punishImageList:[], //处罚通知书照片
      punishImageList_a:[],
      paymentImageList:[],//交罚款通知书照片
      paymentImageList_a:[],
      agreeImageList:[],//政府同意完善手续证明照片
      agreeImageList_a:[],
      checkoutImageList:[],//办理手续证明照片
      evidenceFileList:[], //合法举证材料列表
      evidenceFileList_a:[],
      caseDetail:{},
      playerOptions:[],
      speed:0,
      caselog:[],
      flowLog:[],
    }
  },
  components:{
    ElImageViewer,
    Map
  },
  mounted(){
    this.loadDetailCaseInfo();
    this.loadCaseHandleInfo();

    // this.getCaseLog();

    this.getCaseFlowLog();
  
  },
  methods:{
    downloadEvidence(path){
      window.location.href=path;
    },
    changeSpeed(index,item){
      if(item.status == 0){
        return null;
      }
      for(let i=0;i<this.flowLog.length;i++){
        if(this.flowLog[i].status == 1){
          this.flowLog[i].state="finish";
        }else{
          this.flowLog[i].state = "wait";
        }
      }
      this.flowLog[index-1].state='success'

      this.speed = index;
    },
    getCaseLog(){
      getMethodCommon("/DroneCaseinfo/LoadDroneCaseLog",{caseid:this.caseDetailId}).then(res=>{
        this.caselog = res.result;
        this.caselog.forEach((item,index)=>{
            switch(item.description){
              case "AddDroneCaseDeal":this.caselog[index].description='添加了案件核查信息';
                break;
              case "UpdateDroneCaseDeal":this.caselog[index].description='更新了案件核查信息';
                break;
              case "DrawbackCase":this.caselog[index].description='退回了案件';
                break;
              case "RecallCase":this.caselog[index].description='撤回了核查信息';
                break;
              case "VerifyCaseInfoSuccess":this.caselog[index].description='审核通过了处理信息';
                break;
            }
        })
      })
    },
    getCaseFlowLog(){
      this.speed = 0;
      getMethodCommon("/DroneCaseinfo/GetCaseFlowLog",{id:this.caseDetailId}).then(res=>{
        if(res.code == 200){
          this.flowLog = res.result;
          if(this.flowLog.length == 4){
            let obj = {
              name:"伪变化",
              status:1,
              time: "",
              user_name: ""
            }
           this.flowLog.splice(2,0,obj);
          }
          this.speed = 0;
          this.flowLog.forEach((item,index)=>{
            this.speed=this.speed+item.status
            if(this.flowLog[index].status == 1){
              this.flowLog[index].state="finish";
            }else{
              this.flowLog[index].state = "wait";
            }
          })
          if(this.speed == 0){
            this.speed = 1;
          }
          this.flowLog[this.speed-1].state = "success"
        }
      })
    },
   
      loadDetailCaseInfo(){
        this.imageList = [];
        getCaseInfo({id:this.caseDetailId}).then(res=>{
          if(res.code == 200){
       
            this.caseDetail = res.result.info;
            this.imageList = res.result.pic_list;
            for(let i=0;i<this.imageList.length;i++){
              this.imageList_a[i] =BASE_IMAGE_URL+"/"+this.imageList[i];
              this.imageList[i] =BASE_IMAGE_URL+"/S_"+this.imageList[i];
            }
      
          }
        })
      },
      loadCaseHandleInfo(){
        getCaseHandleInfo({caseid:this.caseDetailId}).then(res=>{
          if(res.code == 200){
            this.caseHandleInfo = res.result;
            // res.result.is_illegal = 1;
            // res.result.info.measure_name = '拟完善手续';

            if(this.caseHandleInfo.is_illegal == 0){
              this.caseHandleInfo.is_illegal = '合法'
            }else if(this.caseHandleInfo.is_illegal == 1){
              this.caseHandleInfo.is_illegal = '违法'
            }else if(this.caseHandleInfo.is_illegal == 2){
              this.caseHandleInfo.is_illegal = '伪变化'
            } 

            if(res.result.video_list.length>0){
                
            }
            // 视频
            this.playerOptions = [];
            if(res.result.video_list.length>0){
              res.result.video_list.forEach((item,index)=>{
                let options = {
                  playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
                  autoplay : false, //如果true,浏览器准备好时开始回放。
                  muted : false, // 默认情况下将会消除任何音频。
                  loop : false, // 视频一结束就重新开始。
                  preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                  language : 'zh-CN',
                  aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                  fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                  sources : [ 
                    {
                      type : "",
                      src : BASE_IMAGE_URL+"/"+item//url地址
                    }
                  ],
                  poster : "", //你的封面地址
                  // width: document.documentElement.clientWidth,
                  notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                  controlBar : {
                        timeDivider : true,//当前时间和持续时间的分隔符
                        durationDisplay : true,//显示持续时间
                        remainingTimeDisplay : false,//是否显示剩余时间功能
                        fullscreenToggle : true  //全屏按钮
                  }
                }
                this.playerOptions.push(options);
                // this.videoList.push(item)
                // console.log("playOptions",this.playerOptions);
              })
            }
            // 现场照片
            if(res.result.pic_info_list.length>0){
              res.result.pic_info_list.forEach(item=>{
                this.threadImageList.push(item.filePath);
              })
              for(let i=0;i<this.threadImageList.length;i++){
                let obj = {
                  filePath:BASE_IMAGE_URL+"/"+this.threadImageList[i],
                  s_filePath:BASE_IMAGE_URL+"/S_"+this.threadImageList[i]
                }
                this.threadImageList[i] = obj;
              }
            }
            
            // 处理后照片 整改后照片 恢复后照片
            if(res.result.after_pic_list.length>0){
              res.result.after_pic_list.forEach(item=>{
                this.threadAfterImageList.push(item.filePath);
              })
            }
            for(let i=0;i<this.threadAfterImageList.length;i++){
              this.threadAfterImageList_a[i] =BASE_IMAGE_URL+"/"+this.threadAfterImageList[i];
              this.threadAfterImageList[i] =BASE_IMAGE_URL+"/S_"+this.threadAfterImageList[i];
              
            }

            // 合法 - 举证材料合法文件  evidence_file_list
            if(res.result.evidence_file_list.length>0){
              res.result.evidence_file_list.forEach(item=>{
                this.evidenceFileList.push(item.filePath);
              })
              for(let i=0;i<this.evidenceFileList.length;i++){
                let obj = {
                  filePath:BASE_IMAGE_URL+"/"+this.evidenceFileList[i],
                  s_filePath:BASE_IMAGE_URL+"/"+this.evidenceFileList[i],
                }
                this.evidenceFileList[i] = obj;

              }
            }

            // 违法 查处 - 处罚通知书 punish_pic_list
            if(res.result.punish_pic_list.length>0){
               res.result.punish_pic_list.forEach(item=>{
                this.punishImageList.push(item);
              })
              for(let i=0;i<this.punishImageList.length;i++){
                let obj = {
                  filePath : BASE_IMAGE_URL+"/"+this.punishImageList[i],
                  s_filePath : BASE_IMAGE_URL+"/S_"+this.punishImageList[i]
                }
                this.punishImageList[i] = obj;
              }
            }

            // 违法 查处 - 交款通知书 payment_pic_list
            if(res.result.payment_pic_list.length>0){
               res.result.payment_pic_list.forEach(item=>{
                this.paymentImageList.push(item);
              })
              for(let i=0;i<this.paymentImageList.length;i++){
                let obj = {
                  filePath : BASE_IMAGE_URL+"/"+this.paymentImageList[i],
                  s_filePath : BASE_IMAGE_URL+"/S_"+this.paymentImageList[i]
                }
                this.paymentImageList[i] = obj;
              }
            }

            // 违法 完善手续 - 政府同意完善手续证明 agree_checkout_pic_list
            if(res.result.agree_checkout_pic_list.length>0){
               res.result.agree_checkout_pic_list.forEach(item=>{
                this.agreeImageList.push(item);
              })
              for(let i=0;i<this.agreeImageList.length;i++){
                let obj = {
                  filePath : BASE_IMAGE_URL+"/"+this.agreeImageList[i],
                  s_filePath : BASE_IMAGE_URL+"/S_"+this.agreeImageList[i]
                }
                this.agreeImageList[i] = obj;
              }
            }

            // 违法 完善手续 - 办理手续 checkout_pic_list
            if(res.result.checkout_pic_list.length>0){
               res.result.checkout_pic_list.forEach(item=>{
                this.checkoutImageList.push(item);
              })
              for(let i=0;i<this.checkoutImageList.length;i++){
                let obj = {
                  filePath:BASE_IMAGE_URL+"/"+this.checkoutImageList[i],
                  s_filePath:BASE_IMAGE_URL+"/S_"+this.checkoutImageList[i]
                }
                this.checkoutImageList[i] = obj;
                // this.checkoutImageList_a[i] =BASE_IMAGE_URL+"/"+this.checkoutImageList[i];
                // this.checkoutImageList[i] =BASE_IMAGE_URL+"/S_"+this.checkoutImageList[i];
              }
            }


              
            
          }
        })
      }
  },
}
</script>
<style>
.desc-container{
  overflow-y:scroll;
}
/* 滑道样式 */
.desc-container::-webkit-scrollbar{
  width:5px;
  background:rgba(255,255,255,0.2);
  border-radius: 6px;
}
/* 定义滑块的样式 */
.desc-container::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.3);
  background-color:rgba(255,255,255,0.3);
}
/* 定义滑块鼠标移入时的样式 */
.desc-container::-webkit-scrollbar-thumb:hover{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.3);
  background-color:rgba(255,255,255,0.4);
}



.case-desc::-webkit-scrollbar{
  width:5px;
  background:rgba(255,255,255,0.2);
  border-radius: 6px;
}
/* 定义滑块的样式 */
.case-desc::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.3);
  background-color:rgba(255,255,255,0.3);
}
/* 定义滑块鼠标移入时的样式 */
.case-desc::-webkit-scrollbar-thumb:hover{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.3);
  background-color:rgba(255,255,255,0.4);
}

/deep/ .el-step__title{
  font-size:15px;
}
/deep/ .el-step__main{
  cursor:pointer !important;
}
</style>