<script setup lang="ts">
// 展示一个textarea 里面可展示图片等(暂时只加入了 图片 后续若有其他的 再添加)
// 暂时用到了快捷发布问吧 和 发布实践  以及 评论相关的内容

interface RichTextareaProps {
  placeholder?: string
  maxlength?: number
  imgList: string[]
  uploadPercent: number
  height?: number
}
interface Emits {
  deleteImg: [img: string]
}

const {
  placeholder = '请输入内容',
  maxlength,
  imgList,
  uploadPercent,
  height = 55,
} = defineProps<RichTextareaProps>()
const emit = defineEmits<Emits>()

const inputStr = defineModel<string>({ required: true })
const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
defineExpose({
  getTextarea: () => textareaRef.value,
})
</script>

<template>
  <div
    style="border: 1px solid rgb(229, 231, 235)"
    class="relative w-full rounded-lg border border-gray-200 px-3 py-2 transition focus-within:border-[var(--el-color-primary)] focus-within:ring-1 focus-within:ring-[var(--el-color-primary)] bg-white"
  >
    <!-- 文本输入区 -->
    <textarea
      ref="textareaRef"
      v-model="inputStr"
      :placeholder="placeholder"
      class="w-full resize-none border-none outline-none text-sm leading-5 text-gray-800"
      :style="{ height: height + 'px' }"
      :maxlength="maxlength"
    />
    <!-- 定位到右边 -->
    <span v-if="maxlength" class="flex justify-end text-xs text-gray-400">
      {{ inputStr?.length }} / {{ maxlength }}
    </span>

    <div class="flex justify-between items-center mt-2">
      <!-- 图片列表展示 -->
      <div
        v-if="imgList.length"
        class="flex flex-wrap gap-2"
        v-loading="uploadPercent > 0"
        :element-loading-text="uploadPercent + '%'"
      >
        <div
          class="relative w-20 h-20 rounded-lg overflow-hidden group"
          v-for="img in imgList"
          :key="img"
        >
          <!-- 删除按钮 -->
          <div
            class="absolute top-1 right-1 z-10 w-5 h-5 flex items-center justify-center bg-black/60 rounded-full cursor-pointer opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-black/80 hover:scale-110"
            @click="emit('deleteImg', img)"
          >
            <el-icon class="text-white text-xs">
              <IEpClose />
            </el-icon>
          </div>

          <el-image
            :src="img"
            class="w-full h-full rounded-lg border border-gray-200"
            fit="cover"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
