<template>
  <view class="w-100 d-flex flex-row flex-wrap" :style="{ gap: `${gap}rpx` }">
    <view 
      v-for="(v, k) in images"
      :key="k"
      :style="{ 
        width: `calc(${100 / rowCount}% - ${gap}rpx)`,
        height: imageHeight,
        borderRadius: '10rpx',
        backgroundImage: `url('${imagekey ? v[imagekey] : v}')`,
        backgroundSize: 'cover',
      }"
    >
      <Image 
        :src="imagekey ? v[imagekey] : v" 
        width="100%"
        height="100%"
        mode="aspectFit"
        touchable
        @click="itemClick(v, k)"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import Image from '@/components/basic/Image.vue';
import type { PropType } from 'vue';

const props = defineProps({	
  rowCount : {
    type: Number,
    default: 3,
  },
  imagekey : {
    type: String,
    default: undefined,
  },
  imageHeight : {
    type: String,
    default: undefined,
  },
  gap: {
    type: Number,
    default: 10,
  },
  images: {
    type: Object as PropType<any[]>,
    default: null,
  },
  preview: {  
    type: Boolean,
    default: false,
  }
})

const emit = defineEmits([	
  "itemClick"	
])

function itemClick(item: any, index: number) {
  if (props.preview) {
    uni.previewImage({
      urls: props.images.map((v: any) => (props.imagekey ? v[props.imagekey] : v) || v),
      current: (props.imagekey ? item[props.imagekey] : item) || item,
    })
  } else {
    emit('itemClick', item, index);
  }
}

</script>