<template>
  <el-dialog title="详情" :visible.sync="open" width="1000px" append-to-body destroy-on-close :close-on-click-modal="false" :before-close="openClose">
    <el-row>
      <el-col :span="14" style="padding-right: 10px">
        <el-form :model="detailInfo" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="事故名称">
                {{ detailInfo.title }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事故类型">
                {{ $parent.accidentTypeFormatter(detailInfo) }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="具体地址">
                {{ detailInfo.address }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="事故原因">
                {{ $parent.accidentReasonFormatter(detailInfo) }}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="事故时间">
                {{ detailInfo.happenTime }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="事故经过" prop="content">
            <!--<editor :readOnly="true" v-model="detailInfo.content" :min-height="192"/>-->
            <span v-if="detailInfo.content">{{ detailInfo.content }}</span>
            <span v-else>-</span>
          </el-form-item>

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

            <el-col :span="12">
              <el-form-item label="人员伤亡">
                <span v-if="detailInfo.loss == 0">有</span>
                <span v-else-if="detailInfo.loss == 1">无</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.username">{{ detailInfo.username }}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否处理" prop="status">
                <span v-if="detailInfo.status == 0">未处理</span>
                <span v-else-if="detailInfo.status == 1">已处理</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="处理时间" prop="finishTime">
                <span v-if="detailInfo.finishTime">{{ detailInfo.finishTime }}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
          </el-row>

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

      <el-col :span="10">
        <div id="accident-map" style="width: 100%;height: 650px;border: 1px solid"></div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import { getFailure } from "@/api/book/failure";
  import Editor from '@/components/Editor';
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  export default {
    name: "detail-info",
    data(){
        return{
          open: false,
          detailInfo: {},
          gaoMap: null
        }
    },
    components:{
      Editor
    },
    methods:{
      openDetail(id){
        getFailure(id).then(res =>{
          if(res.code == 200){
             this.detailInfo = res.data;
             this.open = true;
             this.initMap();
          }
        })

      },
      initMap(){
        this.$nextTick(() => {
          const path = eval(this.systemSetting.map_center);
          this.gaoMap = new EditorMap(
            "accident-map",
            {
              center: path,
              //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
              zoom: 14.5,
            },
            this
          );
          if(this.detailInfo.longitude){
            this.gaoMap.control = 1;
            this.gaoMap.addDevice({longitude:this.detailInfo.longitude,latitude:this.detailInfo.latitude,deviceName:this.detailInfo.title});
            this.gaoMap.map.setCenter([this.detailInfo.longitude,this.detailInfo.latitude]);
          }
        });
      },
      openClose(){
        this.open = false;
        this.gaoMap.map.destroy();
        this.gaoMap = null;
      }
    },
    computed: {
        ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped>

</style>
