<template>
  <view class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
    <TopNavBar title="房间相册" backgroundColor="transparent" />
    <view class="p-[8px]">
      <text class="ml-4 font-size-18 text-[#171717] font-500">全部({{ albumList.length }})</text>
    </view>

    <scroll-view scroll-y class="scroll-container overflow-auto">
      <view class="pl-[4px] pr-[4px] pb-[24px]">
        <view class="grid-container">
          <view class="album-item" v-for="(item, index) in albumList" :key="index">
            <view class="album-image-wrapper">
              <image class="album-image" :src="item.photoUrl" mode="aspectFill" @click="handlePreview(item.photoUrl)">
              </image>
              <view class="album-title">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import TopNavBar from "@/components/TopNavBar/index.vue";
import { onLoad } from "@dcloudio/uni-app";
import { usePictureStore } from "@/store";
const pictureStore = usePictureStore();

const albumList = ref([]);

onLoad(() => {
  albumList.value = pictureStore.previewImageData;
  pictureStore.setPreviewImageData([]);
});

// 处理图片预览
const handlePreview = (photoUrl) => {
  uni.previewImage({
    current: photoUrl,
    urls: albumList.value.map((item) => item.photoUrl),
  });
};
</script>

<style scoped lang="scss">
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); // 每行2列
  grid-gap: 8px;
  padding: 12px;
}

.album-item {
  position: relative;
  width: 100%;
}

.album-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; // 保持宽高1:1
  border-radius: 8px;
  overflow: hidden;
}

.album-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.6) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0 0 8px 8px;
}
</style>
