<script>
import Map from '@/components/Map/index.vue';
import { getAction } from '../../api/manage';
export default {
  name: "deviceMap",
  components: {
    Map
  },
  data() {
    return {
      devices: [],
      tools: [],
      center: [30.822225,104.099354],
      url: {
        myDepart: "/sys/sysDepart/queryMyDeptTreeList",
        listDevice: "/device/buDevice/list",
        listTools: "/toolSheet/toolSheet/list"
      }
    }
  },
  mounted() {
    this.loadDevices();
    this.loadTools();
  },
  methods: {
    stringToArray(str) {
      if (!str || str === 'null' || str === null || str.includes('null')) return null;
      return str.split(',').map(item => Number(item));
    },
    loadDevices: function () {
      getAction(this.url.listDevice).then(res => {
        if (res.code === 200) {
          this.devices = res.result.records.filter(item => item.latlng!=null).map(item => {
              return {
                id: item.id,
                name: item.deviceName,
                latlng: this.stringToArray(item.latlng)
              }
          })
          console.log(this.devices)
        }
      })
    },
    loadTools: function () {
      getAction(this.url.listTools).then(res => {
        if (res.code === 200) {
          this.tools = res.result.records.filter(item => item.latitude != null && item.longitude != null).map(item => {
            console.log(item)
              return {
                id: item.id,
                name: item.toolId_dictText,
                latlng: [item.latitude, item.longitude]
              }
          })
          console.log(this.tools)
        }
      })
    }
  }
}
</script>

<template>
  <div>
    <Map :devices="devices" :tools="tools" :center="center"></Map>
  </div>
</template>

<style scoped></style>