<template>
  <div class="content_icon flex ">
    <div class="icon_img"><img src="@/assets/images/ly-person-icon.png" alt="" srcset=""></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="openReply(index)" class="hf">回复</span>
          &nbsp;&nbsp;
          <span class="del" @click="delComment(item)"
          v-show="userInfo==item.plrsfzh"
          >删除</span></div>
        <div @click="showReply(item)" class="ck">查看回复</div>
        <div @click="handleLike(item)" class="ck">点赞{{dzs  }}</div>
      </div>
      <div class="pubContent flex" v-if="showInput"  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 v-if="show">
        <ReplyList :replyId="item" ref="replyList" :userInfo="userInfo"/>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref ,computed} from 'vue'
import ReplyList from './replyList.vue'

const emit = defineEmits(['postReply','cjpjZan'])
const props = defineProps({
  dict: {
    type: Object,
    default: () => ({})
  }, item: {
    type: Object,
    default: () => ({})
  },
  index: {
    type: Number,
    default: 1
  },
  showList: {
    type: Boolean,
    default:false
  }, userInfo: {
    type: String,
    default:''
  }
});
const textarea2 = ref()
const showInput = ref(false)
const show = ref(false)
const dzsAdd = ref(0)
const dzs = computed(() => {
  return props.item.dzs+dzsAdd.value
})
const openReply = () => {
  showInput.value=! showInput.value
  show.value=false
}
const replyList = ref()
const  sendComment = (item) => {
  const promes = {
    cjid: item.cjid,
    plid: item.id,
    hfdd:"Pc端发送",
    hfnr: textarea2.value
  }
   textarea2.value=''
  emit('postReply',promes)
  replyList.value? replyList.value.getList():""

}
const replyId = ref()
const showReply = (val) => {
show.value=!show.value
  showInput.value=false
  replyId.value=val
}

//删除评论
const delComment = (item) => {
  emit('delComment', item.id)
}


function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedSubmitLike = debounce(async (item) => {
  try {
    await emit('cjpjZan', item.id, dzsAdd.value);
    console.log('点赞成功');
  } catch (error) {
    console.error('点赞失败', error);
    dzsAdd.value--;
  }
}, 500);

const handleLike = (item) => {
  dzsAdd.value++;
  debouncedSubmitLike(item);
};

</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.boxlist {
  width: 99%;
  margin-top: 10px;
}

.content_box {
  padding-top: 5px;

  .title_box {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 700;
  }

  .virtual {
    position: relative;
  }

  .virtual::after {
    content: "";
    height: 4px;
    width: 70px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(0, 206, 255, 1) 0%, rgba(244, 244, 244, 1) 100%);
    z-index: 10;
  }

  .content_icon {
    margin-top: 10px;
    border-bottom: 1px solid #eee;
    padding: 10px 0;

    .icon_img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .align-space-around {
      width: calc(100% - 40px);
      // flex-wrap: wrap;
      font-size: 12px;
      color: #6e6e6e;
      padding: 4px 0;

      .publisher {
        font-size: 16px;
        font-weight: 600;
        color: #000;
      }

      .pubContent {
        font-size: 16px;
        line-height: 26px;
        margin: 10px 0;
      }

      .itemXs_time {
        justify-content: space-between;
        width: 23%;
        align-items: center;
        color: #000;

        cursor: pointer;
        .del{
          color: red;
        }
        .hf{
          color: #49bb62;
        }
        .ck{
          color: rgb(27, 115, 239);
        }
      }
    }
  }

  .content_text {
    margin: 20px 0;
    height: 40vh;
    overflow: auto;
    color: #444444;
  }
}

.itemXs_Xs {
  width: 18%;
  font-size: 14px;
  color: #5c5c5c;
  line-height: 20px;
  display: flex;
  align-items: center;

  .icon {
    font-size: 16px;
  }
}
</style>
