<template>
<div style="height:80vh;overflow-y:scroll;padding-right:32px;">
	<el-form ref="form" size="mini" :model="caseHandlingData" label-width="100px">
    <el-form-item label="核查人: ">
			<el-input v-model="caseHandlingData.createusername" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="核查时间: ">
			<el-input v-model="caseHandlingData.createtime" :disabled="disableForm"></el-input>
		</el-form-item>
		<el-form-item label="是否违法: ">
			<el-radio-group v-model="illegal">
        <el-radio :label="0" :disabled="disableForm">合法</el-radio>
				<el-radio :label="1" :disabled="disableForm">违法</el-radio>
        <el-radio :label="2" :disabled="disableForm">伪变化</el-radio>
			</el-radio-group>
		</el-form-item>
   
		<!-- <el-form-item label="处理结果: ">
			<el-input v-model="caseHandlingData.result_name" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="立案号: " v-if="illegal == 1 && caseHandlingData.measure_name == '查处'">
			<el-input v-model="caseHandlingData.registr_number" :disabled="disableForm"></el-input>
		</el-form-item>
     <el-form-item label="查处结果: " v-if="illegal == 1 && caseHandlingData.measure_name == '查处'">
			<el-input v-model="caseHandlingData.investigation_result" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="违法人电话: " v-if="illegal == 1">
			<el-input v-model="caseHandlingData.illegal_contact_phone" :disabled="disableForm"></el-input>
		</el-form-item> -->
    <!-- 违法人信息 -->
    <!-- <el-form-item label="联系人: " >
			<el-input v-model="caseHandlingData.illegal_contact" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="联系人电话: " >
			<el-input v-model="caseHandlingData.illegal_contact_phone" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="现场情况: " >
			<el-input v-model="caseHandlingData.actual_scene_case" :disabled="disableForm"></el-input>
		</el-form-item> -->
