<template>
  <div id="overview" class="app-container">
    <div id="map">
      <!--查询结果Table显示-->
      <div slot="header" class="rightcard" >
        <el-row>
          <el-col :span="3" :offset="1">
            <div style="font-size: 14px;padding-top: 10px;padding-left: 5px">刷新时间</div>
          </el-col>
          <el-col :span="9" style="padding-top: 12px;padding-left: 10px">
            <el-radio-group v-model="refresh" @change="clicktime">
              <el-radio label="5">5秒</el-radio>
              <el-radio label="10">10秒</el-radio>
              <el-radio label="30">30秒</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="4" style="padding-top: 4px;padding-left: 18px">
            <el-button type="primary" size="small" @click="fetchData">立即刷新</el-button>
          </el-col>
          <el-col :span="4" style="padding-top: 10px">
            <label style="font-size: 14px;padding-left: 10px;color: red">{{ sec }}</label>
            <label style="font-size: 14px">秒后刷新</label>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { track } from '@/api/overview'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
  name: 'Track',
  data() {
    return {
      dialogFormVisible: false, // 是否显示编辑框
      refresh: '10',
      showtable: true,
      id: '',
      marker: null,
      label: null,
      baselayer: [],
      map: null,
      total: 0, // 数据总数
      sec: 10, // 数据总数
      fullscreenLoading: false, // 全屏加载动画
      cartypelist: [], // 类型列表
      deptlist: [] // 类型列表
    }
  },
  watch: {
    sec(val) {
      if (val === 0) {
        this.sec = Number(this.refresh)
        this.fetchData()
      }
    }
  },
  mounted() {
    if (this.$route.query) {
      this.id = this.$route.query.id
    }
    this.initMap()
    this.fetchData()
    this.timer = setInterval(() => {
      this.sec--
    }, 1000)
  },
  methods: {
    initMap() {
      track(this.id).then(response => {
        var data = response.data
        var map
        if (data.lat !== '') {
          map = L.map('map', {
            minZoom: 3,
            maxZoom: 14,
            center: [data.lat, data.lng],
            zoom: 12,
            zoomControl: false,
            attributionControl: false,
            crs: L.CRS.EPSG3857
          })
        } else {
          map = L.map('map', {
            minZoom: 3,
            maxZoom: 11,
            center: [27.75962, 116.06021],
            zoom: 12,
            zoomControl: false,
            attributionControl: false,
            crs: L.CRS.EPSG3857
          })
        }
        this.map = map // data上需要挂载
        window.map = map
        this.baselayer.push(L.tileLayer(
          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
        ).addTo(map))
        this.baselayer.push(L.tileLayer(
          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
        ).addTo(map))
      })
    },
    clicktime() {
      this.sec = Number(this.refresh)
    },
    fetchData() {
      track(this.id).then(response => {
        var data = response.data
        if (this.marker != null) {
          this.marker.remove()
          this.label.remove()
        }
        var Icon
        if (data.status === '') {
          return
        } else if (data.status === '离线') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/car-offline.png'),
            iconSize: [40, 40]
          })
        } else if (data.status === '超时') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/car-timeout.png'),
            iconSize: [40, 40]
          })
        } else if (data.status === '停车') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/car-stop.png'),
            iconSize: [40, 40]
          })
        } else if (data.status === '行驶') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/car-online.png'),
            iconSize: [40, 40]
          })
        } else if (data.status === '报警') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/car-alarm.png'),
            iconSize: [40, 40]
          })
        }
        var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + data.description + '</div>' +
          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + data.carTypeName + '</div>' +
          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + data.deptName + '</div>' +
          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + data.status + '</div>' +
          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + data.lng + ' , ' + data.lat + '</div>' +
          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + data.upTime + '</div>' +
          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + data.speed + '(km/h)</div></div>'
        var myIcon = L.divIcon({
          html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + data.deptName + '_' + data.description + '</div>',
          className: '',
          iconSize: [100, 15]
        })
        this.label = L.marker([data.lat, data.lng], { icon: myIcon }).addTo(this.map)
        var popup = L.popup().setContent(str)
        this.marker = L.marker([data.lat, data.lng], {
          icon: Icon,
          slug: data,
          rotationAngle: data.direction
        }).addTo(this.map).bindPopup(popup)
        this.map.setView({ lat: data.lat, lng: data.lng })
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .rightcard{
    width: 600px;
    height: 40px;
    z-index: 10000;
    position: absolute;
    left:500px;
    top:20px;
    background-color: rgba(238, 238, 238, 0.93);
  }
  #map {
    width:100%;
    height:80vh;
  }
</style>