<template>
  <view class="comment_item">
    <view class="top">
      <view class="top_left !text-#999 !text-26rpx">
        <image v-if="+props.data.topId === 0" :src="props.data.user_avatar" class="w-80rpx h-80rpx rounded-50% mr-24rpx"
               mode="aspectFill"/>
        <text class="user_name">{{ props.data.user_name }}</text>
        <text class="user_name">{{ cReplyName }}</text>
      </view>
    </view>
    <view :class="[+props.data.topId === 0 ? '!pl-34rpx ml-70rpx' : '']" class="content  !text-#333 !text-26rpx"
          @tap="replyClick(props.data)">
      {{ c_content }}
    </view>
    <view :class="[+props.data.topId === 0 ? '!pl-100rpx' : '']" class="">
      <text class="create_time !text-#999 !text-26rpx">{{ props.data.create_time }}</text>
      <text v-if="props.data.owner" class="bg-#E6E6E6 rounded-4rpx px-8rpx text-22rpx text-#333 mx-10rpx"
            @tap="deleteClick(props.data)">{{ t('common.remove') }}
      </text>
      <text class="bg-#E6E6E6 rounded-4rpx px-8rpx text-22rpx text-#333 ml-10rpx">{{ t('common.reply') }}</text>
    </view>
  </view>
</template>

<script setup>
import {computed, ref, watch} from "vue";

const {t} = useI18n();
const props = defineProps({
  // 评论数据
  data: {
    type: Object,
    default: () => {
    },
  },
  // 父级评论数据
  pData: {
    type: Object,
    default: () => {
    },
  },
});

// 被回复人名称
const cReplyName = computed(() => {
  return props.data?.reply_name ? ` ▸ ` + props.data?.reply_name : "";
});

// 点赞数显示
const cLikeCount = computed(() => {
  return props.data.like_count === 0 ? "" : props.data.like_count > 99 ? `99+` : props.data.like_count;
});

// 评论过长处理
let contentShowLength = 70; // 默认显示评论字符

let user_content = props.data.user_content;
let isShrink = ref(user_content.length > contentShowLength); // 是否收缩评论
let c_content = ref("");
watch(
    () => isShrink.value,
    (newVal) => {
      c_content.value = newVal ? user_content.slice(0, contentShowLength + 1) : user_content;
    },
    {
      immediate: true,
    }
);
// 删除变更显示定制
watch(
    () => props.data.user_content,
    (newVal, oldVal) => {
      if (newVal !== oldVal) {
        c_content.value = newVal;
      }
    }
);

// 展开文字
function expandContentFun() {
  isShrink.value = false;
}

// 收起文字
function shrinkContentFun() {
  isShrink.value = true;
}

const emit = defineEmits(["likeClick", "replyClick", "deleteClick"]);

// 点赞
function likeClick(item) {
  emit("likeClick", item);
}

// 回复
function replyClick(item) {
  emit("replyClick", item);
}

// 删除
function deleteClick(item) {
  emit("deleteClick", item);
}
</script>

<style lang="scss" scoped>
////////////////////////
.center {
  display: flex;
  align-items: center;
}

.ellipsis {
  overflow: hidden; //超出文本隐藏
  white-space: nowrap; //溢出不换行
  text-overflow: ellipsis; //溢出省略号显示
}

////////////////////////
.comment_item {
  font-size: 28rpx;

  .top {
    @extend .center;
    justify-content: space-between;

    .top_left {
      display: flex;
      align-items: center;
      overflow: hidden;

      .user_avatar {
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }

      .tag {
        margin-right: 6rpx;
      }

      .user_name {
        @extend .ellipsis;
        max-width: 180rpx;
        //color: $uni-text-color-grey;
      }
    }

    .top_right {
      @extend .center;

      .like_count {
        //color: $uni-text-color-grey;
        &.active {
          //color: $uni-color-primary;
        }
      }
    }
  }

  .content {
    padding: 10rpx 0;
    //color: $uni-text-color;
    &:active {
      //background-color: $uni-bg-color-hover;
    }

    .shrink {
      padding: 20rpx 20rpx 20rpx 0rpx;
      //color: $uni-color-primary;
    }
  }
}
</style>
