<template>
  <view>
    <!-- Family album -->
    <view class="p-5 mt-4 mb-6 bg-white rounded-xl shadow-md mx-4">
      <view class="flex justify-between items-center mb-2">
        <h2 class="font-medium text-lg">多彩瞬间</h2>
        <view class="text-blue-500 flex items-center text-xs" @click="openAlbumList">
          查看更多
        </view>
      </view>
      <p class="text-sm text-gray-500 mb-3">记录每一个家庭活动瞬间</p>
      <view class="grid grid-cols-2 gap-3">
        <view
          v-for="(item, index) in albumData"
          :key="index"
          class="rounded-lg overflow-hidden h-32 relative cursor-pointer"
          @click="handleMediaClick(item, albumData)"
        >
          <image
            :src="item.type === 'video' ? item.thumbnail : item.url"
            alt="家庭活动照片"
            class="w-full h-full object-cover rounded-lg"
          />
          <!-- 视频标识 -->
          <view
            v-if="item.type === 'video'"
            class="absolute top-2 left-2 px-2 py-1 bg-black bg-opacity-70 rounded text-white text-xs"
          >
            视频
          </view>
        </view>
      </view>
    </view>

    <!-- 图片预览 -->
    <nut-image-preview
      v-model:show="previewVisible"
      :images="previewImages"
      :init-no="previewIndex"
      :show-index="false"
      @close="closePreview"
    />

    <!-- 视频播放器 -->
    <view
      v-if="videoVisible"
      class="fixed inset-0 bg-black"
      style="z-index: 9999;"
      @click="closeVideo"
    >
      <!-- 关闭按钮 -->
      <view
        @click.stop="closeVideo"
        class="absolute top-4 right-4 w-10 h-10 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
        style="z-index: 10000;"
      >
        <Close size="24" class="text-white" />
      </view>

      <!-- 视频播放器 -->
      <video
        v-if="currentVideo"
        :id="'family-album-video-' + videoId"
        :src="currentVideo.url"
        :poster="currentVideo.thumbnail"
        :controls="true"
        :autoplay="false"
        :show-center-play-btn="true"
        :show-play-btn="true"
        :object-fit="'contain'"
        :show-fullscreen-btn="true"
        style="width: 100vw; height: 50vh; position: absolute; top: 20vh; left: 0;"
        @click.stop
        @play="handleVideoPlay"
        @pause="handleVideoPause"
        @error="handleVideoError"
        @fullscreenchange="handleFullscreenChange"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { Close } from '@nutui/icons-vue-taro';
import { useMediaPreview } from '@/composables/useMediaPreview';

// 使用媒体预览 composable
const {
  previewVisible,
  previewImages,
  previewIndex,
  videoVisible,
  currentVideo,
  videoId,
  handleMediaClick,
  closePreview,
  closeVideo,
  handleVideoPlay,
  handleVideoPause,
  handleFullscreenChange,
  handleVideoError
} = useMediaPreview();

// 家庭相册数据
const albumData = ref([
  {
    type: 'image',
    url: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
  },
  {
    type: 'video',
    url: 'https://vjs.zencdn.net/v/oceans.mp4',
    thumbnail: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
  }
]);

/**
 * 打开相册列表页面
 */
const openAlbumList = () => {
  Taro.navigateTo({ url: '/pages/AlbumList/index' });
};
</script>

<style lang="less" scoped>
// 组件样式
</style>