<template>
  <div class="comment">
    <div class="comment-hd">
      <h2>
        {{ title
        }}<template v-if="showLength">（{{ dataList.length }}）</template>
      </h2>
    </div>
    <div class="comment-bd">
      <template v-if="dataList.length">
        <comment-item
          v-for="item in dataList"
          :hasReply="hasReply"
          :hasRemove="hasRemove"
          :clickDisabled="clickDisabled"
          :relatedType="relatedType"
          :activityId="activityId"
          :data="item"
          :key="item.id"
          @reply="onReply"
          @remove="onRemove"
        ></comment-item>
      </template>
      <p class="tips" v-else>暂无内容</p>
    </div>
    <div class="fix-comment">
      <div class="inner" @click="showWriteComment(related)">
        <input
          type="text"
          class="input-comment"
          placeholder="添加评论"
          disabled
        />
      </div>
    </div>
    <van-popup
      v-model="commentPopupVisible"
      round
      closeable
      close-icon-position="top-left"
      position="bottom"
      class="comment-popup"
    >
      <div class="comment-popup__hd">
        <van-button type="primary" :disabled="!commentContent" @click="onSubmit"
          >提交</van-button
        >
      </div>
      <div class="comment-popup__bd">
        <van-field
          v-model="commentContent"
          border
          type="textarea"
          ref="commentInput"
          placeholder="写点什么..."
          :autosize="{ maxHeight: 140, minHeight: 140 }"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import CommentItem from './CommentItem'
import * as api from '@/api/index'
export default {
  components: { CommentItem },
  props: {
    activityId: String,
    data: {
      type: Array,
      default() {
        return []
      }
    },
    relatedType: String, // 1: 回复 2:评论
    title: { type: String, default: '热门评论' },
    showLength: { type: Boolean, default: true },
    hasReply: { type: Boolean, default: true },
    hasRemove: { type: Boolean, default: true },
    clickDisabled: { type: Boolean, default: false },
    related: Object
  },
  data() {
    return {
      list: [],
      commentPopupVisible: false,
      commentContent: '',
      reply: null
    }
  },
  computed: {
    dataList() {
      return this.data
    }
  },
  methods: {
    // 显示添加评论框
    showWriteComment(data) {
      this.reply = data
      this.commentPopupVisible = true
      this.$nextTick(function() {
        this.$refs.commentInput.focus()
      })
    },
    onSubmit() {
      this.reply ? this.addCommentReplay(this.reply) : this.addComment()
    },
    // 回复
    onReply(data) {
      this.showWriteComment(data)
    },
    // 删除
    onRemove(data) {
      if (this.relatedType === '1') {
        // 删除评论
        this.removeComment(data)
      } else if (this.relatedType === '2') {
        // 删除回复
        this.removeCommentReply(data)
      }
    },
    // 添加评论
    addComment() {
      api
        .addComment(this.activityId, { reply_contents: this.commentContent })
        .then(response => {
          if (response.success) {
            this.handleAddSuccess()
          } else {
            this.$toast(response.message)
          }
        })
    },
    // 添加回复
    addCommentReplay(data) {
      api
        .addCommentReplay(this.activityId, {
          related_id: data.id,
          related_type: '1',
          comments: this.commentContent
        })
        .then(response => {
          if (response.success) {
            this.handleAddSuccess()
          } else {
            this.$toast(response.message)
          }
        })
    },
    handleAddSuccess() {
      this.$emit('update')
      this.commentContent = ''
      this.commentPopupVisible = false
    },
    // 删除评论
    removeComment(data) {
      api
        .deleteComment(this.activityId, { reply_id: data.id })
        .then(response => {
          if (response.success) {
            this.handleRemoveSuccess()
          } else {
            this.$toast(response.message)
          }
        })
    },
    // 删除评论回复
    removeCommentReply(data) {
      api
        .deleteCommentReply(this.activityId, { comment_id: data.id })
        .then(response => {
          if (response.success) {
            this.handleRemoveSuccess()
          } else {
            this.$toast(response.message)
          }
        })
    },
    handleRemoveSuccess() {
      this.$toast('删除成功')
      this.$emit('update')
    }
  },
  beforeMount() {
    // this.getList()
  }
}
</script>

<style lang="scss" scoped>
.comment {
  margin-top: 20px;
  border-top: 1px solid #f5f5f5;
}
.comment-hd {
  padding-top: 20px;
  h2 {
    font-size: 18px;
    font-weight: normal;
  }
}
.comment-bd {
  padding-bottom: 20px;
}
.tips {
  padding: 40px 0;
  color: #999;
  text-align: center;
}
.fix-comment {
  height: 50px;
  .inner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: env(safe-area-inset-bottom);
    max-width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }
  .input-comment {
    width: 100%;
    height: 100%;
    height: 30px;
    margin: 10px 0;
    padding: 0 10px;
    background-color: #fff;
    cursor: pointer;
  }
}
.comment-popup {
  padding: 20px;
  ::v-deep .van-popup__close-icon--top-left {
    top: 24px;
  }
}
.comment-popup__hd {
  text-align: right;
  .van-button {
    height: 30px;
    line-height: 28px;
  }
}
.comment-popup__bd {
  ::v-deep .van-cell {
    padding: 10px 0;
  }
}
</style>
