<script setup>
//飞行中
import {
  ref,
  h,
  defineEmits,
  defineAsyncComponent,
  onMounted,
  watch,
  toRaw,
  defineProps,
  reactive,
} from 'vue'
import { useAirPortSocketStore } from '@/stores/airportSocket.js'

const emits = defineEmits(['switchView'])

const airPortSocketStore = useAirPortSocketStore()
let size1Img = ref(new URL(`@/assets/icons/size1active.png`, import.meta.url).href)
let size2Img = ref(new URL(`@/assets/icons/size2.png`, import.meta.url).href)
let viewMode = ref(1) //1-1/4方式 2-对半方式
let littleViewMode = ref(1) //1-舱外视频 2-舱内视频 3-无人机视频
let littleViewModeName = ref('舱外画面')
let planeStateList = ref([
  {
    id: 1,
    key: 'vspeed',
    name: '爬升速度',
    icon: 'icon-shangshengxiajiang',
    value: '-',
    touch: false,
    content: '爬升<br>速度',
    unit: '/s',
  },
  {
    id: 2,
    name: '平飞速度',
    icon: 'icon-jiantouzuoyou',
    value: '-',
    touch: false,
    content: '平飞<br>速度',
    unit: '/s',
  },
  {
    id: 3,
    name: '距离机场',
    icon: 'icon-H',
    value: '-',
    touch: false,
    content: '距离<br>机场',
    unit: 'm',
  },
  {
    id: 4,
    name: '海拔高度',
    icon: 'icon-tiedijuli',
    value: '-',
    touch: false,
    content: '海拔<br>高度',
    unit: 'm',
  },
  {
    id: 5,
    name: '无人机俯仰角',
    icon: 'icon-flight-takeoff-line',
    value: '-',
    touch: false,
    content: '无人机<br>俯仰角',
    unit: '°',
  },
  {
    id: 6,
    name: '无人机偏航角',
    icon: 'icon-feihangqipianhangjiao',
    value: '-',
    content: '无人机<br>偏航角',
    touch: false,
  },
  {
    id: 7,
    name: '云台俯仰角',
    icon: 'icon-pianhangjiao-1',
    value: '-',
    content: '云台<br>俯仰角',
    touch: false,
  },
  {
    id: 8,
    name: '云台偏航角',
    icon: 'icon-pianhangjiao-1',
    value: '-',
    content: '云台<br>偏航角',
    touch: false,
  },
])
let selectedAirPort = ref(1)

//切换显示模式
const switchView = (viewtype) => {
  if (viewtype == 1) {
    size1Img.value = new URL(`@/assets/icons/size1active.png`, import.meta.url).href
    size2Img.value = new URL(`@/assets/icons/size2.png`, import.meta.url).href
    emits('switchView', 1)
  } else if (viewtype == 2) {
    size1Img.value = new URL(`@/assets/icons/size1.png`, import.meta.url).href
    size2Img.value = new URL(`@/assets/icons/size2active.png`, import.meta.url).href
    emits('switchView', 2)
  }
  viewMode.value = viewtype
}
//切换直播视角
const switchPlaneVideo = (viewtype) => {
  littleViewMode.value = viewtype
  switch (viewtype) {
    case 1:
      littleViewModeName.value = '舱外画面'
      break
    case 2:
      littleViewModeName.value = '舱内画面'
      break
    case 3:
      littleViewModeName.value = '无人机画面'
      break
    default:
      break
  }
}
//切换视频位置
const siwtchVideoPosFn = () => {}

//监听pinia
airPortSocketStore.$subscribe((mutate, state) => {
  console.log(state.currentAirPort)
})
</script>

