<template>
  <div class="content_icon flex align-center">
    <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.hfrxm }}</div>
      <div class="pubContent">{{ item.hfnr }}</div>
      <div class="itemXs_time flex ">
        <div> {{ item.hfdd }}</div>
        <div>{{ item.hfsj }}</div>
        <div><span class="del" @click="delComment(item)"   v-show="userInfo==item.hfrsfzh">删除</span></div>
      </div>
    </div>
  </div>
</template>

<script setup>


const emit=defineEmits(['postReply','delComment'])
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 delComment = (item) => {
  emit('delComment',item.id)
}
</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: 15%;
        align-items: center;
        color: #000;
        .del{
          color: red;
        }
      }
    }
  }

  .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>
