<template>
<div class="desc-container" style="width:1000px;">
  <el-divider content-position="left">基本信息</el-divider>
  <el-descriptions class="margin-top" :column="3" border size="mini">
     <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="mini" v-if="caseDetail.handle_status_id == 0" type="warning">{{caseDetail.handle_status_name}}</el-tag>
      <el-tag size="mini"  v-else-if="caseDetail.handle_status_id == 1">{{caseDetail.handle_status_name}}</el-tag>
      <el-tag size="mini"  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="3" border size="mini">
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              处理人
            </template>
            {{caseHandleInfo.createusername}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              处理时间
            </template>
            {{caseHandleInfo.createtime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              处理措施
            </template>
            {{caseHandleInfo.measure_name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              违法人
            </template>
            {{caseHandleInfo.illegal_contact}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              违法人联系方式
            </template>
            {{caseHandleInfo.illegal_contact_phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              现场情况
            </template>
            {{caseHandleInfo.actual_scene_case}}
          </el-descriptions-item>


        <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              处理结果
            </template>
            {{caseHandleInfo.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>
</div>
</template>
<script>
import {getMethodCommon } from "@/api/common";
import {getCaseInfo,getCaseHandleInfo} from "../../../api/forms"
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:[],
    }
  },
  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.info;
            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++){
              this.threadImageList_a[i] =BASE_IMAGE_URL+"/"+this.threadImageList[i];
              this.threadImageList[i] =BASE_IMAGE_URL+"/S_"+this.threadImageList[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);
}
</style>