<template>
  <div class="w-full h-full flex flex-row relative">
    <div class="leftPlane flex flex-row w-1/4 h-full py-3 px-2.5">
      <div class="h-full flex flex-col">
        <div
          @click="switchView(1)"
          class="size-12 rounded mb-2 border p-1 cursor-pointer"
          :class="viewMode == 1 ? 'border-[#006FFE]' : 'border-[#BFBFBF]'"
        >
          <img :src="size1Img" alt="" />
          <p
            class="text-center text-[#ffffff] opacity-30 text-[11px]"
            :class="viewMode == 1 ? 'opacity-100' : 'opacity-30'"
          >
            常规
          </p>
        </div>
        <div
          @click="switchView(2)"
          class="size-12 rounded border border-[#BFBFBF] p-1 cursor-pointer"
          :class="viewMode != 1 ? 'border-[#006FFE]' : 'border-[#BFBFBF]'"
        >
          <img :src="size2Img" alt="" />
          <p
            class="text-center text-[#ffffff] text-[11px]"
            :class="viewMode != 1 ? 'opacity-100' : 'opacity-30'"
          >
            等比
          </p>
        </div>
      </div>
      <div
        class="w-[250px] aspect-video h-full bg-[#bdbdbd] ml-2.5 px-2 py-1 rounded relative overflow-hidden"
      >
        <!-- 视频播放区域 -->
        <div id="plane_small_video_area" class="w-full h-full absolute left-0 top-0"></div>
        <div class="px-2 absolute left-0 w-full flex flex-row justify-around items-center">
          <div class="w-full flex flex-row">
            <div
              class="size-7 p-0.5 rounded-sm cursor-pointer"
              :class="littleViewMode == 1 ? 'bg-[#006FFE]' : 'bg-[#000000]'"
              @click="switchPlaneVideo(1)"
            >
              <div class="w-full h-1"></div>
              <div class="bg-[rgba(255,255,255,0.4)] w-full h-5 text-center text-[#fff]">
                <span
                  class="iconfont icon-cangnei_xianxing text-[24px]/6"
                  :class="littleViewMode == 1 ? 'opacity-100' : 'opacity-60'"
                ></span>
              </div>
            </div>
            <div
              class="size-7 p-0.5 rounded-sm ml-2 cursor-pointer"
              :class="littleViewMode == 2 ? 'bg-[#006FFE]' : 'bg-[#000000]'"
              @click="switchPlaneVideo(2)"
            >
              <div class="w-full h-1"></div>
              <div class="bg-[rgba(255,255,255,0.4)] w-full h-5 text-center text-[#fff]">
                <span
                  class="iconfont icon-shexiangtou text-[18px]/6"
                  :class="littleViewMode == 2 ? 'opacity-100' : 'opacity-60'"
                ></span>
              </div>
            </div>
            <div
              class="size-7 p-0.5 rounded-sm ml-2 cursor-pointer"
              :class="littleViewMode == 3 ? 'bg-[#006FFE]' : 'bg-[#000000]'"
              @click="switchPlaneVideo(3)"
            >
              <div class="w-full h-1"></div>
              <div class="bg-[rgba(255,255,255,0.4)] w-full h-5 text-center text-[#fff]">
                <span
                  class="iconfont icon-uav-fill text-[18px]/6"
                  :class="littleViewMode == 3 ? 'opacity-100' : 'opacity-60'"
                ></span>
              </div>
            </div>
          </div>
          <div
            class="w-[26px] h-[24px] bg-[rgba(25,27,36,0.59)] border border-[#191B24] rounded-sm text-center"
          >
            <span
              class="iconfont icon-qiehuan text-[#ffffff] cursor-pointer"
              @click="siwtchVideoPosFn"
            ></span>
          </div>
        </div>
        <div
          class="px-1 h-6 rounded-sm absolute left-2 bottom-2.5 bottom-0 bg-[rgba(7,100,217,0.5)] border-[#0764D9] text-[#ffffff] text-[11px]/6 text-center"
        >
          {{ littleViewModeName }}
        </div>
      </div>
    </div>

    <!-- 右边 -->
    <div class="rightPlane flex flex-row w-3/4 h-full py-3 pr-2.5">
      <div class="w-[260px] m-auto">
        <a-row :gutter="[4, 8]" style="height: fit-content">
          <a-col
            class="gutter-row cursor-pointer"
            :span="6"
            v-for="item in planeStateList"
            :key="item"
          >
            <div
              class="w-[54px] h-[60px] bg-[#1D314A] border border-[#394C73] rounded text-center relative"
              :class="selectedAirPort == item.select ? 'blueGradientColor' : ''"
              @mouseover="item.touch = true"
              @mouseout="item.touch = false"
            >
              <img src="@/assets/icons/state1.png" class="w-full h-full" alt="" />
              <span
                v-if="!item.touch"
                :class="
                  'iconfont absolute top-1.5 left-0 right-0 m-auto text-lg  text-[#ffffff] ' +
                  item.icon
                "
              ></span>
              <span
                class="iconfont absolute top-0.5 left-0 right-0 m-auto text-xs text-[#ffffff]"
                v-if="item.touch"
                v-html="item.content"
              ></span>

              <span class="absolute bottom-0.5 left-0 right-0 m-auto text-[#ffffff]">{{
                item.value
              }}</span>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
