<template>
  <div class="content">
    <div class="map" id="map"></div>
    <div class="topTool">
      <div class="form">
        <el-select v-model="search.deviceType" placeholder="Select" style="width: 240px">
          <el-option v-for="item in dic.types" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-select v-model="value" placeholder="Select" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

       
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import common from '@/utils/common';
import map from '@/api/largeScreen/mapOpt';
import request from '@/utils/request';

var dic = reactive({
  groups: [],
  types: [],
  imeis: []
});

var search = ref({
  groupId: '',
  deviceType: '',
  deviceImei: ''
});

var points = ref([]);
var fens = ref([]);

function getPoints() {
  let promise = request({
    url: '/api/largeScreen/getDeviceLocationInfo',
    method: 'get',
    params: search
  });

  promise.then((res) => {
    if (res) {
      if (res.code && res.code == 200) {
        var array = res.data;

        for (let i = 0; i < array.length; i++) {
          let v = array[i];
          
          let json={
            deviceId: v.deviceId,
            deviceName: v.deviceName,
            longitude: v.longitude,
            latitude: v.latitude,
            fenceId: null
          };

          if (v.fenceInfo) {
            fens.value.find((item) => {
              return item.id == v.fenceInfo.id;
            });
            json.fenceId=v.fenceInfo.id;
            fens.value.push(v.fenceInfo);
          }
          points.value.push(json);
          

        }
      } else {
        console.error('接口getDeviceLocationInfo出现了未知的异常', res);
      }
    } else {
      console.error('接口getDeviceLocationInfo出现了未知的异常', res);
    }
  });
}

function getTypes(){
  let promise = request({
    url: '/api/deviceType/all',
    method: 'get'
  });

  promise.then(res=>{
    if(res && res.code && res.code==200){
      dic.types=res.data.map(v=>{
        return {
          value:v.id,
          label:v.typeName
        }
      });
    }
  });
}

function getGroups(){
  let promise = request({
    url: '/api/device/group/list',
    method: 'get',
    params:{
      status:1,
      isDeleted:0,
      pageNum:1,
      pageSize:9999
    }
  });

  promise.then(res=>{
    if(res && res.code && res.code==200){
      dic.groups=res.data;
    }
  });
}



onMounted(() => {
  debugger;
  map.initMap();
  getTypes();
  getGroups();

});
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
}

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

.topTool {
  position: absolute;
  width: 33%;
  height: 200px;
  z-index: 9999999999999999;
  left: 50%;
  background: #e2e2e2;
  top: 100px;
}
</style>
