<template>
<div class="desc-container" style="width:100%;">
  <div class="case-box" >
      <el-divider content-position="left" style="margin-top:24px;">基本信息</el-divider>
      <el-descriptions class="margin-top" :column="3" border size="middle" >
        <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-collection-tag"></i>
            上报时间
          </template>
          {{caseDetail.createtime}}
        </el-descriptions-item>

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

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-collection-tag"></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:150px;height:80px;margin-right:8px;"
              :src="item" 
              fit="cover"
              :preview-src-list="imageList_a">
            </el-image>
        </el-descriptions-item>



      </el-descriptions>
      <el-divider content-position="left">处理信息</el-divider>
      <el-descriptions class="margin-top" :column="2" border size="middle">
              <el-descriptions-item>
                <template slot="label" style="width:200px;">
                 <div style="min-width:80px;height:10px;">
                    <i class="el-icon-tickets"></i>
                    处理人    
                 </div>
                </template>
                <div style="min-width:180px;">
                  {{caseHandleInfo.info.createusername}}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div style="min-width:80px;height:10px;">
                    <i class="el-icon-tickets"></i>
                    处理时间
                  </div>
                </template>
                {{caseHandleInfo.info.createtime}}
              </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">
                  <div style="min-width:80px;height:10px;">
                    <i class="el-icon-tickets"></i>
                    处理措施
                  </div>
                </template>
                {{caseHandleInfo.info.measure_name}}
              </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>
                {{caseHandleInfo.info.registr_number}}
              </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>
                {{caseHandleInfo.info.investigation_result}}
              </el-descriptions-item>


              
              <el-descriptions-item >
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  联系人
                </template>
                {{caseHandleInfo.info.illegal_contact}}
              </el-descriptions-item>

              <el-descriptions-item >
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  联系人联系方式
                </template>
                {{caseHandleInfo.info.illegal_contact_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:150px;height:80px;margin-right:8px;"
                    :src="item" 
                    fit="cover"
                    :preview-src-list="threadImageList_a">
                  </el-image>
            </el-descriptions-item>

            <el-descriptions-item v-if="caseHandleInfo.is_illegal == '否'">
              <template slot="label">
                <i class="el-icon-tickets"></i>
                证明材料
              </template>
               
                  <el-image 
                    v-for="(item,index) in evidenceImageList"
                    :key="index"
                    style="width:150px;height:80px;margin-right:8px;"
                    :src="item" 
                    fit="cover"
                    :preview-src-list="evidenceImageList_a">
                  </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:150px;height:80px;margin-right:8px;"
                  :src="item" 
                  fit="cover"
                  :preview-src-list="threadAfterImageList_a">
                </el-image>
            </el-descriptions-item>

      </el-descriptions>
  </div>



</div>
</template>
<script>
import {getMethodCommon } from "@/api/common";
import {getCaseInfo,getCaseHandleInfo} from "../../../api/forms"
import { postMethodCommon } from '../../../api/common';
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
export default {
  props:['caseDetail'],
  data(){
    return {
      caseHandleInfo:{},
      imageList:[],
      imageList_a:[],
      videoList:[],
      threadImageList:[],
      threadImageList_a:[],
      threadAfterImageList:[],
      threadAfterImageList_a:[],
      backCaseInfo:null,
      playerOptions:[],
    }
  },
  mounted(){
    this.loadDetailCaseInfo();
    this.loadCaseHandleInfo();
  },
  methods:{

      loadDetailCaseInfo(){
        this.imageList = [];
        getCaseInfo({id:this.caseDetail.id}).then(res=>{
          if(res.code == 200){
            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.caseDetail.id}).then(res=>{
          if(res.code == 200){
            this.caseHandleInfo = res.result;
            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.pic_info_list.length>0){
              res.result.pic_info_list.forEach((item,index)=>{
                this.threadImageList.push(item.filePath);  
              })
              
              for(let i=0;i<this.threadImageList.length;i++){
                this.threadImageList_a[i] =BASE_IMAGE_URL+"/"+this.threadImageList[i];
                this.threadImageList[i] =BASE_IMAGE_URL+"/S_"+this.threadImageList[i];
                console.log("现场照片",this.threadImageList[i]);
                
              }
            }
            // 证明材料照片
            if(res.result.evidence_file_list.length>0){
              res.result.evidence_file_list.forEach(item=>{
                this.evidenceImageList.push(item.filePath);
                
              })
            }
            for(let i=0;i<this.evidenceImageList.length;i++){
              this.evidenceImageList_a[i] =BASE_IMAGE_URL+"/"+this.evidenceImageList[i];
              this.evidenceImageList[i] =BASE_IMAGE_URL+"/S_"+this.evidenceImageList[i];
            }


            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];
             
            }

            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);
              })
            }
          }
        })
      }
  },
}
</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-box{



}
</style>