<script setup lang="tsx">
import { PropType } from 'vue'
import { ElImage } from 'element-plus'
import { Icon } from '@/components/Icon'
import { createImageViewer } from '@/components/ImageViewer'
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  alt: {
    type: String,
    default: ''
  },
  list: {
    type: Array as PropType<string[]>,
    default: () => []
  },
  ind: {
    type: Number,
    default: 0
  },
  isShowList: {
    type: Boolean,
    default: false
  },
  isShowImageViewer: {
    type: Boolean,
    default: true
  }
})
const showImageList = (src, ind) => {
  console.log(props.isShowImageViewer, 'props.isShowImageViewer')
  if (props.isShowImageViewer) {
    if (src) {
      createImageViewer({
        urlList: props.list.length > 0 ? props.list : [src],
        initialIndex: !isNaN(ind) ? ind : props.ind || 0,
        hideOnClickModal: true
      })
    }
  } else {
    emit('click')
  }
}
const emit = defineEmits(['click'])
</script>

<template>
  <div class="lh-none" @click.stop="showImageList(src, undefined)">
    <ElImage v-if="!isShowList" :alt="alt" fit="contain" class="w-[50px] h-[50px]" :src="src">
      <template #error>
        <div
          class="flex items-center justify-center w-full h-full bg-gray-200 border-rd-[4px] overflow-hidden"
        >
          <Icon icon="vi-ep:picture" />
        </div>
      </template>
    </ElImage>
    <ElImage
      v-else
      :alt="alt"
      fit="contain"
      class="w-[50px] h-[50px]"
      v-for="(item, index) in list"
      :key="index"
      :src="item"
    >
      <template #error>
        <div
          class="flex items-center justify-center w-full h-full bg-gray-200 border-rd-[4px] overflow-hidden"
        >
          <Icon icon="vi-ep:picture" />
        </div>
      </template>
    </ElImage>
  </div>
</template>