<!-- 实际现场情况照片、视频 -->

		<!-- <el-form-item label="现场照片: ">
			<div v-for="(item,index) in pic_show_list" :key="index"
			     style="float:left;position:relative;margin:10px 0">
			     <div class="deleteImg" @click="deleteImgClick(index)">
			       <van-icon name="cross" color="#ff0000" size="12" />
			     </div>
			    <img
			      @click="handlerImagePreview(pic_show_list,index)"
			      :src="item"
			      width="80px"
			      height="80px" style="margin-right:5px;"/>
			</div>
			<div
			    v-if="!disableForm"
			    @click="uploadImage('caseImage')"
			    style="width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;background-color: #f5f5f5">
			  <img :src="photo" style="width: 30px" height="30px" alt="">
			</div>
		</el-form-item> -->
    <el-form-item label="现场照片: ">
      <div v-for="(item,num) in imageList" :key="num" style="position:relative;width:85px;height:112px;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;overflow:hidden;">
				<el-image
				  v-if="imageList.length>0"
				  style="width:85px;"
				  :src="item.s_filePath" 
          @click="lookCurrentImage(item);"
          >
				</el-image>
				<div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delImgClick(item,num,'imageList')">
					<i class="el-icon-close"></i>
				</div>
			</div>
      
			<el-upload
        v-if="isExamine"
				ref="upload"
				action="string"
				accept=".png,.jpg,.docx,.xlsx,.xls"
				list-type="picture-card"
				:show-file-list="false"
				:on-preview="handlePictureCardPreview"
				:on-success="handleSuccess"
				:on-exceed="handleExceed"
				:http-request="UploadImage">
			  <i class="el-icon-plus"></i>
			</el-upload>
      <el-empty v-if="imageList.length<=0 && isExamine == false" style="" description="未上传现场照片" :image-size="40"></el-empty>
		</el-form-item>
    <el-form-item label="现场视频: ">
			<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"
        ></video-player>
      </div>
      <div v-else>
        <el-empty style="" description="未上传现场视频" :image-size="40"></el-empty>
      </div>
		</el-form-item>

     <el-form-item label="处理措施: " v-if="illegal == 1">
			<el-select v-model="caseHandlingData.measure_name" placeholder="请选择处理措施" :disabled="disableForm">
				<el-option v-for="(item,index) in dealMeasuresList" :key="index" :label="item.name" :value="item.id" ></el-option>
			</el-select>
		</el-form-item>

        <!-- 合法 -->
    <!-- <el-divider content-position="left" v-if="illegal == 0">合法</el-divider> -->
    <el-row v-if="illegal == 0">
       <el-form-item label="项目名称: " >
        <el-input v-model="caseHandlingData.result_name" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="联系人: " >
        <el-input v-model="caseHandlingData.illegal_contact" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话: " >
        <el-input v-model="caseHandlingData.illegal_contact_phone" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="现场情况: " >
        <el-input v-model="caseHandlingData.actual_scene_case" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="实际用途: " >
        <el-input v-model="caseHandlingData.actual_use_to" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="建筑结构: " >
        <el-input v-model="caseHandlingData.build_structure" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="批准文件名称: " >
        <el-input v-model="caseHandlingData.evidence_file_name" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="批准文件有效期: " >
        <el-input v-model="caseHandlingData.evidence_file_indate" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="批准文件编号: " >
        <el-input v-model="caseHandlingData.evidence_file_number" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="合法证明材料: " v-if="illegal == 0">
        <div v-for="(item,num) in evidenceFileList" :key="num" style="position:relative;width:85px;height:112px;overflow:hidden;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;">
          <el-image
            v-if="evidenceFileList.length>0"
            style="width:85px;"
            :src="item.s_filePath" 
            @click="lookCurrentImage(item);"
            >
          </el-image>
          <div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delImgClick(item,num,'evidenceFileList')">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-upload
        v-if="isExamine"
          ref="upload"
          action="string"
          accept=".png,.jpg,.docx,.xlsx,.xls"
          list-type="picture-card"
          :show-file-list="false"
          :on-preview="handlePictureCardPreviewAfterImage"
          :on-success="handleSuccessAfterImage"
          :on-exceed="handleExceedAfterImage"
          :http-request="UploadEvidenceImage">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-empty v-if="evidenceFileList.length<=0 && isExamine == false" style="" description="未上传合法证明材料" :image-size="40"></el-empty>
      </el-form-item>
      <el-form-item label="处理人: " >
        <el-input v-model="caseHandlingData.transactor_name" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="处理时间: " >
        <el-input v-model="caseHandlingData.transact_time" :disabled="disableForm"></el-input>
      </el-form-item>
    </el-row>

    <!-- 伪变化 -->
    <!-- <el-divider content-position="left" v-if="illegal == 2">伪变化</el-divider> -->
    <el-row v-if="illegal == 2">
       <el-form-item label="实际用途: " >
        <el-input v-model="caseHandlingData.actual_use_to" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="伪变化原因: " >
        <el-input v-model="caseHandlingData.pseudo_change_reason" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="实际面积: " >
        <el-input v-model="caseHandlingData.actual_area" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="是否有建筑物: " >
        <!-- <el-input v-model="caseHandlingData.is_have_build" :disabled="disableForm"></el-input> -->
        	<el-radio-group v-model="caseHandlingData.is_have_build">
            <el-radio :label="1" :disabled="disableForm">是</el-radio>
            <el-radio :label="0" :disabled="disableForm">否</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="是否永久性建筑: "  v-if="caseHandlingData.is_have_build == 1">
        <el-radio-group v-model="caseHandlingData.is_forever_build">
            <el-radio :label="1" :disabled="disableForm">是</el-radio>
            <el-radio :label="0" :disabled="disableForm">否</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="建筑结构: " >
        <el-input v-model="caseHandlingData.build_structure" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="现场处置情况: ">
        <div v-for="(item,num) in afterImageList" :key="num" style="position:relative;width:85px;height:112px;overflow:hidden;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;">
          <el-image
            v-if="afterImageList.length>0"
            style="width:85px;"
            :src="item.s_filePath" 
            @click="lookCurrentImage(item);"
            >
          </el-image>
          <div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delImgClick(item,num,'afterImageList')">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-upload
          v-if="isExamine"
          ref="upload"
          action="string"
          accept=".png,.jpg,.docx,.xlsx,.xls"
          list-type="picture-card"
          :show-file-list="false"
          :on-preview="handlePictureCardPreviewAfterImage"
          :on-success="handleSuccessAfterImage"
          :on-exceed="handleExceedAfterImage"
          :http-request="UploadImageAfterImage">
          <i class="el-icon-plus"></i>
        </el-upload>
         <el-empty v-if="afterImageList.length<=0 && isExamine == false" style="" description="未上传现场处置情况照片" :image-size="40"></el-empty>
      </el-form-item>
      <el-form-item label="处理人: " >
        <el-input v-model="caseHandlingData.transactor_name" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="处理时间: " >
        <el-input v-model="caseHandlingData.transact_time" :disabled="disableForm"></el-input>
      </el-form-item>
    </el-row>

    <!-- 拟拆除 -->
    <!-- <el-divider content-position="left" v-if="illegal == 1 && caseHandlingData.measure_name == '拟拆除'">拟拆除</el-divider> -->
    <el-row v-if="illegal == 1 && caseHandlingData.measure_name == '拟拆除'">
      <!-- <el-form-item label="处理办法: " >
        <el-input v-model="caseHandlingData.measure_name" :disabled="disableForm"></el-input>
      </el-form-item> -->
      <el-form-item label="实际用途: " >
        <el-input v-model="caseHandlingData.actual_use_to" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="联系人: " >
        <el-input v-model="caseHandlingData.illegal_contact" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话: " >
        <el-input v-model="caseHandlingData.illegal_contact_phone" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="建设情况: " >
          <el-radio-group v-model="caseHandlingData.is_build_complete">
            <el-radio :label="1" :disabled="disableForm">已建成</el-radio>
            <el-radio :label="0" :disabled="disableForm">建设中</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="建筑结构: " >
        <el-input v-model="caseHandlingData.build_structure" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="拆除后照片: ">
        <div v-for="(item,num) in afterImageList" :key="num" style="position:relative;width:85px;height:112px;overflow:hidden;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;">
          <el-image
            v-if="afterImageList.length>0"
            style="width:85px;"
            :src="item.s_filePath" 
            @click="lookCurrentImage(item);"
            >
          </el-image>
          <div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delAfterImgClick(item,num)">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-upload
        v-if="isExamine"
          ref="upload"
          action="string"
          accept=".png,.jpg,.docx,.xlsx,.xls"
          list-type="picture-card"
          :show-file-list="false"
          :on-preview="handlePictureCardPreviewAfterImage"
          :on-success="handleSuccessAfterImage"
          :on-exceed="handleExceedAfterImage"
          :http-request="UploadImageAfterImage">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
       <el-form-item label="处理人: " >
        <el-input v-model="caseHandlingData.transactor_name" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="处理时间: " >
        <el-input v-model="caseHandlingData.transact_time" :disabled="disableForm"></el-input>
      </el-form-item>
    </el-row>

    <!-- 查处 -->
    <!-- <el-divider content-position="left" v-if="illegal == 1 && caseHandlingData.measure_name == '查处'">查处</el-divider> -->
    <el-row v-if="illegal == 1 && caseHandlingData.measure_name == '查处'">
      <!-- <el-form-item label="处理办法: " >
        <el-input v-model="caseHandlingData.measure_name" :disabled="disableForm"></el-input>
      </el-form-item> -->
      <el-form-item label="实际用途: " >
        <el-input v-model="caseHandlingData.actual_use_to" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="联系人: " >
        <el-input v-model="caseHandlingData.illegal_contact" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话: " >
        <el-input v-model="caseHandlingData.illegal_contact_phone" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="建设情况: " >
        <el-radio-group v-model="caseHandlingData.is_build_complete">
          <el-radio :label="1" :disabled="disableForm">已建成</el-radio>
          <el-radio :label="0" :disabled="disableForm">建设中</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="建筑结构: " >
        <el-input v-model="caseHandlingData.build_structure" :disabled="disableForm"></el-input>
      </el-form-item>
       <el-form-item label="立案号: " >
        <el-input v-model="caseHandlingData.registr_number" :disabled="disableForm"></el-input>
      </el-form-item>
       <el-form-item label="当事人姓名: " >
        <el-input v-model="caseHandlingData.illegal_contact" :disabled="disableForm"></el-input>
      </el-form-item>
       <el-form-item label="身份证号码: " >
        <el-input v-model="caseHandlingData.illegal_contact_idcard" :disabled="disableForm"></el-input>
      </el-form-item>
       <el-form-item label="违法类型: " >
        <el-radio-group v-model="caseHandlingData.illegal_type">
            <el-radio label="违法建筑类" :disabled="disableForm">违法建筑类</el-radio>
            <el-radio label="非法采矿类" :disabled="disableForm">非法采矿类</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="处罚通知书: " >
         <div v-for="(item,num) in punishImageList" :key="num" style="position:relative;width:85px;height:112px;overflow:hidden;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;">
          <el-image
            v-if="punishImageList.length>0"
            style="width:85px;"
            :src="item.s_filePath" 
            @click="lookCurrentImage(item);"
            >
          </el-image>
          <div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delImgClick(item,num,'punishImageList')">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-upload
        v-if="isExamine"
          ref="upload"
          action="string"
          accept=".png,.jpg,.docx,.xlsx,.xls"
          list-type="picture-card"
          :show-file-list="false"
          :on-preview="handlePictureCardPreviewAfterImage"
          :on-success="handleSuccessAfterImage"
          :on-exceed="handleExceedAfterImage"
          :http-request="UploadImagePunishImage">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
       <el-form-item label="交款通知书: " >
         <div v-for="(item,num) in paymentImagesList" :key="num" style="position:relative;width:85px;height:112px;overflow:hidden;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;">
          <el-image
            v-if="paymentImagesList.length>0"
            style="width:85px;"
            :src="item.s_filePath" 
            @click="lookCurrentImage(item);"
            >
          </el-image>
          <div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delImgClick(item,num,'paymentImagesList')">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-upload
        v-if="isExamine"
          ref="upload"
          action="string"
          accept=".png,.jpg,.docx,.xlsx,.xls"
          list-type="picture-card"
          :show-file-list="false"
          :on-preview="handlePictureCardPreviewAfterImage"
          :on-success="handleSuccessAfterImage"
          :on-exceed="handleExceedAfterImage"
          :http-request="UploadImagePaymentImage">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="恢复后照片: ">
        <div v-for="(item,num) in afterImageList" :key="num" style="position:relative;width:85px;height:112px;overflow:hidden;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;">
          <el-image
            v-if="afterImageList.length>0"
            style="width:85px;"
            :src="item.s_filePath" 
            @click="lookCurrentImage(item);"
            >
          </el-image>
          <div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delAfterImgClick(item,num)">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-upload
        v-if="isExamine"
          ref="upload"
          action="string"
          accept=".png,.jpg,.docx,.xlsx,.xls"
          list-type="picture-card"
          :show-file-list="false"
          :on-preview="handlePictureCardPreviewAfterImage"
          :on-success="handleSuccessAfterImage"
          :on-exceed="handleExceedAfterImage"
          :http-request="UploadImageAfterImage">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
       <el-form-item label="处理人: " >
        <el-input v-model="caseHandlingData.transactor_name" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="处理时间: " >
        <el-input v-model="caseHandlingData.transact_time" :disabled="disableForm"></el-input>
      </el-form-item>
    </el-row>

     <!-- 完善手续 -->
    <!-- <el-divider content-position="left" v-if="illegal == 1 && caseHandlingData.measure_name == '拟完善手续'">完善手续</el-divider> -->
    <el-row v-if="illegal == 1 && caseHandlingData.measure_name == '拟完善手续'">
      <!-- <el-form-item label="处理办法: " >
        <el-input v-model="caseHandlingData.measure_name" :disabled="disableForm"></el-input>
      </el-form-item> -->
      <el-form-item label="实际用途: " >
        <el-input v-model="caseHandlingData.actual_use_to" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="联系人: " >
        <el-input v-model="caseHandlingData.illegal_contact" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话: " >
        <el-input v-model="caseHandlingData.illegal_contact_phone" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="项目名称: " >
        <el-input v-model="caseHandlingData.result_name" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="政府同意完善手续证明: " >
         <div v-for="(item,num) in agreeImageList" :key="num" style="position:relative;width:85px;height:112px;overflow:hidden;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;">
          <el-image
            v-if="agreeImageList.length>0"
            style="width:85px;"
            :src="item.s_filePath" 
            @click="lookCurrentImage(item);"
            >
          </el-image>
          <div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delImgClick(item,num,'agreeImageList')">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-upload
        v-if="isExamine"
          ref="upload"
          action="string"
          accept=".png,.jpg,.docx,.xlsx,.xls"
          list-type="picture-card"
          :show-file-list="false"
          :on-preview="handlePictureCardPreviewAfterImage"
          :on-success="handleSuccessAfterImage"
          :on-exceed="handleExceedAfterImage"
          :http-request="UploadImageAgreeImage">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="办理手续照片: " >
         <div v-for="(item,num) in checkoutImageList" :key="num" style="position:relative;width:85px;height:112px;overflow:hidden;float:left;background:#f1f1f1;margin-left:6px;margin-bottom:6px;">
          <el-image
            v-if="checkoutImageList.length>0"
            style="width:85px;"
            :src="item.s_filePath" 
            @click="lookCurrentImage(item);"
            >
          </el-image>
          <div class="delImg"  v-if="isExamine" style="position:absolute;top:2px;left:50px;" @click="delImgClick(item,num,'checkoutImageList')">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-upload
        v-if="isExamine"
          ref="upload"
          action="string"
          accept=".png,.jpg,.docx,.xlsx,.xls"
          list-type="picture-card"
          :show-file-list="false"
          :on-preview="handlePictureCardPreviewAfterImage"
          :on-success="handleSuccessAfterImage"
          :on-exceed="handleExceedAfterImage"
          :http-request="UploadImageCheckoutImage">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
       <el-form-item label="手续有效期: " >
        <el-input v-model="caseHandlingData.expiry_date" :disabled="disableForm"></el-input>
      </el-form-item>
       <el-form-item label="处理人: " >
        <el-input v-model="caseHandlingData.transactor_name" :disabled="disableForm"></el-input>
      </el-form-item>
      <el-form-item label="处理时间: " >
        <el-input v-model="caseHandlingData.transact_time" :disabled="disableForm"></el-input>
      </el-form-item>
    </el-row>

		<!-- <el-form-item label="是否协办: ">
			<el-radio-group v-model="caseHandlingData.is_assist">
				<el-radio :label="1" :disabled="disableForm">是</el-radio>
				<el-radio :label="0"  :disabled="disableForm">否</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="协办人: " v-if="caseHandlingData.is_assist===1">
			<el-input v-model="caseHandlingData.assist_people" :disabled="disableForm"></el-input>
		</el-form-item>
		<el-form-item label="协办单位: " v-if="caseHandlingData.is_assist===1">
			<el-input v-model="caseHandlingData.assist_company" :disabled="disableForm"></el-input>
		</el-form-item> -->
	</el-form>
		<!-- <el-button type="primary" class="dialog-footer"  @click="submitCaseHandling" :disabled="disableForm">提交</el-button> -->
    <el-image-viewer
      v-if="imagePreviewShow"
      style="z-index:100000"
      :initial-index="0"
      :on-close="onClose"
  
      :url-list="[currentImage]"
    />
