<template>
  <div>
    <div class="el-comment__item" :style="{marginLeft: ~~item.level * 44 + 'px', marginTop: ~~item.level > 0 ? '16px' : 0}">
      <div class="el-comment__item--top">
        <img class="head-img" :src="item.imgUrl" alt="">
        <div class="right-side">
          <div class="right-side--top" :class="{'right-side-top-between': showBtn.length > 0 || $slots.operationBtn}">
            <span class="name">{{ item.name }}</span>
            <span class="time">{{ item.timeline }}</span>
          </div>
          <div 
            :class="showBtn.length > 0 ? '' : 'right-side__content--reply'"
            class="right-side__content">{{ item.content }}</div>
        </div>
      </div>
      <div class="el-comment__item--bottom" v-if="showBtn.length > 0 || $slots.operationBtn">
        <div class="el-comment__item_icon-box el-comment__comment" v-if="showBtn.includes('commit')" @click="appendCommit">
          <i class="el-icon-reply"></i>
          <span v-if="showCommitNum">{{ item.commitNum  ? item.commitNum : '回复' }}</span>
        </div>
        <div class="el-comment__item_icon-box el-comment__thumb-up" v-if="showBtn.includes('thumb')" @click="appendThumb">
          <i :class="'el-icon-' + (!!item.thumbActive ? 'thumb-up-fill' : 'thumb-up')"></i>
          <span>{{ item.thumbNum ? item.thumbNum : '赞' }}</span>
        </div>
        <div class="el-comment__item_icon-box el-comment__thumb-up" v-if="showBtn.includes('delete')" @click="appendDelete">
          <i class="el-icon-delete2"></i>
        </div>
        <!-- 预留一个插槽 -->
        <slot name="operationBtn"></slot>
      </div>
    </div>
    <div class="el-comment__item--extra-comment" v-show="showCommitBox" :style="{marginLeft: ((~~item.level + 1 >= 3 ? 2 : item.level + 1)) * 44 + 'px'}">
      <div class="el-comment__item--top">
        <img class="head-img" :src="item.imgUrl" alt="">
        <el-input ref="commentInput" v-model="commitContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :placeholder="item.placeholder || '请输入'" clearable :maxlength="contentMaxLength" show-word-limit></el-input>
      </div>
      <div class="el-comment__item--bottom">
        <el-button type="secondary" @click="showCommitBox = false" size="mini">取消</el-button>
        <el-button type="primary" :disabled="!commitContent" @click="updateCommitBox" size="mini">回复</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import ElButton from 'modesign-ui/packages/button';
import ElInput from 'modesign-ui/packages/input';
export default {
  name: "ElCommentItem",
  components: { ElButton, ElInput },
  props: {
    contentMaxLength:{
      type: Number,
      default: 50
    },
    item: Object,
    showBtn:{
      type: Array,
      default: () => []
    },
    showCommitNum: Boolean,
    showCommentBox: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      commitContent: '',
      showCommitBox: false
    }
  },
  created() {
    this.item.commitNum = this.item.commitNum || 0
    this.item.level = this.item.level || 0
    this.item.thumbActive = !!this.item.thumbActive
    if (this.showCommentBox) {
      this.showCommitBox =  true
    }
  },
  computed: {
  },
  methods: {
    appendThumb() {
      this.$emit('updateThumb', this.item)
    },
    appendCommit() {
      this.commitContent = ''
      this.showCommitBox = !this.showCommitBox
      if (this.showCommitBox) {
        this.$nextTick(() => {
          this.$refs.commentInput.$refs.textarea.focus()
        })
      }
    },
    appendDelete() {
      this.$emit('updateDelete', this.item)
    },
    updateCommitBox() {
      // 时间不对，人员不对，不能直接用...解构,需要抛出去给开发写
      const option = {
        content: this.commitContent,
        level: this.item.level + 1 >= 3 ? 2 : this.item.level + 1,
        commitNum : 0,
        thumbNum: 0
      }
      this.item.commitNum++
      this.$emit('updateCommit', this.item, option)
      this.showCommitBox = false
    }
  }
}
</script>
