<template>
  <div style="width: 100%;height:100%">
    <map-container
      :center="center"
      :zoom="zoom"
      @handlerRecomposeShow="recomposeShowHandler"
      :positions="positions"
    />
    <div class="left">
      <el-row :getters="20">
        <el-col
          :span="4"
          v-for="item in bottom_left"
          :key="item.title"
          class="item_style"
        >
          <span :class="item.styleClass"></span>
          <p @click="handlerLeft">{{item.title}}</p>
        </el-col>
      </el-row>
    </div>
    <rightEquipmentVue :visible.sync="recomposeShow"/>
    <div class="input-search">
      <el-input class="inpu" clearable placeholder="请输入你要定位的地址" v-model="address">
      </el-input>
      <el-button type="primary" @click="searchMap()" class="position">搜索</el-button>
  </div>
  </div>
</template>
<script>
  import rightEquipmentVue from './components/rightEquipment.vue';
  import MapContainer from './components/mapContainer.vue'
  export default {
    name: 'gisShow',
    data() {
      return {
        bottom_left:[{
          title: '在线',
          styleClass: 'radius'
        },{
          title: '运行',
          styleClass: 'radius run'
        },{
          title: '故障',
          styleClass: 'radius error'
        },{
          title: '告警',
          styleClass: 'radius waring'
        },{
          title: '离线',
          styleClass: 'radius nolive'
        }],
        search_model:'',
        state: {
          keyWord: ""
        },
        positions: [{
          lng: 115.857194, 
          lat: 34.041573
        },{
          lng: 115.850, 
          lat: 34.041573
        }],
        map: null,
        recomposeShow: false,
        address: '',
        center: [115.857193,34.041573],
        zoom: 16,
        lng: '',
        lat: ''
      }
    },
    components: {
      rightEquipmentVue,
      MapContainer
    },
    methods:{
      handlerLeft() {
        this.positions = this.positions.splice(0,1)
      },
      recomposeShowHandler(flag) {
        this.recomposeShow = flag
      },
      searchMap() {
        let that = this;
        let address = this.address;
        var geocoder = new AMap.Geocoder({
          city: "", //城市设为北京，默认：“全国”
        });
        geocoder.getLocation(address, function(status, result) {
          if (status === 'complete' && result.geocodes.length) {
            var lnglat = result.geocodes[0].location;
            that.center = [lnglat.lng, lnglat.lat]
            that.lng = lnglat.lng;
            that.lat = lnglat.lat;
            that.markers = [{
              position: that.center,
            }]
            that.zoom = 11
          } else {
            console.log('根据地址查询位置失败');
          }
        });
      },
      getCoordinate(data) {
        console.log("getCoordinate:", data)
      },
    }
  };
</script>
<style lang="scss" scoped>
@import './gisShow.scss'
</style>