<template>
  <page-full-content>
    <Map @clickCarItem="clickCarItem" :idInfo="idInfo" @move="(e) => (moveValue = e)" ref="refMap">
      <CarPathHistory ref="pathHistory" :idInfo="idInfo" />
    </Map>
    <div class="tree-car">
      <TreeCar :carId="carId" @changeCar="changeCar" :showVideos="showVideos" :idVal="idVal" />
    </div>
    <div class="car-sta">
      <VehicleStatistics @rangEv="rangEv" :idInfo="idInfo" />
    </div>
  </page-full-content>
</template>

<script>
import { PageFullContent } from '@/components'
import Map from './Map/index.vue'
import VehicleStatistics from './components/VehicleStatistics.vue'
import TreeCar from './components/TreeCar.vue'
import { Slider } from 'ant-design-vue'
import CarPathHistory from './components/CarPathHistory.vue'
import Log from '../monitor/job/log.vue'
// import { listUser, delUser, changeUserStatus, deptTreeSelect } from '@/api/system/user'
// http://183.66.101.92:81/logisticsApi/vehicle/real_time_video_url?channel=2&thirdVehicleId=262

export default {
  components: {
    PageFullContent,
    Map,
    VehicleStatistics,
    TreeCar,
    Slider,
    CarPathHistory,
  },
  data() {
    return {
      carId: '',
      idInfo: {},
      showRang: '',
      isStart: false,
      isPause: true,
      showVideos: false,
      idVal: {},
    }
  },
  computed: {
    carIds() {
      return this.$route.query.id
    },
  },
  methods: {
    $disabledFooter() {
      return true
    },
    clickCarItem(val) {
      this.idVal = val
      this.showVideos = true
      this.carId = val.cqVehicleId
      this.idInfo = {
        meta: val,
        title: val.plateNumber,
        key: 'car#' + val.id,
      }
      this.$refs.pathHistory.clearAll()
    },
    changeCar(node) {
      this.idInfo = node
      this.$refs.pathHistory.clearAll()
      this.$refs.refMap.callback((that) => {
        if (node.key.indexOf('dept') >= 0) {
          that.map.setCenter([node.meta.lng, node.meta.lat])
        } else {
          that.map.setCenter([node.meta.ssjgwd, node.meta.ssjgjd])
        }
      })
    },
    rangEv(val) {
      this.$refs.refMap.callback((that) => {
        if (val == '测距') {
          that.mouseTool.rule()
        } else if (val == '面积') {
          that.mouseTool.measureArea({
            strokeColor: '#80d8ff',
            fillColor: '#80d8ff',
            fillOpacity: 0.3,
            //同 Polygon 的 Option 设置
          })
        } else {
          that.mouseTool.close(true)
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.car-sta {
  position: absolute;
  top: 20px;
  right: 44px;
  z-index: 99;
}
.tree-car {
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 99;
  pointer-events: none;
}
</style>
