<template>
  <div class="comment-box">
    <div v-if="commentList && commentList.length > 0">
      <div
        class="comment-item clearfix"
        v-for="(item, key) in commentList"
        :key="key">
        <img class="img fl" :src="baseUrl + item.userHeadUrl">
        <div class="comment-info">
          <div class="name">{{item.accountNickname}}</div>
          <!-- <div class="old-comment">
            <div class="text">{{item.text}}</div>
          </div> -->
          <div class="comment-text">{{item.content}}</div>
          <div class="count-box clearfix">
            <!-- 点赞 -->
            <div class="count-item stars fr" :class="{'active': item.isLike}" @click="stars(item)">
              <div class="text">{{item.likes || 0}}</div>
            </div>
            <!-- 回复 -->
            <div class="count-item comment fr" @click="reply(item, key)">
              <button v-if="userStatus.isGetUserInfo && !userStatus.isBind" open-type="getPhoneNumber" @getphonenumber="getPhone"></button>
              <div class="text">{{item.subNum || 0}}</div>
            </div>
            <!-- 时间 -->
            <div class="count-item none fl">
              <div class="text">{{item.createDate}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="none-box">
      暂无评论
    </div>
    <div class="input-box clearfix">
      <div class="send fr" @click="sendComment">发送</div>
      <div class="input">
        <input
          ref="comment"
          type="text"
          :focus="commentKey !== ''"
          :placeholder="commentKey !== '' ? '@'+commentList[commentKey].accountNickname : '请输入评论...'"
          v-model="commentText"
          @blur="blur"
          @confirm="sendComment">
      </div>
      <button v-if="userStatus.isGetUserInfo && !userStatus.isBind" open-type="getPhoneNumber" @getphonenumber="getPhone"></button>
    </div>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/http'
import { getPhone, checkAuto } from '@/utils/index'
import { startComment, comment } from '@/utils/api'
export default {
  props: ['id', 'commentList'],
  computed: {
    userStatus () {
      let { isBind = false, isGetUserInfo = false } = this.$store.state.userInfo || {}
      return {isBind, isGetUserInfo}
    }
  },
  data () {
    return {
      baseUrl: baseUrl,
      commentText: '',
      commentKey: ''
    }
  },
  created () {
    this.commentList.forEach(item => {
      item.name = this.resetName(item.name)
    })
  },
  methods: {
    // 重置姓名
    resetName (name) {
      let str = name || ''

      if (str.length === 2) {
        str = str.substr(0, 1) + '*'
      } else if (str.length > 2) {
        str = str.substr(0, 1) + '***' + str.substr(-1, 1)
      }

      return str
    },

    // 回复
    reply (info, key) {
      // 校验权限
      if (!checkAuto()) {
        return false
      }

      // 文本框有内容 不是当前回复 清空
      if (this.commentText && this.commentKey !== key) {
        this.commentText = ''
      }
      this.commentKey = key
    },

    // 评论
    async sendComment () {
      // 校验权限
      if (!checkAuto()) {
        return false
      }

      if (this.commentText.replace(/(^\s*)|(\s*$)/g, '') !== '') {
        wx.showLoading({
          title: '发表中'
        })
        let parentId = this.commentKey ? this.commentList[this.commentKey].id : ''
        await comment(this.id, this.commentText, parentId)
        this.commentKey = ''
        this.commentText = ''
        wx.showToast({
          title: '评论成功',
          icon: 'none'
        })
        this.$emit('updataComment')
      }
    },

    // input 失去焦点
    blur () {
      // 如果为空 删除回复状态
      if (this.commentText.replace(/(^\s*)|(\s*$)/g, '') === '') {
        this.commentKey = ''
      }
    },

    // 获取手机
    async getPhone (e) {
      let target = e.target

      wx.showLoading({
        title: '获取手机中'
      })

      if (target.errMsg.indexOf('ok') > -1) {
        await getPhone(e.target)
      }
      wx.hideLoading()
    },

    // 点赞
    async stars (info) {
      let {id, isLike, likes} = info

      await startComment(id)
      info.likes = isLike ? likes - 1 : likes + 1
      info.isLike = !isLike
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.comment-box{
  margin: 0 @spacing 0;
  padding-bottom: 40px;
  .comment-box();
  .none-box{
    padding: @spacing;
    height: 100px;
    line-height: 100px;
    font-size: 18px;
    text-align: center;
    color: #CCCCCC;
  }
  .input-box{
    position: fixed;
    left: 0;
    bottom: 0;
    // padding: 1px 0;
    border-top: solid 1px #E8E8E8;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #fff;
    button{
      z-index: 99;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    .send{
      width: 56px;
      border-left: solid 1px #CCCCCC;
      text-align: center;
      color: @themeColor;
    }
    .input{
      height: 100%;
      overflow: hidden;
      input{
        padding: 0 @spacing;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
    }
  }
}
</style>
