<template>
  <div class="comment-list" @click="closeEdit($event)">
    <div class="closeIcon-wrap" @click="closeCommentBoard()">
      <Icon class="closeIcon" type="md-close" />
    </div>
    <div class="title-rect-group">
      <div class="title-rect" />
      <h2 class="title-rect-name">我要發問</h2>
    </div>

    <div class="mate-list">
      <div class="classmates-comment">
        <img
          class="classmates-avatar"
          :src="`https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60`"
        />
        <span class="classmates-name">Nancy Chen</span>
        <br />
        <textarea
          class="commentArea"
          v-model="myComment"
          placeholder="輸入對課程相關的問題..."
        ></textarea>
        <p class="hintUser" v-if="hintUser == true">不得為空</p>
        <button class="commentBtn" @click="addMessage()">留言</button>
      </div>
      <br />
      <div v-for="(mateitem, myOwnIndex) in myOwnComment" :key="myOwnIndex + 'a'" >
        <div
          :id="'a' + myOwnIndex"
          class="classmates-comment myown-comment"
          @click="openEdit(myOwnIndex)"
          :class="{ 'open-comment': isOpenEdit == true && clickNo == myOwnIndex, }"
        >
          <img
            class="classmates-avatar"
            :src="`https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60`"
          />
          <span class="classmates-name">Nancy Chen</span>
          <p v-if="isOpenEdit == false || clickNo != myOwnIndex">
            {{ mateitem }}
          </p>
          <textarea
            v-if="isOpenEdit == true && clickNo == myOwnIndex"
            class="commentArea"
            v-model="myOwnComment[myOwnIndex]"
          ></textarea>
          <button
            class="commentBtn"
            v-if="isOpenEdit == true && clickNo == myOwnIndex"
            @click="deleteItem(myOwnIndex)"
          >
            刪除
          </button>
          <button
            class="commentBtn"
            v-if="isOpenEdit == true && clickNo == myOwnIndex"
            @click="editItem()"
          >
            修改
          </button>
          <br style="clear: both" />
          <p class="post-time">
            {{ `2020 年 10月 1日 22:mm:ss` }}
          </p>
        </div>
        <br />
      </div>
      <div v-for="(mateitem, index) in matesData" :key="index">
        <div class="classmates-comment">
          <img
            class="classmates-avatar"
            :src="`https://source.unsplash.com/random/100x100/?people${index}`"
          />
          <span class="classmates-name">{{ mateitem.name }}</span>
          <p>
            {{ mateitem.des }}
          </p>

          <p class="post-time">
            {{ `2020 年 10月 1日 22:10:${11 - index}` }}
          </p>
        </div>
        <br />
      </div>
    </div>
  </div>
</template>

<script>
import { Random } from "mockjs";
export default {
  name: "CommentList",

  data() {
    return {
      myComment: "",
      myOwnComment: [],
      isOpenEdit: false,
      clickNo: "",
      confirmEdit: false,
      tempSavePrevious: "",
      hintUser: false,
    };
  },

  computed: {
    matesData: function () {
      let mockdata = [];
      for (let i = 0; i < 10; i++) {
        mockdata.push({
          name: this.RandomName(),
          des: this.itemRandomDesc(),
        });
      }

      return mockdata;
    },
  },
  methods: {

    editItem() {
      this.confirmEdit = true;
    },
    closeEdit($event) {
      console.log($event.target.className);

      if (
        this.confirmEdit == true ||
        ($event.target.id != "a" + this.clickNo &&
          $event.target.className !=
            "classmates-comment myown-comment open-comment" &&
          $event.target.className != "commentArea" &&
          $event.target.className != "commentBtn" &&
          $event.target.className != "post-time" &&
          $event.target.className != "")
      )
        this.isOpenEdit = false;
      this.confirmEdit = false;
      //this.myOwnComment[this.clickNo] = this.tempSavePrevious;
    },
    deleteItem(no) {
      console.log(no)
      this.confirmEdit = false;
      this.myOwnComment.splice(no, 1);
      console.log(this.myOwnComment)
    },
    openEdit(no) {
      //this.tempSavePrevious = '之前的值';
      this.clickNo = no;
      this.isOpenEdit = true;
      console.log("暫存" + this.tempSavePrevious);
    },
    addMessage() {
    
      if (this.myComment != ""&&this.myComment.trim()!='') {
        this.myOwnComment.unshift(this.myComment);
        this.hintUser = false;
      } else {
        this.hintUser = true;
      }
      this.myComment = "";
     
    },
    closeCommentBoard() {
      this.$store.commit("OpenCommentList", false);
       this.$store.commit("ToggleSidebar",false);
    },
    RandomName() {
      return Random.name();
    },
    itemRandomDesc: function () {
      if (localStorage.getItem("lang") == "tw") {
        return Random.cparagraph(1, 7);
      } else return Random.paragraph(1, 2);
    },
  },
};
</script>

<style scoped>
@import "~@/assets/student-web/component_styles/comment-list.css";
</style>