<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-wrap">
      <div class="phone">联系驾驶员</div>
      <div class="stopwatch" @click="trailBackEvent">轨迹回放</div>
    </div>
    <el-bmap vid="bmap" :zoom="zoom" :center="center" class="bm-view" :style="mapStyle">
      <el-bmap-marker v-for="(marker, index) in markers" :key="index" :icon="marker.icon" :visible="marker.visible" :position="marker.position" :title="marker.title" :label="marker.label" :events="marker.events" :vid="index" :enable-dragging="marker.enableDragging"></el-bmap-marker>
    </el-bmap>
  </div>
</template>
<script>
import 'vue-bmap-gl/dist/style.css'
import axios from 'axios'
import { $gasdataTruckInfo } from '@/service/gasdata'
export default {
  name: 'battle',
  data() {
    return {
      showStatus: true,
      truckInfo: {},
      queryTruckInfo: this.$route.query,
      map: null,
      mapStyle: {
        width: '100%',
        height: '100%'
      },
      center: [this.$route.query.lng, this.$route.query.lat],
      zoom: 16,
      timer: null,
      mapHeight: 400,
      cardList: [{
        name: '今日里程',
        value: '0',
        unit: '公里'
      }, {
        name: '今日耗能',
        value: '0',
        unit: '公斤'
      }, {
        name: '今日减碳',
        value: '0',
        unit: '公斤'
      }],
      truckStatusList: {
        0: '行驶中',
        1: '静止中',
        2: '离线中'
      },
      markers: []
    }
  },
  watch: {},
  computed: {},
  created() {
    this.dragendPointer()
    this.timer = setInterval(() => {
      this.dragendPointer()
    }, 60000)
  },
  mounted() {
    // 重置地图高度
    this.mapHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    trailBackEvent() {
      this.$router.push({
        path: '/trail',
        query: this.queryTruckInfo
      })
    },
    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
    },
    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

        this.markerInfo(response)
        // 根据金纬度获取地理位置信息
        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)
        }
      })
    },
    markerInfo(item) {
      const info = {
        icon: {},
        label: {},
        visible: true,
        enableDragging: false
      }

      info.label = {
        content: item.carNumber,
        offset: [-23, -25],
        style: {
          borderWidth: 0,
          padding: '3px 10px',
          borderRadius: '4px',
          boxShadow: '0px 0px 9px 1px rgba(28, 29, 33, 0.16)'
        }
      }
      info.icon = {
        url: require('@/assets/images/navigation/navigation@2x.png'),
        size: [20, 26]
      }
      info.position = [item.lng, item.lat]

      this.markers.push(info)
    }
  }
}
</script>
