<template>
  <el-dialog title="详情" :z-index="9999" :visible.sync="detailOpen" width="1200px" append-to-body destroy-on-close :close-on-click-modal="false">
   <el-row>
     <el-col :span="14">
       <div class="detail-title">事件信息</div>
       <el-form label-width="100px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="名称">
               <span v-if="detailInfo.title">{{ detailInfo.title }}</span>
               <span v-else>-</span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="上报人">
               <span v-if="detailInfo.nickName">{{ detailInfo.nickName }}</span>
               <span v-else>-</span>
             </el-form-item>
           </el-col>
         </el-row>

         <el-row>
           <el-col :span="12">
             <el-form-item label="上报时间">
               <span v-if="detailInfo.reportTime">{{ detailInfo.reportTime }}</span>
               <span v-else>-</span>
             </el-form-item>
           </el-col>

           <el-col :span="12">
             <el-form-item label="地址">
               <span v-if="detailInfo.address">{{ detailInfo.address }}</span>
               <span v-else>-</span>
             </el-form-item>
           </el-col>
         </el-row>

         <el-row>
           <el-col :span="12">
             <el-form-item label="描述">
               <span v-if="detailInfo.description">{{ detailInfo.description }}</span>
               <span v-else>-</span>
             </el-form-item>
           </el-col>

           <el-col :span="12">
             <el-form-item label="照片">
               <el-image v-if="detailInfo.photoUrl" :src="detailInfo.photoUrl" :preview-src-list="[detailInfo.photoUrl]" :z-index="10000" style="width: 100px;height: 100px;"></el-image>
               <span v-else>-</span>
             </el-form-item>
           </el-col>
         </el-row>

         <el-form-item label="事件总结" v-if="detailInfo.responseStatus == '1'">
           <span v-if="detailInfo.eventSummary">{{ detailInfo.eventSummary }}</span>
           <span v-else>-</span>
         </el-form-item>

         <el-form-item label="备注">
           <span v-if="detailInfo.remarks">{{ detailInfo.remarks }}</span>
           <span v-else>-</span>
         </el-form-item>
       </el-form>

       <div>
         <div class="detail-title">处置步骤</div>

         <el-timeline class="detail-step" :style="{ height: detailInfo.photoUrl ? '200px' : '300px'}" :reverse="false">
           <el-timeline-item
             v-for="(activity, index) in stepList"
             :key="index"
             :timestamp="activity.disposeTime">
             <div><span style="font-weight: 700">处置人: </span>{{ activity.nickName }}</div>
             <div><span style="font-weight: 700">处置内容: </span>{{activity.disposeContent}}</div>
           </el-timeline-item>
         </el-timeline>

       </div>

     </el-col>
     <el-col :span="10">
       <div id="event_map" style="width: 100%;height: 630px;"></div>
     </el-col>
   </el-row>
  </el-dialog>
</template>

<script>
  import { getResponse } from "@/api/emergency/response";
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  import { stepListInfo } from "@/api/emergency/step";
  export default {
    name: "detail-info",
    data(){
        return{
          detailOpen: false,
          detailInfo:{},
          stepList: []
        }
    },
    methods:{
        getDetailInfo(responseId){
          getResponse(responseId).then(res =>{
            if(res.code == 200){
                this.detailInfo = res.data;
                this.detailOpen = true;
                this.initMap();
                this.getStepInfo(responseId);
            }
          })
        },
        initMap(){
          this.$nextTick(() => {
              const path = eval(this.systemSetting.map_center);
              let map = new EditorMap(
                "event_map",
                {
                  center: path,
                  //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
                  zoom: 14.5,
                },
                this
              );
            if(this.detailInfo.longitude){
              map.control = 1;
              map.addDevice(this.detailInfo);
              map.map.setCenter([this.detailInfo.longitude,this.detailInfo.latitude])
            }
          });
        },
        getStepInfo(responseId){
          stepListInfo({responseId:responseId}).then(res =>{
            if(res.code == 200){
                this.stepList = res.data;
            }
          })
        }
    },
    computed: {
        ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped lang="scss">
  .detail-title{
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .detail-step{
    overflow-y: auto;
    padding: 0px 9px;
    &::-webkit-scrollbar {
      width: 3px;
      background: #dfe4ed;
      position: absolute;
      top: 0;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      background: #cccccc;
      border-radius: 5px;
    }
  }

</style>
