<template>
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body destroy-on-close :close-on-click-modal="false">
    <el-row>
      <el-col :span="14">
        <el-form label-width="140px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="场站名称">
                <span>{{ detailInfo.siteStationName }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="场站类型">
                <span>{{ $parent.siteStationFormatte(detailInfo) }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="厂站用途">
            <span>{{ detailInfo.stationDetail }}</span>
          </el-form-item>

          <el-form-item label="场站图片">
            <el-image v-if="detailInfo.pictureAddress" :src="detailInfo.pictureAddress" :preview-src-list="[detailInfo.pictureAddress]" :z-index="9999" style="width: 100px;height: 100px;"></el-image>
            <span v-else>-</span>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item label="详细地址">
                <span>{{ detailInfo.address }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="启动时间">
                <span>{{ detailInfo.enableTiem }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="负责人">
                <span>{{ detailInfo.contacts }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="负责人电话">
                <span>{{ detailInfo.phone }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="气源种类">
                <span>{{$parent.gasSourceFormatte(detailInfo) }}</span>
              </el-form-item>
            </el-col>

           <!-- <el-col :span="12">
              <el-form-item label="最大储气量(m³/t)">
                <span>{{ detailInfo.bigStorage }}</span>
              </el-form-item>
            </el-col>-->

            <el-col :span="12">
              <el-form-item label="最大供气量(m³/d)">
                <span>{{ detailInfo.bigProvide }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="12">
              <el-form-item label="危险源级别">
                <span>{{ $parent.dangerousLevelFormatte(detailInfo)}}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="危险源名称">
                <span>{{ detailInfo.dangerousName }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <!--<el-row>

            <el-col :span="12">
              <el-form-item label="储罐容积">
                <span>{{ detailInfo.volume}}</span>
              </el-form-item>
            </el-col>
          </el-row>-->
        </el-form>
      </el-col>
      <el-col :span="10">
        <div id="stat_map" style="width: 100%;height: 550px;border: 1px solid"></div>
      </el-col>
    </el-row>

  </el-dialog>

</template>

<script>
  import { getInfo } from "@/api/baseinfo/stationInfo";
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  export default {
    name: "detail-info",
    data(){
      return{
        open: false,
        detailInfo: {},
        title: "",
      }
    },

    methods: {
      getDetailInfo(siteStationId){
        getInfo(siteStationId).then(response => {
          this.detailInfo = response.data;
          this.title = "场站信息详情";
          this.open = true;
          this.initMap();
        });
      },
      initMap(){
        this.$nextTick(() => {
            const path = eval(this.systemSetting.map_center);
            let map = new EditorMap(
                "stat_map",
                {
                  center: path,
                  //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
                  zoom: 14.5,
                },
                this
             );
            if(this.detailInfo.longitude){
              map.control = 1;
              map.addDevice({longitude:this.detailInfo.longitude,latitude:this.detailInfo.latitude,deviceName:this.detailInfo.siteStationName});
              map.map.setCenter([this.detailInfo.longitude,this.detailInfo.latitude])
            }
        });
      }
    },
    computed: {
      ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped>

</style>