</div>	
</template>

<script>
import photo from "@/assets/photo.png";
import {getMethodCommon, postMethodCommon } from "@/api/common";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
export default {
  name: "HandleCase",
  props: ['id','isExamine'],
  components: {
    ElImageViewer
  },
  data() {
    return {
      illegal: null,
      deal_id:null,
      photo: photo,
      caseHandlingData: {
        id:"",
        measure_name: "",
        result_name: "",
        is_assist: 0,
        assist_people: "",
        assist_company: '',
        illegal_contact:null,   //违法人
        illegal_contact_phone:null,//违法人联系方式
        actual_scene_case:null,//现场实际情况
      },
      pic_list: [],
      pic_show_list: [],
      video_list: [],
      video_show_list: [],
      handle_status_id: 0,
      tampField: "",
      showPicker: false,
      showSubmit: true,
      user_name: "",
      showLoading: true,
      dealMeasuresList: [],
      showCuoShi: false,
      disableForm: true,
      imageList:[],
      prewImageList:[],
      S_ImageList:[],

      afterImageList:[],
      prewAfterImageList:[],
      S_AfterImageList:[],

      evidenceFileList:[],
      S_EvidenceFileList:[],
      prewEvidenceFileList:[],

      punishImageList:[], //处罚通知图片
      paymentImagesList:[], //交款证明图片
      agreeImageList:[],  //政府同意证明图片
      checkoutImageList:[],//办理手续图片

      videoList:[],
      imagePreviewShow:false,
      currentImage:null,
      videoloaded:false,
			playerOptions:[],
    }
  },
  watch:{
    "id":function(e){
      this.getCaseHandlingDetail()
		  this.getDealMeasuresList();
    }
  },
  created() {
		if (this.handleStatus === 2 || this.handleStatus === '2') {
			this.disableForm = true
		} else {
			this.getUser();
		}
		this.getCaseHandlingDetail()
		this.getDealMeasuresList();
  },
  methods: {
    lookCurrentImage(item){
      this.currentImage = item.filePath;
      this.imagePreviewShow = true;
    },
    onClose(){
      this.imagePreviewShow = false;
    },
    getUser() {
      if (this.showSubmit) {
        getMethodCommon('/Check/GetUserProfile').then(res => {
			this.caseHandlingData.createusername = res.result.name
        })
      }
    },
    // 上传图片
    handlePictureCardPreview(file) {
			console.log('aaa',file)
		},
    handleExceed(files, fileList) {
			this.$message.warning(`只能选择一个文件`);
    },
    
    UploadImage(param){
			let formData = new FormData()
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				// this.savePic(res.result[0].filePath)
        let item = {
          filePath : BASE_IMAGE_URL+"/"+res.result[0].filePath,
          s_filePath :BASE_IMAGE_URL+"/S_"+res.result[0].filePath,
        }
        let imgForm={
          deal_id:this.deal_id,
          type:0,
          path:res.result[0].filePath,
          latitude:"",
          longitude:"",
          angle:"",
          tag:""
        }
        postMethodCommon("/DroneCaseinfo/AddDroneDealPic",imgForm).then(response=>{
          if(response.code == 200){
             this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
        this.imageList.push(item);
			})
		},
    handleSuccess(response,file,fileList){

    },

    // 上传处理后图片
    handlePictureCardPreviewAfterImage(file) {
			console.log('aaa',file)
		},
    handleExceedAfterImage(files, fileList) {
			this.$message.warning(`只能选择一个文件`);
		},
    UploadImageAfterImage(param){
			let formData = new FormData()
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				// this.savePic(res.result[0].filePath)
        let item = {
          filePath : BASE_IMAGE_URL+"/"+res.result[0].filePath,
          s_filePath :BASE_IMAGE_URL+"/S_"+res.result[0].filePath,
        }
        let imgForm={
          deal_id:this.deal_id,
          type:0,
          path:res.result[0].filePath,
          latitude:"",
          longitude:"",
          angle:"",
          tag:"AfterPicTag"
        }
        postMethodCommon("/DroneCaseinfo/AddDroneDealPic",imgForm).then(response=>{
          if(response.code == 200){
             this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
        this.afterImageList.push(item);
        // this.submitCaseHandling();
			})
		},
    handleSuccessAfterImage(response,file,fileList){

    },

    // 上传合法 证明材料图片
    UploadEvidenceImage(param){
			let formData = new FormData()
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				// this.savePic(res.result[0].filePath)
        let item = {
          filePath : BASE_IMAGE_URL+"/"+res.result[0].filePath,
          s_filePath :BASE_IMAGE_URL+"/S_"+res.result[0].filePath,
        }
        let imgForm={
          deal_id:this.deal_id,
          type:0,
          path:res.result[0].filePath,
          latitude:"",
          longitude:"",
          angle:"",
          tag:"EvidenceFileTag"
        }
        postMethodCommon("/DroneCaseinfo/AddDroneDealPic",imgForm).then(response=>{
          if(response.code == 200){
             this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
        this.evidenceFileList.push(item);
        // this.submitCaseHandling();
			})
    },
    
    // 上传处罚通知书图片
    UploadImagePunishImage(param){
			let formData = new FormData()
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				// this.savePic(res.result[0].filePath)
        let item = {
          filePath : BASE_IMAGE_URL+"/"+res.result[0].filePath,
          s_filePath :BASE_IMAGE_URL+"/S_"+res.result[0].filePath,
          id : null
        }
        let imgForm={
          deal_id:this.deal_id,
          type:0,
          path:res.result[0].filePath,
          latitude:"",
          longitude:"",
          angle:"",
          tag:"punishPicTag"
        }
        postMethodCommon("/DroneCaseinfo/AddDroneDealPic",imgForm).then(response=>{
          if(response.code == 200){
             this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
        this.punishImageList.push(item);
        this.prewPunishImageList.push(item.filePath);
        // this.submitCaseHandling();
			})
    },
    UploadImagePaymentImage(param){
			let formData = new FormData()
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				// this.savePic(res.result[0].filePath)
        let item = {
          filePath : BASE_IMAGE_URL+"/"+res.result[0].filePath,
          s_filePath :BASE_IMAGE_URL+"/S_"+res.result[0].filePath,
        }
        let imgForm={
          deal_id:this.deal_id,
          type:0,
          path:res.result[0].filePath,
          latitude:"",
          longitude:"",
          angle:"",
          tag:"paymentPicTag"
        }
        postMethodCommon("/DroneCaseinfo/AddDroneDealPic",imgForm).then(response=>{
          if(response.code == 200){
             this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
        this.paymentImagesList.push(item);
			})
    },
    UploadImageAgreeImage(param){
			let formData = new FormData()
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				// this.savePic(res.result[0].filePath)
        let item = {
          filePath : BASE_IMAGE_URL+"/"+res.result[0].filePath,
          s_filePath :BASE_IMAGE_URL+"/S_"+res.result[0].filePath,
        }
        let imgForm={
          deal_id:this.deal_id,
          type:0,
          path:res.result[0].filePath,
          latitude:"",
          longitude:"",
          angle:"",
          tag:"agreeCheckoutPicTag"
        }
        postMethodCommon("/DroneCaseinfo/AddDroneDealPic",imgForm).then(response=>{
          if(response.code == 200){
             this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
        this.agreeImageList.push(item);
			})
    },
    UploadImageCheckoutImage(param){
			let formData = new FormData()
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				// this.savePic(res.result[0].filePath)
        let item = {
          filePath : BASE_IMAGE_URL+"/"+res.result[0].filePath,
          s_filePath :BASE_IMAGE_URL+"/S_"+res.result[0].filePath,
        }
        let imgForm={
          deal_id:this.deal_id,
          type:0,
          path:res.result[0].filePath,
          latitude:"",
          longitude:"",
          angle:"",
          tag:"checkoutPicTag"
        }
        postMethodCommon("/DroneCaseinfo/AddDroneDealPic",imgForm).then(response=>{
          if(response.code == 200){
             this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
        this.checkoutImageList.push(item);
			})
    },

    //删除图片
    delImgClick(item,index,type){
			this.$confirm('确定删除本张图片?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
         postMethodCommon("/DroneCaseinfo/DeleteDroneFilesByPath",[item.filePath.substring(item.filePath.indexOf("DroneEnforcement"))]).then((res)=>{
          if(res.code == 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            switch(type){
              case "imageList": 
                this.imageList = this.imageList.filter((item,idx)=>{
                  return idx != index;
                })
              break;
              case "evidenceFileList":
                 this.evidenceFileList = this.evidenceFileList.filter((item,idx)=>{
                  return idx != index;
                })
              break;
              case "afterImageList":
                 this.afterImageList = this.afterImageList.filter((item,idx)=>{
                  return idx != index;
                })
              break;
              case "punishImageList":
                 this.punishImageList = this.punishImageList.filter((item,idx)=>{
                  return idx != index;
                })
              break;
              case "paymentImagesList":
                 this.paymentImagesList = this.paymentImagesList.filter((item,idx)=>{
                  return idx != index;
                })
              break;
            }
            
          }
        })
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
    },
    delAfterImgClick(item,index){
			let src = 'DroneCaseinfo/DeleteDroneCasePic?id='+item.id
			this.$confirm('确定删除本张图片?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
         postMethodCommon("/DroneCaseinfo/DeleteDroneFilesByPath",[item.filePath.substring(item.filePath.indexOf("DroneEnforcement"))]).then((res)=>{
          if(res.code == 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.afterImageList = this.afterImageList.filter((item,idx)=>{
              return idx != index;
            })
          }
        })
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},
    deleteImgClick(index){
      let data = []
      data.push(this.pic_list[index])
      Dialog.confirm({
        title: '',
        message: '确认删除此图片？',
      })
        .then(() => {
          postMethodCommon("/DroneCaseinfo/DeleteDroneFilesByPath",data).then(res =>{
            this.pic_show_list.splice(index,1)
            this.pic_list.splice(index,1)
          })
        })
        .catch(() => {
          // on cancel
        });
      
    },
    deleteVideoClick(item,index){
      let data = []
      data.push(item)
      Dialog.confirm({
        title: '',
        message: '确认删除此视频？',
      })
        .then(() => {
          postMethodCommon("/DroneCaseinfo/DeleteDroneFilesByPath",data).then(res =>{
            this.video_list.splice(index,1)
          })
        })
        .catch(() => {
          // on cancel
        });
    },
    //加载处理措施列表
    getDealMeasuresList() {
		getMethodCommon('/Categorys/LoadList',{typeid: 'DEAL_MEASURES'}).then(res => {
			this.dealMeasuresList = res.result
      })
    },
    handlerImagePreview(li, index) {
      ImagePreview({
        images: li,
        startPosition: index,
        closeable: true,
      });
    },
    // 照片上传相关
    uploadImage(label) {
      this.tampField = label
    },
    receiveImageData(urls) {
      if (this.tampField === 'caseImage') {
        this.pic_list.push(urls)
        this.pic_show_list.push(this.BASE_IMAGE_URL + '/' + urls)
        this.tampField = ""
      }
    },
    // 视频上传相关
    uploadVideo(label) {
      this.tampField = label
    },
    receiveVideoData(urls) {
      if (this.tampField === 'caseVideo') {
        this.video_list.push(urls)
        this.tampField = ""
      }
    },
    handleImageArray(imageArr){
      let returnArray = [];
      imageArr.forEach(item=>{
        let obj = {
          s_filePath : BASE_IMAGE_URL + '/S_' +item,
          filePath : BASE_IMAGE_URL + '/' +item
        }
        returnArray.push(obj);
      })
      return returnArray;
    },
    getCaseHandlingDetail() {
      getMethodCommon('/DroneCaseinfo/GetDroneCaseDeal',{caseid: this.id}).then(res => {
        let data = res.result
        this.deal_id = data.info.id;
        this.illegal = res.result.is_illegal;
        // this.handleStatus = data.handle_status_id
        this.caseHandlingData = data.info
        // 已办结
        // if (this.handleStatus === 2) {
        //   this.showSubmit = false
        // }

        this.imageList = [];
        if(res.result.pic_info_list.length>0){
          res.result.pic_info_list.forEach(item=>{
            item.s_filePath = BASE_IMAGE_URL + '/S_' +item.filePath
            item.filePath = BASE_IMAGE_URL + '/' +item.filePath
            this.imageList.push(item)
          })
        }

        this.afterImageList = [];
        if(res.result.after_pic_list.length>0){
          res.result.after_pic_list.forEach(item=>{
            item.s_filePath = BASE_IMAGE_URL + '/S_' +item.filePath
            item.filePath = BASE_IMAGE_URL + '/' +item.filePath
            this.afterImageList.push(item)
          })
        }

        // 证明材料
        this.evidenceFileList = [];
        if(res.result.evidence_file_list.length>0){
          res.result.evidence_file_list.forEach(item=>{
            item.s_filePath = BASE_IMAGE_URL + '/S_' +item.filePath
            item.filePath = BASE_IMAGE_URL + '/' +item.filePath
            this.evidenceFileList.push(item)
          })
        }
        // 罚款通知书
        if(res.result.punish_pic_list.length>0){
          this.punishImageList=this.handleImageArray(res.result.punish_pic_list);
        }
        // 交款通知单
        if(res.result.payment_pic_list.length>0){
          this.paymentImagesList=this.handleImageArray(res.result.payment_pic_list);
        }
        // 政府同意证明
        if(res.result.agree_checkout_pic_list.length>0){
          this.agreeImageList=this.handleImageArray(res.result.agree_checkout_pic_list);
        }
        // 办理手续
        if(res.result.checkout_pic_list.length>0){
          this.checkoutImageList=this.handleImageArray(res.result.checkout_pic_list);
        }

        	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)
							})

							let _this = this;
							_this.videoloaded = true;
				
          }
        //验证图片
        if(data.pic_list){
          this.pic_list = data.pic_list.filter(r => {
            
            let ext = r.substr(r.lastIndexOf(".") + 1);
            if (['png', 'jpg', 'jpeg'].indexOf(ext.toLowerCase()) !== -1) {
              this.pic_show_list.push(this.BASE_IMAGE_URL + '/' + r)
              return r
            }
          })
        }
        //验证视频
        if(data.video_list){
          this.video_list = data.video_list.filter(r => {
            let ext = r.substr(r.lastIndexOf(".") + 1);
            if (['mp4', 'avi', 'wmv', 'mpeg'].indexOf(ext.toLowerCase()) !== -1) {
              return r
            }
          })
        }
        
        this.showLoading = false
      })
    },
    submitCaseHandling() {
      let images = [];
      
      this.imageList.forEach(item=>{
        let img = {
          filePath:item.filePath.substring(item.filePath.indexOf("DroneEnforcement")),
          angle:item.angle !=null ? item.angle : null,
          latitude:item.latitude !=null ? item.latitude : null,
          longitude:item.longitude !=null ? item.longitude : null,
        }
        images.push(img);
      })

      let afterImages = [];
      this.afterImageList.forEach(item=>{
        let img = {
          filePath:item.filePath.substring(item.filePath.indexOf("DroneEnforcement")),
          angle:item.angle !=null ? item.angle : null,
          latitude:item.latitude !=null ? item.latitude : null,
          longitude:item.longitude !=null ? item.longitude : null,
        }
        afterImages.push(img);
      })

      let evidenceImages = [];
      this.evidenceFileList.forEach(item=>{
        let img = {
          filePath:item.filePath.substring(item.filePath.indexOf("DroneEnforcement")),
          angle:item.angle !=null ? item.angle : null,
          latitude:item.latitude !=null ? item.latitude : null,
          longitude:item.longitude !=null ? item.longitude : null,
        }
        evidenceImages.push(img);
      })


      let params = {
        "info": {...this.caseHandlingData},
        "pic_info_list": images,
        "video_list": this.video_list,
        "handle_status_id": this.handle_status_id,
        "is_illegal": this.illegal,
        "after_pic_list":afterImages,
        "evidence_file_list":evidenceImages,
      }
  
      //  todo 新增处理问题解决
      postMethodCommon('/DroneCaseinfo/AddDroneCaseDeal',params).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: 'success'
          });
          // this.$emit('closeBack')
            } else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }
      })
    }
  }
}
</script>

