<template>
  <div>
    <div v-for="(reply, index) in replyList" :key="index" class="reply-list">
      <div class="title">
        <avatar-component :author="reply.user" :size="45">
          {{ timerDiff(reply.updatedAt) + $t("topic.before") }}..
        </avatar-component>
        <div v-if="reply.isApproved === 0" class="checking">
          {{ $t("topic.inReview") }}
        </div>
      </div>
      <div class="container-detail">
        <div
          class="content-html"
          v-html="$xss(formatHtml(reply.contentHtml))"
        />
        <div
          v-if="reply.images && reply.images.length > 0"
          v-viewer="{ url: 'data-source' }"
          class="images"
        >
          <el-image
            v-for="(image, imageIndex) in reply.images"
            :key="imageIndex"
            style="width: 100px; height: 100px;border-radius: 5px; margin-right: 10px"
            :src="image.thumbUrl"
            :alt="image.filename"
            :data-source="image.url"
            fit="cover"
          />
        </div>
        <div class="actions">
          <div class="left">
            <span
              v-if="reply.canLike"
              class="like"
              @click="$emit('onLike', { reply, index })"
            >
              <svg-icon
                :type="reply.isLiked ? 'liked' : 'like'"
                style="font-size: 18px"
              />
              <span class="text">
                {{ $t("topic.like") }}
                {{ reply.likeCount > 0 ? reply.likeCount : "" }}</span>
            </span>
          </div>
          <div
            v-if="reply.canHide"
            class="right"
            @click="$emit('delete', { id: reply._jv.id, type: 'reply' })"
          >
            {{ $t("topic.delete") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import s9e from '@/utils/s9e';
import timerDiff from '@/mixin/timerDiff';

export default {
  name: 'ReplyList',
  mixins: [timerDiff],
  props: {
    replyList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    formatHtml(html) {
      return html ? s9e.parse(html) : '';
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";
.reply-list {
  padding-top: 20px;
  border-top: 1px solid $border-color-base;
  display: flex;
  flex-direction: column;
  width: 100%;

  &:first-child {
    border-top: none;
  }

  > .title {
    height: 45px;
    display: flex;
    justify-content: space-between;

    > .checking {
      font-size: 12px;
      color: #fa5151;
    }
  }

  > .container-detail {
    margin-left: 60px;

    > .content-html {
      line-height: 24px;
      word-break: break-all;
      margin-top: 10px;
      font-size: 14px;
      ::v-deep p {
        font-size: 14px;
      }
    }

    > .images {
      margin-top: 20px;
      width: 330px;
    }

    > .actions {
      margin-top: 20px;
      margin-bottom: 20px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: $font-color-grey;
      font-size: 12px;

      > .left {
        > span {
          margin-right: 60px;
          cursor: pointer;

          > .text {
            margin-left: 5px;
          }
        }
      }

      > .right {
        cursor: pointer;
        color: $color-blue-base;
      }
    }
  }
}
</style>
