<template>
	<div class="comment-item">
		<ImageFormat :lazy="false" :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar" @click.native="toUserPage"></ImageFormat>
		<div class="comment">
			<div class="comment-nav">
				<div class="comment-nav-left">
					<p class="comment-user-name" @click="toUserPage">
            <span class="name">{{parentComment.userName || '&nbsp;'}}</span>
          </p>
					<p class="comment-time">{{parentComment.createTime | time}}</p>
				</div>
				<WidgetFav
          class="comment-fav"
          :comment-id="parentComment.id"
          :num="parentComment.praiseTotal"
          :option="favOption"></WidgetFav>
			</div>

			<CommentPlaceholder
        class="comment-cont"
        :dest-id="parentComment.id"
        :pos-id="posId"
        :article-id="articleId"
        :add-type="1"
        :user="parentComment.userName"
        :column-type="columnType"
        @on-comment="onReply">
				{{parentComment.content}}
			</CommentPlaceholder>
			<div class="reply-main" v-if="replayShowList.length">
				<CommentPlaceholder
          tag="p"
          class="reply-item"
          v-for="(reply, replyIndex) in replayShowList"
          :key="replyIndex"
          :dest-id="reply.id"
          :add-type="1"
          :user="reply.userName"
          :column-type="columnType"
          @on-comment="() => onReply({destId: parentComment.id})">
					<span class="reply-user">{{reply.userName}}</span>
					<template v-if="reply.parentUserName">
						<span>回复</span><em class="reply-to-user">@{{reply.parentUserName}}</em>
					</template>:
          <span>{{reply.content}}</span>
				</CommentPlaceholder>
				<p class="reply-more" v-if="moreReplyNum > 0" @click="onShowMore">
          {{replyMoreText}}
          <i class="iconfont icon-right" v-if="!isShowAllReply"></i>
        </p>
			</div>
		</div>
	</div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex';
const {mapActions} = createNamespacedHelpers('comment');

export default {
  name: 'CommentItem',
  props: {
    parentComment: Object,
    childrenComments: Array,
    columnType: {
      type: Number,
      default: 1001
    },
    posId: Number,
    articleId: Number
  },
  data() {
    return {
      isShowAllReply: false,
      limitNum: 2,
    };
  },
  computed: {
    favOption() {
      return {
        selected: this.parentComment.isPraise === 'Y'
      };
    },
    replayShowList() {
      if (this.childrenComments.length <= this.limitNum) {
        return this.childrenComments;
      }
      if (this.isShowAllReply) {
        return this.childrenComments;
      }
      return this.childrenComments.slice(0, this.limitNum);
    },
    moreReplyNum() {
      return this.childrenComments.length - this.limitNum;
    },
    replyMoreText() {
      return this.isShowAllReply ? '收起' : `查看${this.moreReplyNum}条回复`;
    }
  },
  methods: {
    ...mapActions(['postComment']),
    onShowMore() {
      this.isShowAllReply = !this.isShowAllReply;
    },
    async onReply({destId}) {
      this.$emit('on-reply', {commentId: destId});
    },
    toUserPage() {
      this.$emit('on-close');

      setTimeout(() => {
        this.$router.push({
          name: 'author',
          params: {
            type: this.parentComment.userType || 1,
            id: this.parentComment.uid
          }
        });
      }, 300);
    },
  }
};
</script>

<style scoped lang="scss">
.comment-item {
  display: flex;
  margin-bottom: 40px;

  &:last-child {
    margin-bottom: 0;
  }

  .comment-user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }

  .comment {
    width: 600px;
    margin-left: 10px;
  }

  .comment-nav {
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }

  .comment-nav-left {
    flex: 1;

    .comment-user-name {
      font-size: 28px;
      color: #222;
      line-height: 40px;
      width: 100%;
      height: auto;

      .name {
        max-width: 300px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
      }
    }

    .comment-time {
      font-size: 20px;
      color: #b0b0b0;
      line-height: 28px;
      transform: scale(0.8);
      transform-origin: left;
    }
  }

  .comment-fav {
    padding-right: 20px;
  }

  .comment-cont {
    font-size: 28px;
    color: #444;
    line-height: 40px;
    margin: 12px 0 20px;
    padding-left: 10px;
    box-sizing: border-box;
  }

  .reply-main {
    background: #f0f0f0;
    padding: 20px;
    box-sizing: border-box;
    font-size: 24px;
    color: #444;
    line-height: 34px;
    margin-top: 20px;

    .reply-item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      > * {
        display: inline-block;
        vertical-align: text-top;
      }

      .reply-user,
      .reply-to-user {
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .reply-to-user {
        color: #4a90e2;
        font-style: normal;
      }

      .reply-user {
        font-weight: 500;
      }
    }

    .reply-more {
      text-align: right;
      color: #4a90e2;
    }
  }
}
</style>