<template>
  <div class="battle-warp">
    <div class="map-card-wrap map">
      <div class="map-card-wrap__info map">
        <div class="item-header" style="padding: 3px 15px;border-color: #dddddd;">
          <div class="text-bold">{{ queryTruckInfo.carNumber }}<span class="text-normal">({{ queryTruckInfo.linked === 1 ? '其他' : '自营' }})</span></div>
          <div><span class="color-blue">{{ truckInfo.uploadTime || '-' }}</span></div>
        </div>
        <div class="label item-info__user" style="padding-left: 0;margin: 10px 15px;padding-bottom: 10px;border-bottom: 1px solid #f3f4f5;display: flex;justify-content: space-between;align-items: center;" v-if="truckInfo.hasOwnProperty('truckDriverList') && truckInfo.truckDriverList.length > 0">
          <div class="driver-wrap" style="width: 85%;">
            <div v-for="(driver, driverIndex) in truckInfo.truckDriverList" :key="driverIndex" class="driver-list">{{ driver.driverName }}</div>
          </div>
          <div><van-icon :name="showStatus ? 'arrow-down' : 'arrow-up'" @click="showStatus = !showStatus" /></div>
        </div>
        <van-row v-if="showStatus" class="map-card-wrap__info-box" :gutter="3" type="flex" justify="space-around">
          <van-col :span="6" class="item" v-for="(item, index) of cardList" :key="index">
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
          </van-col>
        </van-row>
        <template v-else>
          <div class="list-wrap__item truck">
            <div class="map-card-wrap__info-box">
              <div class="item">
                <div class="name">今日里程</div>
                <div class="value">{{ truckInfo.mileage.toFixed(0) }} <span class="unit">公里</span></div>
              </div>
            </div>
            <div class="item-info">
              <div class="label speed">
                <span>{{ truckInfo.speed || '-' }}</span>公里/小时
                <span class="status" :class="'status__' + truckInfo.speedStatus">{{ truckStatusList[truckInfo.speedStatus] }}</span>
              </div>
              <div class="label local">{{ truckInfo.currAddress || '-' }}</div>
            </div>
          </div>
          <div class="list-wrap__item truck">
            <div class="map-card-wrap__info-box">
              <div class="item">
                <div class="name">今日耗能</div>
                <div class="value">{{ truckInfo.consumption }} <span class="unit">公斤</span></div>
              </div>
            </div>
            <div class="volume">剩余气量：{{ truckInfo.filterPercent > 0 ? `${truckInfo.filterPercent}%` : '无' }}</div>
            <div class="map-card-wrap__info-box">
              <div class="item">
                <div class="name">今日减碳</div>
                <div class="value">{{ truckInfo.carbon }} <span class="unit">公斤</span></div>
              </div>
            </div>

          </div>
        </template>
      </div>
    </div>
    <div class="footer-trail-wrap">
      <div>回放时段</div>
      <div class="back-time-list">
        <van-tag :color="timeStatus === 9 ? '#2979ff' : '#ffffff'" :text-color="timeStatus === 9 ? '#ffffff' : '#868b9a'" size="large" @click="timeEvent(9)">自定义</van-tag>
        <van-tag :color="timeStatus === 1 ? '#2979ff' : '#ffffff'" :text-color="timeStatus === 1 ? '#ffffff' : '#868b9a'" size="large" @click="timeEvent(1)">近1天</van-tag>
        <van-tag :color="timeStatus === 2 ? '#2979ff' : '#ffffff'" :text-color="timeStatus === 2 ? '#ffffff' : '#868b9a'" size="large" @click="timeEvent(2)">近3天</van-tag>
        <van-tag :color="timeStatus === 3 ? '#2979ff' : '#ffffff'" :text-color="timeStatus === 3 ? '#ffffff' : '#868b9a'" size="large" @click="timeEvent(3)">近7天</van-tag>
      </div>
      <div class="back-info-wrap">
        <div class="data-info">
          <div>总里程 {{ truckTrialInfo.mileage }}公里</div>
          <div>总能耗 {{ truckTrialInfo.consumption }}公斤</div>
          <div>总减碳 {{ truckTrialInfo.carbon }}公斤</div>
        </div>
        <div style="width: 100%;padding: 30px 0 10px;">
          <van-slider v-model="backValue" bar-height="4px" disabled>
            <template #button>
              <div class="slider-custom-button"> </div>
            </template>
          </van-slider>
        </div>
        <div class="back-time">
          <div>{{ datatime.startTime }}</div>
          <div @click="playTrailEvent()"><van-image width="28px" height="28px" fit="contain" :src="requestImages()"/></div>
          <div>{{ datatime.endTime }}</div>
        </div>
      </div>
    </div>
    <el-bmap vid="bmap" :min-zoom="8" :max-zoom="20" :zoom="zoom" :center="center" :bmap-manager="bmapManager" class="bm-view" :style="mapStyle" :events="events"></el-bmap>
  </div>
