<!--
 * @Author: chris
 * @Date: 2025-09-09 15:30:24
 * @LastEditors: chris
 * @LastEditTime: 2025-10-27 14:56:51
-->
<script setup>
import VideoJs from 'video.js'
import weatherImg from '@/assets/images/devices/weather.png'
import videoSrc from '@/assets/video/test.mp4'

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


const emits = defineEmits([ 'select' ])

const playerRef = ref(null)
let player = null

// 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,
  })

  player.src({
    src: videoSrc,
    type: 'video/mp4',
  })
}

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

</script>

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

    <div class="video-box position-relative">
      <video ref="playerRef" id="player" class="video-player video-js">
      </video>
    </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-16px flex-1 mb-24px;
}

// 数据卡片样式 - 横向排列
.data-card {
  @apply rounded-8px p-16px flex items-center relative border-[1px] border-style-solid border-[transparent] min-h-[90px] 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%];
}
</style>
