<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)">{{item.title}}</p>
        </el-col>
      </el-row>
    </div>
    <rightEquipmentVue
      :visible.sync="recomposeShow"
      :rowData="rowData"
    />
    <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 { getBaseList } from '@/api/tmn/index.js'
import rightEquipmentVue from './components/rightEquipment.vue';
import MapContainer from './components/mapContainer.vue'
export default {
  name: 'gisShow',
  data() {
    return {
      bottom_left:[{
        title: '在线',
        styleClass: 'radius',
        tmnstatusRunstatus: 'I'
      },{
        title: '运行',
        styleClass: 'radius run',
        tmnstatusRunstatus: 'W'
      },{
        title: '故障',
        styleClass: 'radius error',
        tmnstatusRunstatus: 'E'
      },{
        title: '离线',
        styleClass: 'radius nolive',
        tmnstatusRunstatus: 'O'
        }],
      tmnstatusRunstatus: '',
      search_model:'',
      state: {
        keyWord: ""
      },
      positions: [],
      map: null,
      recomposeShow: false,
      address: '',
      center: [],
      zoom: 12,
      lng: '',
      lat: '',
      rowData: {}
    }
  },
  components: {
    rightEquipmentVue,
    MapContainer
  },
  mounted() { 
    this.getBaseListHandler()
  },
  methods: {
    handlerLeft(item) {
      this.tmnstatusRunstatus = item?.tmnstatusRunstatus
      this.getBaseListHandler()
      // this.positions = this.positions.splice(0,1)
    },
    recomposeShowHandler(flag, item) {
      this.rowData = item
      this.recomposeShow = flag
    },
    async getBaseListHandler() { 
      const res = await getBaseList({
        pageSize: 999,
        tmnstatusRunstatus: this.tmnstatusRunstatus
      })
      this.positions = res?.data
      this.center = [res?.data[0]?.tmnLongitude || 116.397428, res?.data[0]?.tmnLatitude || 39.90923]
    },
    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 = 12
        } else {
          console.log('根据地址查询位置失败');
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
@import './gisShow.scss'
</style>