</template>
<script>
import 'vue-bmap-gl/dist/style.css'
import axios from 'axios'
import { BMapManager } from 'vue-bmap-gl'
import { $gasdataTruckInfo, $gasdataTruckTrajectory } from '@/service/gasdata'
import { formatDate } from '@/utils/tools'
// import { transformFromWGSToGCJ, transformFromGCJToBaidu } from '@/utils/wscoordinate'
export default {
  name: 'battle',
  data() {
    return {
      backValue: 0,
      timeStatus: 1,
      showStatus: true,
      playStatus: 1,
      datatime: {
        startTime: formatDate((new Date().getTime() - 86400000), 'yyyy-MM-dd hh:mm:ss'),
        endTime: formatDate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss')
      },
      truckInfo: {},
      truckTrialInfo: {},
      queryTruckInfo: this.$route.query,
      bmapManager: new BMapManager(),
      map: null,
      mapStyle: {
        width: '100%',
        height: '100%'
      },
      center: [this.$route.query.lng, this.$route.query.lat],
      zoom: 10,
      events: {
        init: (map) => {
          this.map = map
          this.initTrailData()
          // this.startDemo(o)
        }
      },
      timer: null,
      mapHeight: 400,
      cardList: [{
        name: '今日里程',
        value: '0',
        unit: '公里'
      }, {
        name: '今日耗能',
        value: '0',
        unit: '公斤'
      }, {
        name: '今日减碳',
        value: '0',
        unit: '公斤'
      }],
      truckStatusList: {
        0: '行驶中',
        1: '静止中',
        2: '离线中'
      },
      lushu: null
    }
  },
  watch: {},
  computed: {},
  created() {
    this.dragendPointer()
    // this.truckTrailInfo()
  },
  mounted() {
    // 重置地图高度
    this.mapHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  },
  beforeDestroy() {},
  methods: {
    initData() {
      let loaded = false
      try {
        loaded = (BMapGLLib && BMapGLLib.Lushu)
      } catch (err) {
        loaded = false
      }

      if (!loaded) {
        console.log('BMapGLLib.Lushu loading!')
        const lushu = document.createElement('script')
        lushu.type = 'text/javascript'
        lushu.src = 'https://mapopen.bj.bcebos.com/github/BMapGLLib/Lushu/src/Lushu.min.js'
        document.body.appendChild(lushu)
        const trackAnimation = document.createElement('script')
        trackAnimation.type = 'text/javascript'
        trackAnimation.src = 'https://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js'
        document.body.appendChild(trackAnimation)
      } else {
        console.log('BMapGLLib.Lushu is loaded!')
      }
    },
    timeEvent(type) {
      this.timeStatus = Number(type)

      if (this.timeStatus === 1) {
        this.datatime = {
          startTime: formatDate((new Date().getTime() - 86400000), 'yyyy-MM-dd hh:mm:ss'),
          endTime: formatDate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss')
        }
      } if (this.timeStatus === 2) {
        this.datatime = {
          startTime: formatDate((new Date().getTime() - 3 * 86400000), 'yyyy-MM-dd hh:mm:ss'),
          endTime: formatDate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss')
        }
      } if (this.timeStatus === 3) {
        this.datatime = {
          startTime: formatDate((new Date().getTime() - 7 * 86400000), 'yyyy-MM-dd hh:mm:ss'),
          endTime: formatDate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss')
        }
      }

      this.initTrailData()
    },
    requestImages () {
      if (this.playStatus === 1) {
        return require('@/assets/images/home/play.png')
      } else {
        return require('@/assets/images/home/stop.png')
      }
    },
    playTrailEvent() {
      if (this.playStatus === 1) {
        this.playStatus = 2
        this.lushu.start()
      } else {
        this.playStatus = 1
        this.lushu.pause()
      }
    },
    async initTrailData() {
      this.initData()
      const truckInfo = await this.truckTrailInfo()
      const arrPois = truckInfo.points || []

      const len = arrPois.length - 1
      // const beginPoint = transformFromWGSToGCJ(arrPois[0].lat, arrPois[0].lng)
      // const endPoint = transformFromWGSToGCJ(arrPois[len].lat, arrPois[len].lng)
      // const baiduBeginPoint = transformFromGCJToBaidu(beginPoint.latitude, beginPoint.longitude)
      // const baiduEndPoint = transformFromGCJToBaidu(endPoint.latitude, endPoint.longitude)
      // console.log(baiduBeginPoint, baiduEndPoint)

      var start = new BMapGL.Point(arrPois[0].lng, arrPois[0].lat)
      var end = new BMapGL.Point(arrPois[len].lng, arrPois[len].lat)
      var drv = new BMapGL.DrivingRoute(this.map, {
        onSearchComplete: (res) => {
          if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
            this.map.clearOverlays()
            // 增加起点和终点坐标
            this.map.addOverlay(new BMapGL.Marker(start, {
              offset: new BMapGL.Size(0, -12),
              icon: new BMapGL.Icon(require('@/assets/images/home/begin@2x.png'), new BMapGL.Size(20, 26))
            }))
            this.map.addOverlay(new BMapGL.Marker(end, {
              offset: new BMapGL.Size(0, -12),
              icon: new BMapGL.Icon(require('@/assets/images/home/end@2x.png'), new BMapGL.Size(20, 26))
            }))

            this.map.addOverlay(new BMapGL.Polyline(arrPois, { strokeColor: '#43bf91', strokeOpacity: 1 }))
            this.map.setViewport(arrPois)

            this.lushu = new BMapGLLib.LuShu(this.map, arrPois, {
              defaultContent: '', // 覆盖物中的内容 "从天安门到百度大厦"
              autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
              icon: new BMapGL.Icon(require('@/assets/images/home/red@2x.png'), new BMapGL.Size(15, 15), { anchor: new BMapGL.Size(10, 10) }),
              speed: 10, // 覆盖物移动速度，单位米/秒
              enableRotation: true // 是否设置marker随着道路的走向进行旋转
              // landmarkPois: [
              //   { lng: 116.314782, lat: 39.913508, html: '加油站', pauseTime: 2 },
              //   { lng: 116.315391, lat: 39.964429, html: '高速公路收费<div><img src="//map.baidu.com/img/logo-map.gif"/></div>', pauseTime: 3 },
              //   { lng: 116.381476, lat: 39.974073, html: '肯德基早餐', pauseTime: 2 }
              // ]
            })
          }
        }
      })

      drv.search(start, end)
    },
    async queryCurrAddress(location) {
      const data = await axios.post(process.env.VUE_APP_BAIDU_URL + '?output=json&ak=Zvd6FzmertUwjhZih5Zfq0D8uTUhvqsH&coordtype=wgs84ll&location=' + location).then(response => {
        return response.data
      })

      if (data.hasOwnProperty('result')) {
        return data.result.addressComponent
      } else {
        return '-'
      }
    },
    angle(start, end) {
      // 通过 a、b 确定角度所处的象限
      const a = start[0] - end[0]
      const b = start[1] - end[1]
      // eslint-disable-next-line camelcase
      const a_c = Math.abs(a)
      // eslint-disable-next-line camelcase
      const b_c = Math.abs(b)
      // 获取得三角形的斜边 Math.hypot();
      const c = Math.hypot(a_c, b_c)
      // 计算弧度
      // eslint-disable-next-line camelcase
      const radina = Math.acos(a_c / c)
      // 计算角度
      let angleVal = Math.floor(radina * 180 / Math.PI)
      // 处理最终需要旋转的角度
      if (a > 0) {
        // 第二、三象限
        if (b > 0) {
          // 三
          angleVal = 90 + 90 - angleVal
        } else {
          angleVal = -180 + angleVal
        }
      } else {
        // 一、四象限
        if (b > 0) {
          // 四
          // eslint-disable-next-line no-self-assign
          angleVal = angleVal
        } else {
          // 一
          angleVal = -angleVal
        }
      }
      return angleVal
    },
    async truckTrailInfo() {
      const params = {
        carNumber: this.queryTruckInfo.carNumber,
        days: (this.timeStatus === 9 ? 0 : this.timeStatus),
        startTime: this.datatime.startTime,
        endTime: this.datatime.endTime
      }
      const data = await $gasdataTruckTrajectory(params).then(response => {
        return response
      })
      this.truckTrialInfo = data

      return data
    },
    dragendPointer() {
      const params = {
        carNumber: this.queryTruckInfo.carNumber
      }

      this.markers = []
      $gasdataTruckInfo(params).then(async response => {
        this.truckInfo = response
        // 统计数据
        this.cardList[0].value = response.mileage.toFixed(0)
        this.cardList[1].value = response.consumption
        this.cardList[2].value = response.carbon

        // 根据金纬度获取地理位置信息
        const addressInfo = await this.queryCurrAddress(response.lat + ',' + response.lng)
        const currAddress = addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.street

        if (response.hasOwnProperty('currAddress')) {
          response.currAddress = currAddress
        } else {
          this.$set(response, 'currAddress', currAddress)
        }
      })
    }
  }
}
</script>
