<template>
  <up-row customStyle="flex-wrap: wrap">
    <up-col span="6" v-for="(item, index) in list" :key="index">
      <view class="grid-item">
        <up-image
          :src="item.url"
          :mode="'widthFix'"
          :width="'100%'"
          @click="showImage(index)"
        ></up-image>
      </view>
    </up-col>
  </up-row>

  <view v-if="list.length === 0" style="justify-content: center">
    <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
    </u-empty>
  </view>
</template>

<script setup lang="ts">
import { PictureApi } from "@/services";
const props = defineProps<{
  params: Object;
}>();
let list: any = ref([]);
const showImage = (index: number) => {
  uni.previewImage({
    urls: list.value.map((item: any) => item.url), // 图片列表
    current: index, // 当前显示图片的索引
    indicator: "default", // 图片指示器样式，默认为圆点
    loop: true,
  });
};

if (props.params) {
  PictureApi.getAnnex(props.params as any).then((res) => {
    if (res.code === 200) {
      console.log(props.params);
      list.value = res.data;
    }
  });
}
</script>
<style lang="scss" scoped>
.grid-item {
  position: relative;
  image {
    width: 100% !important;
  }
}
</style>
