<script setup>
//飞行中
import {
  ref,
  h,
  defineEmits,
  defineAsyncComponent,
  onMounted,
  watch,
  toRaw,
  defineProps,
  reactive,
} from 'vue'
import { useAirPortSocketStore } from '@/stores/airportSocket.js'
const ScreenComp = defineAsyncComponent(() => import('@/views/carbin/toolComp/screen.vue'))

const props = defineProps({
  big_area_showType: String,
})

const emits = defineEmits(['switchView', 'switchScreenVideo'])

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(2) //1-舱外视频 2-舱内视频 3-无人机视频
let littleViewModeName = ref('舱内画面')

import img_default from '@/assets/icons/state1.png'
import img_touch from '@/assets/icons/state2.png'

//飞机高度
let planeAlt = 0
//已修改过小窗的视频类型
let isModifedSmallScreen = ref(false)
let planeStateList = reactive({
  vspeed: {
    id: 1,
    key: 'vspeed',
    name: '爬升速度',
    icon: 'icon-shangshengxiajiang',
    value: '0',
    touch: false,
    content: '爬升<br>速度',
    unit: '/s',
  },
  hspeed: {
    id: 2,
    name: '平飞速度',
    icon: 'icon-jiantouzuoyou',
    value: '0',
    touch: false,
    content: '平飞<br>速度',
    unit: '/s',
  },
  distToHome: {
    id: 3,
    name: '距离机场',
    icon: 'icon-H',
    value: '0',
    touch: false,
    content: '距离<br>机场',
    unit: 'm',
  },
  altitude: {
    id: 4,
    name: '海拔高度',
    icon: 'icon-tiedijuli',
    value: '0',
    touch: false,
    content: '海拔<br>高度',
    unit: 'm',
  },
  pitch: {
    id: 5,
    name: '无人机俯仰角',
    icon: 'icon-flight-takeoff-line',
    value: '0',
    touch: false,
    content: '无人机<br>俯仰角',
    unit: '°',
  },
  yaw: {
    id: 6,
    name: '无人机偏航角',
    icon: 'icon-feihangqipianhangjiao',
    value: '0',
    content: '无人机<br>偏航角',
    touch: false,
    unit: '°',
  },
  camerapitch: {
    id: 7,
    name: '云台俯仰角',
    icon: 'icon-pianhangjiao-1-copy',
    value: '0',
    content: '云台<br>俯仰角',
    touch: false,
    unit: '°',
  },
  camerayaw: {
    id: 8,
    name: '云台偏航角',
    icon: 'icon-pianhangjiao-1',
    value: '0',
    content: '云台<br>偏航角',
    touch: false,
    unit: '°',
  },
})
let selectedAirPort = ref(1)
//飞前是舱内  飞中是舱外
let small_area_showType = ref('video_in')

//切换显示模式
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 = '舱外画面'
      small_area_showType.value = 'video_out'
      break
    case 2:
      littleViewModeName.value = '舱内画面'
      small_area_showType.value = 'video_in'
      break
    case 3:
      littleViewModeName.value = '无人机画面'
      small_area_showType.value = 'video_plane'
      break
    default:
      break
  }
}
//切换小窗/大窗
const switch_screen_fn = () => {
  let current_small_area_showType = toRaw(small_area_showType.value)
  if (props.big_area_showType == 'video_out') {
    littleViewModeName.value = '舱外画面'
    littleViewMode.value = 1
  } else if (props.big_area_showType == 'video_in') {
    littleViewModeName.value = '舱内画面'
    littleViewMode.value = 2
  } else if (props.big_area_showType == 'video_plane') {
    littleViewModeName.value = '无人机画面'
    littleViewMode.value = 3
  }
  small_area_showType.value = props.big_area_showType

  emits('switchScreenVideo', current_small_area_showType)
  // if(small_area_showType.value=='')
}

//设置socket的值
const setCurrentData = (data) => {
  // console.log(data)
  // console.log(data.alt)

  if (data.alt > 0 && !isModifedSmallScreen) {
    //飞行中
    littleViewMode.value = 1
    littleViewModeName.value = '舱外画面'
    small_area_showType.value = 'video_in'
    //不允许再修改了
    isModifedSmallScreen.value = true
  }

  //飞机高度
  // planeAlt = data.alt ? data.alt : 0
  //爬升速度
  planeStateList.vspeed.value = Number(data.vspeed) ? parseInt(data.vspeed, 10) : '0'
  //平飞速度
  planeStateList.hspeed.value = Number(data.hspeed) ? parseInt(data.hspeed, 10) : '0'
  //距离机场
  planeStateList.distToHome.value = Number(data.distToHome) ? parseInt(data.distToHome, 10) : '0'
  //海拔高度
  planeStateList.altitude.value = Number(data.altitude) ? parseInt(data.altitude, 10) : '0'
  //无人机俯仰角
  planeStateList.pitch.value = Number(data.pitch) ? parseInt(data.pitch, 10) : '0'
  //无人机偏航角
  planeStateList.yaw.value = Number(data.yaw) ? parseInt(data.yaw, 10) : '0'
  //云台俯仰角
  planeStateList.camerapitch.value = Number(data.camerapitch) ? parseInt(data.camerapitch, 10) : '0'
  //云台偏航角
  planeStateList.camerayaw.value = Number(data.camerayaw) ? parseInt(data.camerayaw, 10) : '0'
}

//切换视频位置
const siwtchVideoPosFn = () => {}

//监听pinia
airPortSocketStore.$subscribe((mutate, state) => {
  //设置socket的值
  setCurrentData(state.currentAirPort)
})
</script>

<template>
  <div class="w-full h-full flex flex-row relative">
    <!-- lg:h-c150 xk:h-c150 x1k:h-c212 x2k:h-c282 -->
    <div class="leftPlane flex flex-row w-1/4 h-full py-3 px-2.5 xk:zoom09 x1k:zoom13 x2k:zoom17">
      <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] text-[11px]"
            :class="viewMode == 1 ? 'opacity-100' : 'opacity-30'"
          >
            常规
          </p>
        </div>
        <div
          @click="switchView(2)"
          class="size-12 rounded border 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">
          <ScreenComp :showType="small_area_showType" />
        </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"
            @click="switch_screen_fn"
          >
            <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 xk:zoom11 x1k:zoom14 x2k:zoom19">
      <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="item.touch ? img_touch : img_default" 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 v-if="item.value != '-'">{{ item.unit }}</span></span
              >
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
