<template>
  <view class="flex flex-col h-screen bg-#ffffff">
    <view
      class="flex-none flex items-center justify-between px-5 py-3 bg-white shadow-md h-20 pt-10 z-999 fixed top-0 w-full box-border"
    >
      <image src="/static/aichat/black.png" class="w-3 h-4 mt-1" @click="goBack" />
    </view>
    <view class="image-gallery grid grid-cols-4 gap-1 p-4 mt-20" v-if="imageList.length > 0">
      <view
        v-for="(image, index) in imageList"
        :key="index"
        class="aspect-square overflow-hidden group"
      >
        <!-- <image
          :src="image.url"
          mode="aspectFill"
          class="w-full h-full"
          @click="handleImageClick(index)"
        /> -->

        <wd-img :width="100" :height="100" :src="image.url" :enable-preview="true" />
      </view>
    </view>

    <view v-if="videoList.length > 0" class="flex items-center justify-center mt-30">
      <view v-for="(video, index) in videoList" :key="index" class="w-full h-50">
        <video :src="video" class="w-full h-full" controls :poster="video.url"></video>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 图片列表数据
const imageList = ref([])
//视频列表
const videoList = ref([])

// 图片点击处理
// const handleImageClick = (index) => {
//   uni.previewImage({ urls: [imageList.value[index].url] })
// }
// 返回上一个页面
const goBack = () => {
  uni.navigateBack({ delta: 1 })
}

// 生命周期钩子
onMounted(() => {
  //获取本地预览图片
  const previewImages = uni.getStorageSync('previewImages')
  //视频列表
  const previewVideos = uni.getStorageSync('previewVideos')

  if (previewImages && previewImages.length > 0) {
    imageList.value = previewImages
  }

  if (previewVideos && previewVideos.length > 0) {
    videoList.value = previewVideos
  }
})
</script>

<style scoped></style>
