<template>
  <div>
    <el-row class="m-15" type="flex" justify="space-between">
      <el-col :span="2">
        <PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
      </el-col>
      <el-col :span="2">
        <PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
      </el-col>
      <el-col :span="2">
        <PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
      </el-col>
      <el-col :span="2">
        <PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
      </el-col>
      <el-col :span="3">
        <HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
          :getPlaneMode="plane.planeState.getPlaneMode" />
      </el-col>
      <el-col :span="2">
        <PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
      </el-col>
      <el-col :span="2">
        <PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
      </el-col>
      <el-col :span="2">
        <PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
      </el-col>
      <el-col :span="2">
        <PublicTag icon="icon-gaodu" :val="plane.planeState.batteryRemaining" unit="%" state="danger" />
      </el-col>
    </el-row>
    <div class="batteryBox">
      <el-progress :percentage="plane.planeState.batteryRemaining" :show-text="false" stroke-width="2"></el-progress>
      <tooltip :horizontalPosition="'80%'" backgroundColor="#ff3333">
        H
      </tooltip>
    </div>
  </div>

</template>

<script>
import HeartTag from '@/components/Tag/HeartTag'
import PublicTag from '@/components/Tag/PublicTag'
import Tooltip from '@/components/Tag/Tooltip'
import geodist from 'geodist'

export default {
  name: 'PlaneStatus',
  data () {
    return {
      distance: 0
    }
  },
  props: {
    plane: {
      typeof: 'Object',
      deep: true
    }
  },
  components: {
    HeartTag,
    PublicTag,
    Tooltip
  },
  computed: {
  },
  watch: {
    distance (val) {
      console.log(val + '米')
    }
  },
  methods: {},
  created () {
    try {
      const point1 = { lat: 52.518611, lon: 13.408056 }
      const point2 = { lat: 51.507222, lon: -0.1275 }
      this.distance = geodist(point1, point2, { unit: 'meters' })
    } catch (error) {
      console.error('Error calculating distance:', error)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.el-row {
  z-index: 90;
}

.batteryBox {}

.batteryBox .el-progress {
  z-index: 90;
}

.batteryBox .el-tooltip {
  z-index: 90;
}
</style>
