<!--
 * @Author: chris
 * @Date: 2025-09-09 15:30:24
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2026-03-18 11:25:48
-->
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import VideoJs from 'video.js'
import weatherImg from '@/assets/images/devices/weather.png'
import videoSrc from '@/assets/video/test.mp4'
import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, ZoomIn, ZoomOut } from '@element-plus/icons-vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
  },
  cameraList: {
    type: Array,
    default: () => [],
  }
})


const emits = defineEmits([ 'select' ])

const playerRef = ref(null)
let player = null
const cameraCodeDic = { // 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距，16-自动控制
  up: 0,
  down: 1,
  left: 2,
  right: 3,
  leftUp: 4,
  leftDown: 5,
  rightUp: 6,
  rightDown: 7,
  zoomIn: 8,
  zoomOut: 9
}

watch(() => props.cameraList, (list) => {
  if (!list.length) return false;
  nextTick(() => {
    initVideo()
  })
}, { immediate: true })

// const weatherItems = createItemObj()

// onMounted(() => {
//   initVideo()
// })

onUnmounted(() => {
  if (!player) return
  player.dispose()
})

async function initVideo () {
  player = await VideoJs('player', {
    autoplay: true,
    preload: 'auto',
    fluid: false,
    controls: true,
    muted: true
  })

  player.src({
    src: props.cameraList[0].videoPlayUrl,
    // type: 'video/mp4',
  })
}

function handleSelect(item) {
  console.log('Selected item:', item);
  emits('select', item)
}

// 摄像头控制
function controlCamera(action) {
  console.log('Camera control action:', action);
  if (!player) {
    console.error('Player not initialized')
    return
  }

  emits('controlCamera', { deviceNo: props.cameraList[0].deviceNo, action, code: cameraCodeDic[action] })
}

</script>

