<script lang="tsx">
import type { SetupContext } from 'vue'

interface Emits {
  fileChange: [e: Event]
}

export default defineComponent({
  setup(_, { slots, emit }: SetupContext<Emits>) {
    const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')

    const handleFileChange = (e: Event) => {
      emit('fileChange', e)
    }

    return () => {
      const UploadImgIcon = slots.default ? (
        slots.default()
      ) : (
        <div class="w-8 h-8 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg flex items-center justify-center">
          <el-icon size="30" class="cursor-pointer">
            <svg-icon name="icon_picture" />
          </el-icon>
        </div>
      )

      return (
        <div>
          <input
            type="file"
            class="hidden"
            ref="fileInputRef"
            onChange={handleFileChange}
            accept="image/*"
            multiple
          />
          <div onClick={() => fileInputRef?.value?.click()}>{UploadImgIcon}</div>
        </div>
      )
    }
  },
})
</script>
