<script setup>
import { ref, computed } from 'vue';
import ModuleTitle from './moduleTitle.vue';
import SvgIcon from '@/components/SvgIcon';

// 模拟的航拍记录数据
const aerialRecords = ref([
  {
    id: '1',
    title: '果园全景图',
    imageUrl: 'https://picsum.photos/1600/800?random=1', // 符合16:8比例的图片
    thumbnailUrl: 'https://picsum.photos/200/100?random=1',
    date: '2025-09-03',
    time: '10:30:45',
    location: '果园A区',
    weather: '晴朗',
    device: '无人机D-800',
    status: 'normal',
    description: '果园全景航拍，覆盖面积约50亩'
  },
  {
    id: '2',
    title: '果树生长情况监测',
    imageUrl: 'https://picsum.photos/1600/800?random=2',
    thumbnailUrl: 'https://picsum.photos/200/100?random=2',
    date: '2025-09-02',
    time: '14:15:20',
    location: '果园B区',
    weather: '多云',
    device: '无人机D-800',
    status: 'normal',
    description: '监测果树生长情况，无异常'
  },
  {
    id: '3',
    title: '病虫害监测',
    imageUrl: 'https://picsum.photos/1600/800?random=3',
    thumbnailUrl: 'https://picsum.photos/200/100?random=3',
    date: '2025-09-01',
    time: '09:45:30',
    location: '果园C区',
    weather: '小雨',
    device: '无人机D-800',
    status: 'warning',
    description: '发现部分果树叶片异常，建议实地核查'
  },
  {
    id: '4',
    title: '灌溉效果评估',
    imageUrl: 'https://picsum.photos/1600/800?random=4',
    thumbnailUrl: 'https://picsum.photos/200/100?random=4',
    date: '2025-08-31',
    time: '16:20:15',
    location: '果园A区',
    weather: '晴朗',
    device: '无人机D-800',
    status: 'normal',
    description: '灌溉效果良好，土壤湿润度达标'
  },
  {
    id: '5',
    title: '果实成熟度监测',
    imageUrl: 'https://picsum.photos/1600/800?random=5',
    thumbnailUrl: 'https://picsum.photos/200/100?random=5',
    date: '2025-08-30',
    time: '11:10:50',
    location: '果园B区',
    weather: '多云',
    device: '无人机D-800',
    status: 'normal',
    description: '果实成熟度达到70%，预计15天后可采摘'
  }
]);

// 当前选中的记录
const selectedRecord = ref(aerialRecords.value[0]);

// 选择记录的方法
const selectRecord = (record) => {
  selectedRecord.value = record;
};

// 获取状态标签的样式类名
const getStatusClass = (status) => {
  return status === 'warning' ? 'bg-yellow-500 bg-opacity-20 text-yellow-400' : 'bg-green-500 bg-opacity-20 text-green-400';
};

// 获取状态文本
const getStatusText = (status) => {
  return status === 'warning' ? '异常' : '正常';
};
</script>

<template>
  <div class="aerial-photo">
    <!-- 标题部分 -->
    <ModuleTitle title="航拍记录" icon="hangpai" class="aerial-title" />
    
    <div class="aerial-container">
      <!-- 左侧大图预览区 -->
      <div class="images-section">
        <div class="image-wrapper">
          <img :src="selectedRecord.imageUrl" alt="{{ selectedRecord.title }}" class="main-image" />
          <div class="image-overlay">
            <div class="image-info">
              <h3 class="image-title">{{ selectedRecord.title }}</h3>
              <p class="image-description">{{ selectedRecord.description }}</p>
              <div class="image-meta">
                <span class="meta-item">{{ selectedRecord.date }} {{ selectedRecord.time }}</span>
                <span class="meta-item">{{ selectedRecord.location }}</span>
                <span class="meta-item">{{ selectedRecord.weather }}</span>
                <!-- <span class="meta-item">{{ selectedRecord.device }}</span> -->
                <span class="status-badge" :class="getStatusClass(selectedRecord.status)">
                  {{ getStatusText(selectedRecord.status) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧历史记录区 -->
      <div class="info-section">
        <div class="history-list">
          <div 
            v-for="record in aerialRecords" 
            :key="record.id" 
            class="record-item" 
            :class="{ active: selectedRecord.id === record.id }"
            @click="selectRecord(record)"
          >
            <div class="record-thumbnail-wrapper">
              <img :src="record.thumbnailUrl" alt="{{ record.title }}" class="record-thumbnail" />
              <div class="record-status" :class="record.status">
                <span class="status-badge">{{ getStatusText(record.status) }}</span>
              </div>
            </div>
            <div class="record-info">
              <div class="record-title">
                {{ record.title }}
              </div>
              <div class="record-meta">
                <span class="record-date">{{ record.date }} {{ record.time }}</span>
                <span class="record-location">{{ record.location }}</span>
              </div>
            </div>
            <div v-if="selectedRecord.id === record.id" class="selected-indicator">
              <SvgIcon name="check" class="check-icon" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.aerial-photo {
  @apply h-full p-20px overflow-hidden;
}

.aerial-title {
  @apply mb-10px;
}

.aerial-container {
  @apply flex gap-20px h-[calc(100%-40px)];
}

.images-section {
  @apply flex-1 bg-[rgba(255,255,255,0.05)] rounded-6px overflow-hidden;
}

.image-wrapper {
  @apply relative w-full h-full aspect-[16/10] overflow-hidden;
}

.main-image {
  @apply object-cover;
}

.image-overlay {
  @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-20px;
}

.image-info {
  @apply text-white;
}

.image-title {
  @apply text-lg font-bold mb-8px;
}

.image-description {
  @apply text-gray-300 text-sm mb-10px;
}

.image-meta {
  @apply flex flex-wrap gap-15px items-center;
}

.meta-item {
  @apply text-xs text-gray-400;
}

.status-badge {
  @apply px-10px py-4px rounded-full text-xs;
}

.info-section {
  @apply w-320px bg-[rgba(255,255,255,0.05)] rounded-6px overflow-hidden flex flex-col;
}

.record-count {
  @apply text-xs text-gray-400;
}

.history-list {
  @apply flex-1 overflow-y-auto;
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    @apply w-4px;
  }
  &::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  &::-webkit-scrollbar-thumb {
    @apply bg-white/20 rounded-full;
  }
  &::-webkit-scrollbar-thumb:hover {
    @apply bg-white/30;
  }
}

.record-item {
  @apply flex items-center gap-15px p-10px mb-1px hover:bg-[rgba(255,255,255,0.1)] transition-all duration-300 cursor-pointer relative;
  &.active {
    @apply bg-primary bg-opacity-20 border-l-3 border-primary;
  }
}

.record-thumbnail-wrapper {
  @apply relative w-30 h-18 rounded overflow-hidden;
}

.record-thumbnail {
  @apply object-cover;
}

.record-info {
  @apply flex-1 min-w-0;
}

.record-title {
  @apply text-white text-base font-medium mb-3px;
}

.record-meta {
  @apply flex justify-between items-center;
}

.record-date {
  @apply text-gray-400 text-xs;
}

.record-location {
  @apply text-gray-400 text-xs;
}

.record-status {
  @apply absolute top-2px left-2px;
  &.normal .status-badge {
    @apply bg-green-500 text-white;
  }
  &.warning .status-badge {
    @apply bg-yellow-500 text-white;
  }
}

.selected-indicator {
  @apply absolute right-15px top-1/2 transform -translate-y-1/2 bg-primary p-4px rounded-full;
}

.check-icon {
  @apply w-12px h-12px text-white;
}
</style>
