<template>
<div>
  <el-descriptions class="margin-top" :column="3" border>

     <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-position"></i>
        案件地址
      </template>
      {{caseDetail.address}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        处理人
      </template>
      {{caseDetail.deal_username}}
    </el-descriptions-item>

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

      <el-tag v-if="caseDetail.handle_status_id == 0" type="warning">{{caseDetail.handle_status_name}}</el-tag>
      <el-tag v-else-if="caseDetail.handle_status_id == 1">{{caseDetail.handle_status_name}}</el-tag>
      <el-tag v-else type="success">{{caseDetail.handle_status_name}}</el-tag>
    </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-s-promotion"></i>
        无人机编号
      </template>
    {{caseDetail.drone_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-date"></i>
        上报时间
      </template>
      {{caseDetail.createtime}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-date"></i>
        开始时间
      </template>
      {{caseDetail.start_time}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-date"></i>
        结束时间
      </template>
      {{caseDetail.end_time}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-time"></i>
        是否逾期
      </template>
       {{caseDetail.case_status_name}}
    </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-if="imageList.length>0"
          style="width: 400px; height: 200px"
          :src="imageList[0]" 
          :preview-src-list="imageList">
        </el-image>
    </el-descriptions-item>
  </el-descriptions>

  
</div>
</template>
<script>
import {getCaseInfo} from "../../../api/forms"
const IMAGE_BASE_URL = process.env.VUE_APP_BASE_IMG_URL;
export default {
  props:['caseDetail'],
  data(){
    return {
      imageList:[],
      videoList:[],
    }
  },
  mounted(){
    this.loadDetailCaseInfo();
  },
  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[i] = IMAGE_BASE_URL+"/"+this.imageList[i];
            }
          }
        })
      }
  },
}
</script>