<template>
  <div style="width:1020px;height:428px;">
      <div class="house-detail">
    <div class="title" >
      <span style="float:left;color:#fff;margin-left:30px;">案件信息</span>
      <span style="float:right;color:#fff;cursor:pointer;" @click="$emit('close')">
        <el-icon><Close /></el-icon>
      </span>
    </div>
    <div class="container" v-if="loadEnd">
      <p v-if="!loadEnd">暂无案件信息</p>
    <p style="color:#fff;text-align:left;margin:12px 0px;">案件基本信息</p>
    <el-descriptions
      class="margin-top"
      :column="3"
      :size="'mini'"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            案件编号
          </div>
        </template>
       {{historycaseinfo.info.case_no}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            上报事件
          </div>
        </template>
       {{historycaseinfo.info.identification_time}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            案件状态
          </div>
        </template>
       {{historycaseinfo.info.handle_status_name}}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            所属区划
          </div>
        </template>
       {{historycaseinfo.info.countyname}}/{{historycaseinfo.info.streetname}}/{{historycaseinfo.info.communityname}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            案件类型
          </div>
        </template>
       {{historycaseinfo.info.typename}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            案件描述
          </div>
        </template>
       {{historycaseinfo.info.case_description}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            案件图片
          </div>
        </template> 

         <el-image
          style="width:200px;height:100px;margin-right:12px;"
          :preview-src-list="['http://60.213.14.14:6070/'+item]"
          :initial-index="4"
          fit="cover"
          v-for="(item,index) in historycaseinfo.pic_list" :key="index" 
          :src="'http://60.213.14.14:6070/'+item"  width="100px" height="100px"
        />


      </el-descriptions-item>
    </el-descriptions>
    <p style="color:#fff;text-align:left;margin:12px 0px;">案件处理信息</p>
    <el-descriptions
      v-if="loadEnd2"
      class="margin-top"
      :column="3"
      :size="'mini'"
      border
      
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            处理人
          </div>
        </template>
       {{historycasedealinfo.info.createusername}}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            处理时间
          </div>
        </template>
       {{historycasedealinfo.info.createtime}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            处理结果
          </div>
        </template>
       {{historycasedealinfo.info.result_name}}
      </el-descriptions-item>




      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            案件图片
          </div>
        </template> 

        <el-image
          style="width:200px;height:100px;margin-right:12px;"
          :preview-src-list="['http://60.213.14.14:6070/'+item.filePath]"
          :initial-index="4"
          fit="cover"
          v-for="(item,index) in historycasedealinfo.pic_info_list" :key="index" :src="'http://60.213.14.14:6070/'+item.filePath"
        />



      </el-descriptions-item>

      



    </el-descriptions>
    </div>
  </div>
  </div>

</template>
<script>
import axios from 'axios'
export default {
  name:"HouseDetail",
  props:["currentHistoryCaseId"],
  watch:{
  
  },
  data(){
    return {
      XToken:null,
      historycaseinfo:{
        info:{}
      },
      historycasedealinfo:{
        info:{}   
      },
      loadEnd:false,
      loadEnd2:false
    }
  },
  created(){
    this.getToken();
  },
  methods:{
      getToken(){
        axios.post(
          "http://60.213.14.14:6050/api/Check/Login",
          {
            account: "System",
            appKey: "openauth",
            password: "HopetryA1406"
          },
        ).then(res=>{
          console.log("login",res);
          if(res.data.code == 200){
            this.XToken = res.data.token;
            console.log("X-Token",this.XToken);
            this.getCaseInfo(this.currentHistoryCaseId);
            this.getDealInfo(this.currentHistoryCaseId);
          }
        })
      },
      getCaseInfo(id){
        axios({
          method:"GET",
          url:"http://60.213.14.14:6050/api/DroneScreenDisplay/GetCaseInfo",
          params:{id:id},
          headers:{"X-Token":localStorage.getItem("XToken")}
        }).then(res=>{

         if( res.data.result != null){
            this.historycaseinfo = res.data.result;
            this.loadEnd = true
            console.log("historycase",res);
         }
        })
      },
      getDealInfo(id){
        axios({
          method:"GET",
          url:"http://60.213.14.14:6050/api/DroneCaseinfo/GetDroneCaseDeal",
          params:{caseid:id},
          headers:{"X-Token":this.XToken}
        }
        ).then(res=>{
          if(res.data.result.info != null){

            this.historycasedealinfo = res.data.result;
            this.loadEnd2 = true
            console.log("historycase",res);
          }else{
            
          }
          
        })
      }
  }
}
</script>
<style scoped>
.house-detail{
  width:1000px;
  height:490px;
  padding:12px;
  background:url(/images/cim/leftbg.png);
  background-size:1026px 622px;
}

.title{
  cursor:move;
  width:1000px;height:40px;
  background:url(/images/cim/titlebg.png);
  background-repeat: no-repeat;
}

.container{
  max-height:440px;
  overflow:auto;
  color:#fff;
  font-weight:400;
  border:1px solid #0893FF;
  padding:8px;

}
td{
   color:#fff;
  font-weight:400;
  font-size:13px;
}
::v-deep .el-descriptions{

}
::v-deep .el-descriptions__body{
  background:none;
  color:#fff;
  font-weight: 400;
}
::v-deep .el-descriptions__label.el-descriptions__cell.is-bordered-label{
  background:none;
  color:#fff;
  font-weight: 400;
}


::v-deep .el-descriptions__cell{
	color:#fff!important;
} 
::v-deep .el-descriptions__content{
	color:#fff!important;
}

::v-deep .is-bordered-content{
	color:#fff!important;
}

::v-deep .el-descriptions__content .el-descriptions__cell .is-bordered-content{
	color:#fff!important;
}
</style>