<template>
  <el-dialog title="设备详情" :visible.sync="detailOpen" width="1000px" append-to-body destroy-on-close :close-on-click-modal="false">
    <el-row>
      <el-col :span="14">
        <el-form label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备编号">
                <span>{{ detailInfo.number }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="设备类型">
                <span v-if="detailInfo.type">{{ detailInfo.type }}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="所属厂家">
                <span v-if="detailInfo.company">{{ $parent.companyFormat(detailInfo) }}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="安装位置">
                <span>{{ detailInfo.position }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="上报状态">
                <span v-if="detailInfo.reportStatus">{{ $parent.deviceStatusFormat(detailInfo) }}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>

            <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="24">
              <el-form-item label="上报参数">
                <span v-if="detailInfo.reportParam">{{ detailInfo.reportParam }}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-col>

      <el-col :span="10">
        <div id="monitor_dev_map" style="width: 100%;height: 400px;border: 1px solid"></div>
      </el-col>
    </el-row>

  </el-dialog>
</template>

<script>
  import { getData } from "@/api/gasdata/data";
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  export default {
    name: "detail-info",
    data(){
        return{
          detailOpen: false,
          detailInfo: {}
        }
    },
    methods:{
      openDetail(gasId){
        this.detailOpen = true;
        this.getGasData(gasId);
      },
      getGasData(gasId){
        getData(gasId).then(res =>{
          if(res.code == 200){
            this.detailInfo = res.data;
            this.initMap();
          }
        })
      },
      initMap(){
        this.$nextTick(() => {
          const path = eval(this.systemSetting.map_center);
          let map = new EditorMap(
            "monitor_dev_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])
          }
        });
      }
    },
    computed: {
        ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped>

</style>
