<template>
  <FlexRow width="100%" wrap :gap="gap">
    <image 
      v-for="(v, k) in images"
      :key="k"
      :src="imagekey ? v[imagekey] : v" 
      :style="{ 
        width: `calc(${100 / rowCount}% - ${gap}rpx)`,
        height: imageHeight,
        borderRadius: '10rpx',
      }"
      mode="aspectFill"
      @click="itemClick(v, k)"
    />
  </FlexRow>
</template>

<script setup lang="ts">
import FlexRow from '@/components/layout/FlexRow.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>