<script setup>
//飞机控制器
import { ref, defineAsyncComponent, onMounted, watch, toRaw, defineProps, reactive } from 'vue'
import { useAirPortSocketStore } from '@/stores/airportSocket.js'

const airPortSocketStore = useAirPortSocketStore()

const emits = defineEmits(['droneCommandExecute'])

let items = reactive({
  battery: {
    label: '电池循环次数',
    value: '-',
  },
  version: {
    label: '无人机版本',
    value: '-',
  },
  temperature: {
    label: '电池温度',
    value: '-',
  },
})

//电池百分比
let precent = ref('-')
//电池剩余时间
let lastTime = ref('-')

const setCurrentData = (data) => {
  // console.log(data)
  //电池循环次数
  items.battery.value = data ? data.batLoopTimes : '-'
  //电池温度
  items.temperature.value = data ? data.weather.cellTemp : '-'

  precent.value = data ? Number(data.battery) * 100 : '-'
  lastTime.value = data ? data.allflytime : '-'
}

const droneCommand = async (type) => {
  if (type == 'back') {
    //返航
    emits('droneCommandExecute', '03')
  } else if (type == 'DroneStop') {
    //悬停
    emits('droneCommandExecute', '01')
  }
}

//监听pinia
airPortSocketStore.$subscribe((mutate, state) => {
  //设置socket的值
  setCurrentData(state.currentAirPort)
  //无人机版本
  items.version.value = state.ceurrentAirPortData.droneVersion
})

onMounted(() => {})
</script>
<template>
  <div class="w-[506px] flex flex-row items-center">
    <div class="w-[136px] h-[46px] cursor-pointer relative" @click="droneCommand('back')">
      <img src="@/assets/icons/leftplane.png" alt="" />
      <div class="absolute left-1/3 top-2 text-[#ffffff] text-base flex flex-row items-center">
        <span class="iconfont icon-fanhang text-[#ffffff] text-2xl"></span>
        <span class="ml-1">返航</span>
      </div>
    </div>

    <a-tooltip
      overlayClassName="blackToolTip"
      placement="top"
      :getPopupContainer="(triggerNode) => triggerNode.parentElement"
    >
      <template #title>
        <!-- <a-menu v-model:selectedKeys="current" :items="items" @select="selectFn"> </a-menu> -->
        <div class="flex flex-col divide-y divide-slate-700">
          <div
            v-for="(item, index) in items"
            :key="index"
            class="w-[200px] py-[20px] bg-[#00000040] flex flex-row justify-between"
          >
            <span>{{ item.label }}</span
            ><span>{{ item.value }}</span>
          </div>
        </div>
      </template>
      <div class="middlePlane w-[210px] h-[46px] mx-3 flex flex-row items-center justify-around">
        <div
          class="w-[23px] h-[23px] bg-[#ffffff50] rounded-[6px] flex-row items-center justify-center text-center"
        >
          <span class="iconfont icon-xudianchi text-[#ffffff] text-base"></span>
        </div>
        <span class="text-sm text-[#B4D5FF]">电池电量</span>
        <div class="lastTime text-sm font-bold">{{ precent }}%/{{ lastTime }}min</div>
        <span class="iconfont icon-xiashuangjiantou text-[#ffffff50]"></span>
      </div>
    </a-tooltip>
    <!-- <div class="middlePlane w-[210px] h-[46px] mx-3 flex flex-row items-center justify-around">
      <div
        class="w-[23px] h-[23px] bg-[#ffffff50] rounded-[6px] flex-row items-center justify-center text-center"
      >
        <span class="iconfont icon-xudianchi text-[#ffffff] text-base"></span>
      </div>
      <span class="text-sm text-[#B4D5FF]">电池电量</span>
      <div class="lastTime text-sm font-bold">{{ precent }}%/{{ lastTime }}min</div>
      <span class="iconfont icon-xiashuangjiantou text-[#ffffff50]"></span>
    </div> -->

    <div class="w-[136px] h-[46px] cursor-pointer relative" @click="droneCommand('DroneStop')">
      <img src="@/assets/icons/rightplane.png" alt="" />
      <div class="absolute right-1/3 top-2 text-[#ffffff] text-base flex flex-row items-center">
        <span class="iconfont icon-zanting text-[#ffffff] text-2xl"></span>
        <span class="ml-1">急停</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.middlePlane {
  background: linear-gradient(270deg, #006ffe, #3ca4fb);
  border-radius: 2px;
  border: 2px solid #75a9d6;
}
.lastTime {
  background: linear-gradient(
    0deg,
    rgba(79, 255, 208, 0.44) 0%,
    rgba(20, 255, 50, 0.44) 98.779296875%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