<style scoped>
.nav-forms {
  overflow: scroll;
  width: 96%;
  margin-left: 2%;
  border-radius: 10px;
}

.case-handling {
  padding-bottom: 50px;
}

.case-handling .form-item-label-opt {
  margin: 5px 16px;
  font-size: 14px;
}

.case-handling .form-item {
  margin-top: 10px;
  background-color: #ffffff;
}

.case-handling .form-item .form-item-row {
  border-bottom: 3px solid #fafafa;
}

.case-handling .form-item :nth-last-child(1) {
  border-bottom: none;
}

.case-handling .van-radio-opt {
  margin-bottom: 5px;
}

.case-handling .form-sub-opt {
  padding-bottom: 40px;
  margin-top: 30px;
}

.case-handling .form-sub-bun-opt {
  margin-top: 20px;
}

.case-handling .form-tag-row {
  display: flex;
  align-items: center;
  height: 44px;
  flex-wrap: wrap;
}
.deleteImg{
  position: absolute;
  right: -2px;
  top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deleteVideo{
  position: absolute;
  right: 1px;
  top: 1px;
  z-index: 9;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-theme .el-select{
	width: 100%;
}
.dialog-footer{
	position: absolute;
	bottom: 40px;
	right: 40px;
}
/deep/.el-image-viewer__wrapper{
  z-index: 3000000000!important;
}
/deep/ .el-dialog__wrapper{
  z-index:2 !important;
}

.el-form-item{
    margin-bottom: 15px !important;
}
.el-form-item__error{
    padding-top: 0 !important;
}
::v-deep .el-form-item__label{
    font-size: 12px !important;
    font-weight: normal !important;
}

/deep/ .el-upload {
  width:85px;
  height:112px;
  margin-left:8px;
  line-height:120px;
}
/deep/ .el-empty{
  padding:0px;
  margin:0px;
}

</style>
