<template>
  <div class="card">
    <div class="card-hd">
      <div class="card-hd__pic">
        <img :src="user.avatar | avatar" />
      </div>
      <div class="card-hd__content">
        <div class="card-hd__user">
          <p>{{ user.nickname }}</p>
          <p>{{ data.created_time }}</p>
        </div>
        <div class="card-hd__tool">
          <div class="card-hd__like" :class="likeClass" @click="toggleLike">
            <template v-if="likeCount">
              {{ likeCount }}
            </template>
          </div>
          <div
            class="card-hd__menu"
            @click="menuVisible = true"
            v-if="hasMenu"
          ></div>
        </div>
      </div>
    </div>
    <div class="card-bd" @click="toCommentPage">
      <p>{{ content }}</p>
    </div>
    <div class="card-ft" v-if="hasReply && data.comments.length">
      <div class="replay">
        <template v-for="(item, index) in data.comments">
          <div class="replay-item" :key="item.id" v-if="index < 1">
            <span class="replay-item__name">{{ item.user.nickname }}：</span>
            <p class="replay-item__content">{{ item.comments }}</p>
          </div>
        </template>
        <div
          class="replay-more"
          @click="toCommentPage"
          v-if="data.comments.length > 1"
        >
          查看全部{{ data.comments.length }}条评论
        </div>
      </div>
    </div>
    <van-popup v-model="menuVisible" position="bottom">
      <div class="comment-popup" v-if="menuVisible">
        <div class="comment-popup__menu">
          <ul>
            <li v-if="hasReply" @click="onReply" class="menu-reply">回复</li>
            <li
              v-if="hasRemove && data.my_published"
              @click="onRemove"
              class="menu-remove"
            >
              删除
            </li>
          </ul>
        </div>
        <div class="comment-popup__cancel" @click="menuVisible = false">
          取消
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import * as api from '@/api/index'
export default {
  name: 'commentCard',
  props: {
    activityId: String,
    relatedType: String, // 1: 回复 2:评论
    data: Object,
    hasReply: { type: Boolean, default: true },
    hasRemove: { type: Boolean, default: true },
    clickDisabled: { type: Boolean, default: false }
  },
  data() {
    return {
      menuVisible: false,
      likeCount: parseInt(this.data.like_count),
      hasLike: this.data.has_like
    }
  },
  computed: {
    likeClass() {
      return {
        'is-active': this.hasLike
      }
    },
    user() {
      return this.data.replier || this.data.user
    },
    content() {
      return this.data.reply_contents || this.data.comments
    },
    hasMenu() {
      return this.hasReply || (this.hasRemove && this.data.my_published)
    }
  },
  methods: {
    toggleLike() {
      this.hasLike ? this.removeLiked() : this.addLike()
    },
    // 点赞
    addLike() {
      api
        .addCommentLike(this.activityId, {
          activity_id: this.activityId,
          related_id: this.data.id,
          related_type: this.relatedType
        })
        .then(response => {
          if (response.success) {
            this.likeCount++
            this.hasLike = true
          } else {
            this.$toast(response.message)
          }
        })
    },
    // 取消点赞
    removeLiked() {
      api
        .removeCommentLike(this.activityId, {
          activity_id: this.activityId,
          related_id: this.data.id,
          related_type: this.relatedType
        })
        .then(response => {
          if (response.success) {
            this.likeCount--
            this.hasLike = false
          } else {
            this.$toast(response.message)
          }
        })
    },
    // 回复
    onReply() {
      this.$emit('reply', this.data)
      this.menuVisible = false
    },
    // 删除
    onRemove() {
      this.$emit('remove', this.data)
      this.menuVisible = false
    },
    // 去评论详情页
    toCommentPage() {
      if (this.clickDisabled) {
        return
      }
      this.$router.push({
        name: 'activityComment',
        params: { commentId: this.data.id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  padding: 20px 0;
  border-bottom: 1px solid #f5f5f5;
}
.card-hd {
  display: flex;
}
.card-hd__pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.card-hd__content {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.card-hd__user {
  flex: 1;
  font-size: 12px;
  line-height: 20px;
  color: #999;
}
.card-hd__tool {
  display: flex;
}
.card-hd__like {
  padding-right: 20px;
  height: 20px;
  line-height: 24px;
  color: #333;
  background: url('~@/assets/img/icon_like.png') no-repeat right center;
  background-size: 16px;
  cursor: pointer;
}
.card-hd__like.is-active {
  color: #ab2824;
  background: url('~@/assets/img/icon_liked.png') no-repeat right center;
  background-size: 16px;
}
.card-hd__menu {
  width: 20px;
  height: 20px;
  margin-left: 20px;
  background: url('~@/assets/img/icon_menu_dot.png') no-repeat center center;
  background-size: 18px;
  cursor: pointer;
}
.card-bd {
  margin-left: 50px;
  padding-top: 20px;
}
.card-ft {
  margin-left: 50px;
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 10px;
}
.replay-item {
  line-height: 24px;
}
.replay-item__name {
  color: #1989fa;
}
.replay-item__content {
  display: inline;
  color: #333;
}
.replay-more {
  margin-top: 10px;
  color: #1989fa;
}
.comment-popup {
  padding: 0 20px;
}
.comment-popup__menu {
  li {
    padding-left: 40px;
    font-size: 16px;
    line-height: 50px;
    border-bottom: 1px solid #f5f5f5;
  }
  .menu-reply {
    background: url('~@/assets/img/icon_message.png') no-repeat left center;
    background-size: 22px;
  }
  .menu-remove {
    background: url('~@/assets/img/icon_trash.png') no-repeat left center;
    background-size: 18px;
  }
}
.comment-popup__cancel {
  line-height: 50px;
  text-align: center;
  color: #999;
}
</style>
