<template>
    <el-dialog title="详情" :visible.sync="detailOpen" width="1200px"  append-to-body destroy-on-close :close-on-click-modal="false">
      <el-row>
        <el-col :span="14">
            <el-form label-width="120px">
                <el-row>
                    <el-col :span="11"> 
                        <el-form-item label="事故名称:" >
                          <span v-if="detailInfo.troubleName">{{ detailInfo.troubleName }}</span>
                          <span v-else>-</span>
                        </el-form-item>

                        <el-form-item label="事故原因:">
                          <span v-if="detailInfo.troubleReason">{{ detailInfo.troubleReason }}</span>
                          <span v-else>-</span>
                        </el-form-item>

                        <el-form-item label="责任单位:" >
                          <span v-if="detailInfo.responsibleUnit">{{ detailInfo.responsibleUnit }}</span>
                          <span v-else>-</span>
                        </el-form-item>

                        <el-form-item label="是否人员伤亡:" >
                          <span v-if="detailInfo.isCasualties == '1'">是</span>
                          <span v-else-if="detailInfo.isCasualties == '2'">否</span>
                          <span v-else>-</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">

                      <el-form-item label="事故类型:" >
                        <span v-if="detailInfo.troubleType == '1'">安全生产事故</span>
                        <span v-else-if="detailInfo.troubleType == '2'">非生产安全事故</span>
                        <span v-else>-</span>
                      </el-form-item>

                      <el-form-item label="事故地点:" >
                        <span v-if="detailInfo.troubleLocation">{{ detailInfo.troubleLocation }}</span>
                        <span v-else>-</span>
                      </el-form-item>

                      <el-form-item label="责任人员:" >
                        <span v-if="detailInfo.responsiblePeople">{{ detailInfo.responsiblePeople }}</span>
                        <span v-else>-</span>
                      </el-form-item>

                      <el-form-item label="是否处理:" > 
                        <span v-if="detailInfo.isDeal == '1'">已处理</span>
                        <span v-else-if="detailInfo.isDeal == '2'">未处理</span>
                        <span v-else>-</span>
                      </el-form-item> 
                    </el-col>
                </el-row>
                <el-row v-if="detailInfo.isCasualties == '1'">

                  <el-col :span="11">
                    <el-form-item label="受伤人数:" >
                      <span v-if="detailInfo.injuryNum">{{ detailInfo.injuryNum }}</span>
                      <span v-else>-</span>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12"> 
                    <el-form-item label="死亡人数:" >
                      <span v-if="detailInfo.deathNum">{{ detailInfo.deathNum }}</span>
                      <span v-else>-</span>
                    </el-form-item> 
                  </el-col>

                </el-row>
 
                <el-row>
                  <el-col :span="23">
                    <el-form-item label="处理完成时间:" >
                    <span v-if="detailInfo.dealDate">{{ detailInfo.dealDate }}</span>
                    <span v-else>-</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row>
                  <el-col :span="23">
                    <el-form-item label="简要经过:" >
                    <span v-if="detailInfo.briefProcess">{{ detailInfo.briefProcess }}</span>
                    <span v-else>-</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row>
                  <el-col :span="23">
                    <el-form-item label="备注信息:" >
                    <span v-if="detailInfo.remarks">{{ detailInfo.remarks }}</span>
                    <span v-else>-</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="所属企业:" >
                    <span v-if="detailInfo.enterpriseName">{{ detailInfo.enterpriseName }}</span>
                    <span v-else>-</span>
                    </el-form-item>
                  </el-col>
                </el-row> 
            </el-form> 
        </el-col>

        <el-col :span="9">
          <div style="width: 100%;height: 390px; border: 1px solid rgb(218, 213, 213);margin-bottom: 10px;">
            <div style="width: 100%;height: 100%" id="troubleContainer"></div>
          </div>
        </el-col>

      </el-row> 
    </el-dialog> 
  </template>
  
  <script> 
    import { getTrouble} from "@/api/standingBook/trouble"; 
    import { EditorMap } from "@/utils/mapClass/getPath.js";
    export default {
      name: "detail-info",
      data(){
          return{ 
            detailInfo: {},
            enterpriseName:"",
            detailOpen: false,
            devicePos: [],
            map: null,
            reasonOptions:[],
          }
      },
    created() {   
    this.getDicts("t_trouble_reason").then(response => {
      this.reasonOptions = response.data;
    });

    },
      methods:{ 
        statusFormat2(row, column) {
        return this.selectDictLabel(this.reasonOptions, row.troubleReason);
        },

        getDetailInfo(id){
            getTrouble(id).then(response => { 
                
                this.detailInfo = response.data;
                this.detailInfo.troubleReason = this.statusFormat2(this.detailInfo,0);
                this.devicePos = [this.detailInfo.longitude, this.detailInfo.latitude]; 
                this.detailOpen = true;
                
                this.$nextTick(() => {
                this.map = new EditorMap("troubleContainer", {}, this);
                this.map.addDevice({ path: this.devicePos });
                this.map.nowMouseTarget = null;
                this.map.mousetoolClose(false);
                });
            });
        }
      }
    }
  </script>
  
  <style scoped>
  
  </style>
  