<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" :offset="2" 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-col :span="4" style="padding-top: 4px;padding-left: 18px">
            <el-button type="primary" size="small" @click="fetchData">立即刷新</el-button>
          </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: 18,
              center: [data.lat, data.lng],
              zoom: 16,
              zoomControl: false,
              attributionControl: false,
              crs: L.CRS.EPSG3857
            })
          } else {
            map = L.map('map', {
              minZoom: 3,
              maxZoom: 18,
              center: [27.75962, 116.06021],
              zoom: 16,
              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 },16)
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .rightcard{
    width: 600px;
    height: 40px;
    z-index: 10000;
    position: absolute;
    /*left:500px;*/
    top: 10px;
    right: 0;
    background-color: #ffffff;
  }
  #map {
    width:100%;
    height:80vh;
  }
</style>