<template>
  <div class="weather-dashboard">
    <!-- 顶部标题区域 -->
    <div class="dashboard-header">
      <h2 class="dashboard-title">气象监测数据</h2>
    </div>

    <div class="video-box position-relative">
      <div class="empty-video" v-if="cameraList.length == 0">暂无视频</div>
      <video ref="playerRef" id="player" class="video-player video-js" v-else>
      </video>
    </div>

    <!-- 视频控制面板 -->
    <div class="video-control">
      <div class="control-buttons">
        <!-- 方向控制按钮 -->
        <div class="direction-controls">
          <button class="control-btn" @click="controlCamera('up')">
            <el-icon class="control-icon" size="20"><ArrowUp /></el-icon>
          </button>
          <div class="horizontal-controls">
            <button class="control-btn" @click="controlCamera('left')">
              <el-icon class="control-icon" size="20"><ArrowLeft /></el-icon>
            </button>
            <button class="control-btn" @click="controlCamera('right')">
              <el-icon class="control-icon" size="20"><ArrowRight /></el-icon>
            </button>
          </div>
          <button class="control-btn" @click="controlCamera('down')">
            <el-icon class="control-icon" size="20"><ArrowDown /></el-icon>
          </button>
        </div>
        
        <!-- 缩放控制按钮 -->
        <div class="zoom-controls">
          <button class="control-btn" @click="controlCamera('zoomIn')">
            <el-icon class="control-icon" size="20"><ZoomIn /></el-icon>
          </button>
          <button class="control-btn" @click="controlCamera('zoomOut')">
            <el-icon class="control-icon" size="20"><ZoomOut /></el-icon>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 数据卡片区域 -->
    <div class="data-cards">
      <div 
        v-for="item in items" 
        :key="item.id" 
        class="data-card"
        :style="{ '--card-color': item.color }"
        @click="handleSelect(item)"
      >
        <div class="card-icon-wrapper">
          <svg-icon :icon-class="item.icon" class="card-icon"></svg-icon>
        </div>
        <div class="card-info">
          <div class="card-label">{{ item.title }}</div>
          <div class="card-value-container">
            <span class="card-value">{{ item.value }}</span>
            <span v-if="item.unit" class="card-unit">{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图片区域 -->
    <!-- <div class="weather-photo">
      <el-image 
        :src="weatherImg" 
        fit="contain" 
        class="weather-photo-img"
        lazy
      />
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
// 主题颜色变量
$bg-primary: #ffffff;
$bg-secondary: #f5f7fa;
$text-primary: #333333;
$text-secondary: #666666;
$shadow-normal: 0 2px 12px rgba(0, 0, 0, 0.05);
$transition-base: all 0.3s ease;

.weather-dashboard {
  @apply flex flex-col justify-center item-center w-full h-full overflow-hidden;
}

// 顶部标题区域
.dashboard-header {
  @apply text-center mb-24px;
}

.dashboard-title {
  @apply text-24px font-weight-600 m-0 tracking-[0.5px];
  color: $text-primary;
}

// 图片区域样式
.weather-photo {
  @apply w-full h-330px rounded-8px overflow-hidden;
  box-shadow: $shadow-normal;
  transition: $transition-base;
}

.weather-photo:hover {
  @apply translate-y-[-2px] shadow-[0_4px_16px_rgba(0,0,0,0.1)];
}

.weather-photo-img {
  @apply h-full w-full transition-[transform] duration-500 ease;
}

.weather-photo-img:hover {
  transform: scale(1.03);
}

// 数据卡片网格布局
.data-cards {
  @apply grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-14px flex-1 mb-20px;
}

// 数据卡片样式 - 横向排列
.data-card {
  @apply rounded-8px p-16px flex items-center relative border-[1px] border-style-solid border-[transparent] min-h-[80px] cursor-pointer;
  background: $bg-secondary;
  transition: $transition-base;

  &:hover {
    @apply translate-y-[-3px] shadow-[0_6px_16px_rgba(0,0,0,0.08)] border-[var(--card-color)];
  }

  // 背景光效点缀
  &::before {
    @apply content-[''] absolute top-[-20px] right-[-20px] w-60px h-60px rounded-[50%] bg-[radial-gradient(circle,rgba(var(--card-color-rgb),0.1)_0%,transparent_70%)] z-0;
    background: radial-gradient(circle, rgba(var(--card-color-rgb), 0.1) 0%, transparent 70%);
  }
}

// 卡片图标样式
.card-icon-wrapper {
  @apply w-48px h-48px rounded-50% flex items-center justify-center flex-shrink-0 mr-16px bg-[rgba(var(--card-color-rgb),0.1)] z-1;
  transition: $transition-base;
}

.data-card:hover .card-icon-wrapper {
  @apply bg-[rgba(var(--card-color-rgb),0.15)] transform scale-105;
}

.card-icon {
  @apply w-36px h-36px color-[var(--card-color)];
}

// 卡片信息样式
.card-info {
  @apply relative z-1 flex-1;
}

.card-label {
  @apply text-14px mb-10px font-500;
  color: $text-secondary;
}

.card-value-container {
  @apply flex items-baseline gap-4px;
}

.card-value {
  @apply text-22px font-600 color-[var(--card-color)] line-height-[1] whitespace-nowrap overflow-hidden text-ellipsis;
}

.card-unit {
  @apply text-14px font-400 whitespace-nowrap;
  color: $text-secondary;
}

.video-box {
  @apply w-full h-300px overflow-hidden mb-15px rounded-8px;
}

.video-player {
  @apply max-h-[100%] max-w-[100%];
}

.empty-video {
  @apply bg-black  h-[100%] w-[100%]
}

// 视频控制面板样式
.video-control {
  @apply mb-24px;
}

.control-buttons {
  @apply flex items-center gap-24px;
}

// 方向控制按钮样式
.direction-controls {
  @apply flex flex-col items-center gap-8px flex-1;
}

.horizontal-controls {
  @apply flex gap-40px;
}

// 缩放控制按钮样式
.zoom-controls {
  @apply flex gap-8px flex-1;
}

// 控制按钮样式
.control-btn {
  @apply w-60px h-50px rounded-8px flex items-center justify-center border-[1px] border-style-solid border-[#e4e7ed];
  background: $bg-secondary;
  transition: $transition-base;
  
  &:hover {
    @apply bg-[#ecf5ff] border-[#c6e2ff] shadow-[0_2px_8px_rgba(0,0,0,0.1)];
  }
  
  &:active {
    @apply bg-[#d9ecff] border-[#91d5ff];
  }
}
</style>