<template>
  <transition name="up">
    <div
      class="comment-list"
      v-show="showComment"
    >
      <div class="comment-top">
        <div class="number">{{commentCount}}条评论</div>
        <div
          class="close"
          @click="closeComment"
        ><span>×</span></div>
      </div>

      <div class="comment-body">
<!--         <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="1"
          :immediate-check='false'
        > -->
          <span></span>
          <div
            class="comment-item"
            v-for="(item, index) in commentData"
          >
            <img
              class="user-avatar"
              :src="item.UserImg?item.UserImg:require('../../static/imgs/avatar3.jpg')"
              alt=""
            />
            <div class="user-info">
              <div class="nickname">{{item.UserName}}</div>
              <div class="comment-content">{{item.CommentContent}}</div>
              <!--             <div class="more">
              <span>—— 展开4条回复</span>
              <span class="iconfont icon-f11"></span>
            </div> -->
            </div>
          </div>

          <!--         <div class="comment-item">
          <img class="user-avatar" src="../../static/imgs/avatar2.jpg" alt="" />
          <div class="user-info">
            <div class="nickname">糖尿病患者</div>
            <div class="comment-content">
              其实是糖尿病患者到底应该注意些什么呢?
            </div>
            <div class="reply-wrap">
              <div class="comment-item" v-for="(item, index) in 5" :key="index">
                <img
                  class="user-avatar"
                  src="../../static/imgs/logo.png"
                  alt=""
                />
                <div class="user-info">
                  <div class="nickname">Alexander·Zhang</div>
                  <div class="comment-content">好好学习,天天向上!</div>
                </div>
              </div>

              <div class="pack">
                <span>——&nbsp;收起</span>
                <span class="iconfont icon-youjiantou"></span>
              </div>
            </div>
          </div>
        </div>

        <div class="comment-item">
          <img class="user-avatar" src="../../static/imgs/avatar3.jpg" alt="" />
          <div class="user-info">
            <div class="nickname">好难啊,好难啊,我操了都</div>
            <div class="comment-content">WDNMD</div>
          </div>
        </div> -->
        <!-- </van-list> -->
      </div>
      <div class="input-wrap">
        <input
          type="text"
          maxlength="30"
          placeholder="请输入您的评论内容"
          v-model="userInput"
        />
        <button
          class="submit"
          @click="submitComment"
        >发送</button>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: ["showComment", "commentList", "totalItemCount", "loadingStatus", "finishedStatus"],
  data() {
    return {
      submitStatus: true,   // 是否允许评论状态
      userInput: "",      // 用户输入的评论内容
      commentData: [],    // comment list
      commentCount: 0,     // 评论数据总数
      loading: false,
      finished: false,
    };
  },
  mounted() {

  },
  methods: {
    // 页面触底
    onLoad() {
      console.log("触底啦...");
      // this.$emit("onReachBottom")
    },

    // 用户提交评论
    submitComment() {
      if (this.userInput.trim()) {
        if(this.submitStatus) {
          // 允许用户评论
          this.submitStatus = false
          let content = this.userInput;
          this.$emit("submitComment", { content });
          this.userInput = "";
          setTimeout(() => {
            this.submitStatus = true
          }, 10000); 
        }else {
          this.$notify({
            message: '请在10秒后再评论!',
            type: 'danger'
          })
        }
      } else {
        this.$notify({
          message: '请输入评论内容',
          duration: 1000
        });
      }
    },

    closeComment() {
      // 清空评论内容
      this.commentData.length = 0;
      this.userInput = "";
      this.$emit("closeComment", { 'commentCount': this.commentCount });
    }
  },
  watch: {
    commentList: {
      handler(newValue, oldValue) {
        this.commentData = newValue;
      },
      deep: true,
      immediate: true
    },
    totalItemCount: {
      handler(newValue, oldValue) {
        this.commentCount = newValue;
      },
      immediate: true,
      deep: true
    },
/*     loadingStatus: {
      handler(newValue, oldValue) {
        console.log("loading: ", newValue);
        this.loading = newValue;
      },
      deep: true,
      immediate: true
    }, */
/*     finishedStatus: {
      handler(newValue, oldValue) {
        console.log("finished: ", newValue);
        this.finished = newValue;
      }
    } */
  }
};
</script>

<style lang="less" scoped>

.comment-list {
  width: 100%;
  // height: 100%;
  position: fixed;
  bottom: 0;
  z-index: 9;
  background-color: #fff;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  .comment-top {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    border-bottom: 1px solid #ccc;
    .number {
      flex: 1;
      text-align: center;
    }
    .close {
      font-size: 0.6rem;
    }
  }
  .comment-body {
    overflow: auto;
    height: 10rem;
    padding: 0.3rem;
    padding-bottom: 1.4rem;
    .comment-item {
      display: flex;
      margin-top: 0.2rem;
      .user-avatar {
        display: block;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        margin-right: 10px;
      }
      .user-info {
        flex: 1;
        color: #999999;
        margin-left: 0.3rem;
        font-size: 0.26rem;
        .nickname {
          text-align: left;
        }
        .comment-content {
          margin-top: 0.2rem;
          font-size: 0.3rem;
          color: #000;
        }
        .more {
          display: flex;
          align-items: center;
          font-size: 0.2rem;
          .icon-f11 {
            padding-top: 0.02rem;
            font-size: 0.6rem;
          }
        }
      }
    }

    .reply-wrap {
      .user-avatar {
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 50%;
      }

      .user-info {
        color: #999999;
        margin-left: 0.15rem;
        font-size: 0.13rem;

        .comment-content {
          margin-top: 0.1rem;
          font-size: 0.28rem;
          color: #000;
        }
      }
    }
    .pack {
      display: flex;
      align-items: center;
      font-size: 0.2rem;
      max-width: 80px;
      .icon-youjiantou {
        padding-top: 0.02rem;
        font-size: 0.4rem;
      }
    }
  }
}
.comment-wrap {
}

.input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 1rem;
  border-top: 1px solid #ccc;
  background-color: #fff;
  input {
    flex: 4;
    height: 100%;
    text-indent: 0.5rem;
  }
  button {
    margin: 0 0.3rem;
    width: 1.2rem;
    height: 0.7rem;
    background-color: #478bfa;
    border: 1px solid #478bfb;
    color: #fff;
    font-weight: bold;
    border-radius: 0.1rem;
  }
}

.up-enter-active,
.up-leave-active {
  transition: all 0.5s;
}
.up-enter,
.up-leave-to {
  transform: translateY(100%);
}

.comment-content {
  text-align: left;
}
</style>
