<template>
  <div class="content_icon flex align-center">
    <div class="icon_img"><img src="@/assets/images/ly-person-icon.png" alt=""></div>
    <div class="align-space-around dir-column">
      <div class="publisher">{{ item.ssbm }}—{{ item.plrxm }}</div>
      <div class="pubContent">{{ item.plnr }}</div>
      <div class="itemXs_time flex">
        <div>{{ item.pldd }}</div>
        <div>{{ item.plsj }}</div>
        <div>
          <span @click.stop="openReply(index)">回复</span>&nbsp;&nbsp;
          <span>删除</span>
        </div>
      </div>
      <div class="pubContent flex" v-if="activeIndex === index" style="align-items: flex-end">
        <el-input
          v-model="textarea2"
          style="flex: 1; margin-right: 10px;"
          type="textarea"
          placeholder="请输入内容"
        />
        <el-button type="primary" @click="sendComment(item)">发表</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['postReply'])
const props = defineProps({
  dict: {
    type: Object,
    default: () => ({})
  },
  item: {
    type: Object,
    default: () => ({})
  },
  index: {
    type: Number,
    default: 1
  }, showIndex: {
    type: Number,
    default: 1
  }
})

const textarea2 = ref('')
const activeIndex = ref(null)

const openReply = (index) => {
  // 如果点击的是当前已打开的回复框，则关闭它
  // 否则关闭其他回复框，打开当前点击的
  // activeIndex.value = activeIndex.value === index ? null : index
  textarea2.value = '' // 清空输入框内容
}

const sendComment = (item) => {
  if (!textarea2.value.trim()) return // 防止发送空内容

  const params = {
    cjid: item.cjid,
    plid: item.id,
    hfdd: "Pc端发送",
    hfnr: textarea2.value
  }
  emit('postReply', params)

  // 发送后重置状态
  textarea2.value = ''
  activeIndex.value = null
}
</script>
