<template>
    <div class="bottle-spread-home">
      <div :class="isBottle?'bottle-button active':'bottle-button'" @click="bottleCheck">
        <img src="@/assets/image/bottle-mark-button.png"/>
        <span>气瓶</span>
      </div>

      <div :class="isStation?'station-button active':'station-button'" @click="stationCheck">
        <img src="@/assets/image/home-work-button.png"/>
        <span>储配站</span>
      </div>
      <!--<el-button class="bottle-button">气瓶</el-button>
      <el-button class="station-button">储配站</el-button>-->
      <div id="map"></div>
    </div>
</template>

<script>
  import { EditorMap } from "@/utils/mapClass/mapbigwindow";
  import { mapGetters, mapActions } from "vuex";
  import { gasStorageStationList } from "@/api/gasBottleTrack/gasHolderStationManage";
  import { bottleInfoList } from "@/api/gasBottleTrack/gasBottleManage";
  export default {
    name: "bottle-spread",
    data(){
      return{
        map: null,
        isBottle: true,
        isStation: false,
        bottleMarks: [],
        stationMarks: []
      }
    },
    computed: {
      ...mapGetters(["systemSetting"]),
    },
    mounted(){
      this.initMap();
      this.getBottleInfoList();
      this.getStationInfoList();
    },
    methods:{
      initMap(){
        const path = eval(this.systemSetting.map_center);
        this.map = new EditorMap(
          "map",
          {
            center: path,
            // mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
            mapStyle: "amap://styles/4651b4007b4adfcf5015dd154459ab46",
            zoom: 14.5,
          },
          this,
        );
      },
      //地图初始化气瓶
      initBottleMark(data){
        data.forEach(item =>{
          let markData = {longitude:item.longitude,latitude:item.latitude,iconType:"1000",nickName:item.bottleCode}
          this.map.control = '2';
          let bottleMark = this.map.addDevice(markData);
          this.bottleMarks.push(bottleMark);
        })
      },
      //地图初始化储配站
      initStationMark(data){
        data.forEach(item =>{
          let markData = {longitude:item.longitude,latitude:item.latitude,iconType:"1001",stationName:item.stationName};
          this.map.control = '2';
          let stationMark = this.map.addDevice(markData);
          this.stationMarks.push(stationMark);
        })
        //默认隐藏
        this.map.allDevice['1001'].forEach(item =>{
          item.hide();
        })
      },
      //查询气瓶信息
      getBottleInfoList(){
        bottleInfoList().then(res =>{
          if(res.code == 200){
           this.initBottleMark(res.data);
          }
        })
      },
      //查询储配站信息
      getStationInfoList(){
        gasStorageStationList().then(res =>{
          if(res.code == 200){
            this.initStationMark(res.data);
          }
        })
      },
      bottleCheck(){
        if(this.isBottle){
          this.isBottle = false;
          this.map.allDevice['1000'].forEach(item =>{
            item.hide();
           })
        }else{
          this.isBottle = true;
          this.map.allDevice['1000'].forEach(item =>{
              item.show();
          })
        }

      },
      stationCheck(){
        if(this.isStation){
          this.isStation = false;
          this.map.allDevice['1001'].forEach(item =>{
            item.hide();
          })
        }else{
          this.isStation = true;
          this.map.allDevice['1001'].forEach(item =>{
            item.show();
          })
        }
      },
    }
  }
</script>

<style scoped lang="scss">

  .bottle-spread-home{
    height: 100vh;
  }

  #map{
    height: 100%;
    width: 100%;
  }

  .station-button{
    text-align: center;
    padding: 7px 0px;
    width: 99px;
    height: 40px;
    border-radius: 2px;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.22);
    border: 1px solid #cccccc;
    position: fixed;
    z-index: 9;
    top: 59px;
    left: 333px;
    color: #1890FF;
    cursor: pointer;
    img{
      position: relative;
      top: 3px;
      margin-right: 3px;
      height: 21px
    }
  }

  .bottle-button{
    text-align: center;
    padding: 9px 0px;
    width: 99px;
    height: 40px;
    border-radius: 2px;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.22);
    border: 1px solid #cccccc;
    position: fixed;
    z-index: 9;
    top: 59px;
    left: 217px;
    color: #1890FF;
    cursor: pointer;
    img{
      position: relative;
      top: 3px;
      margin-right: 3px;
    }
  }

  .active{
   //background-image: url("~@/assets/image/dg.png");
    background-repeat: no-repeat;
    background-position: top right;
  }
</style>
