<template>
  <div class="classmates-commentPages">
    <loading
      :active.sync="isLoading"
      :is-full-page="fullPage"
      background-color="#000"
      :opacity="opacity"
    >
      <template slot="default">
        <svg-icon icon-class="ies5logo2" class="loader-icon" />
        <span class="aclassoneloading">Student</span>
      </template>
    </loading>
    <div class="commentPages-title">
      <span class="logoutIcon" @click="closeComment()">
        <svg-icon icon-class="logout" />
      </span>
      {{$t('studentWeb.classmatesComment.title')}}
    </div>

    <Row :gutter="30" class="mates-content">
      <i-col class="mates-list" :xs="0" :sm="0" :md="0" :lg="6">
        <br />
        <table>
          <tr>
            <th>{{$t('studentWeb.classmatesComment.seatNo')}}</th>
            <th>{{$t('studentWeb.classmatesComment.name')}}</th>
            <th>{{$t('studentWeb.classmatesComment.star')}}</th>
            <th>{{$t('studentWeb.classmatesComment.comment')}}</th>
          </tr>

          <tr
            class="mates-list-item"
            :class="{ 'mate-selected': getCurrentClassmates.name == item.name }"
            v-for="(item, index,) in students"
            :key="index"
            v-show="index < 30 && item.isUploadHomework == true"
            @click="changeMate(item, index + 1)"
          >
            <td>{{ index + 1 }}</td>
            <td :class="{ isUploadFile: item.isUploadHomework == true }">{{ item.name }}</td>
            <td>
              <Rate
                v-if=" item.isGivenComment == true|| senttoServer.includes(index + 1)"
                allow-half
                v-model="valueCustomText[indexofShowArray[index]]"
              >
                <!--span class="homework-rate-num">{{valueCustomText[indexofShowArray[index]] }}</span-->
              </Rate>
            </td>

            <td>
              <p
                v-if="
                  item.isUploadHomework == true && item.isGivenComment == true
                "
              >
                <svg-icon icon-class="message" class="comment-icon" />
              </p>
              <p
                v-if="
                  item.isGivenComment == false &&
                    senttoServer.includes(index + 1)
                "
              >
                <svg-icon icon-class="message" class="comment-icon" />
              </p>
            </td>
          </tr>
        </table>
      </i-col>

      <i-col class="mates-homework" :xs="24" :sm="24" :md="24" :lg="18">
        <h2 style="margin-bottom:-15px">
          {{ getCurrentClassmatesID }}
          {{ getCurrentClassmates.name }}
        </h2>
        <Row :gutter="30">
          <i-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="title-rect-group">
              <div class="title-rect" />
              <h2
                class="title-rect-name"
              >{{$t('studentWeb.classmatesComment.preview')}} 0{{currentdocPreview}}</h2>
            </div>
          </i-col>
          <i-col :xs="24" :sm="24" :md="12" :lg="12" class="uploadTime">
            <span v-if="this.$store.getters.getCurrentLaguage=='tw'"><svg-icon icon-class="time" class="base-info-icon" />提交時間：2020年6月10日 13:45:25</span>
            <span
              v-if="this.$store.getters.getCurrentLaguage=='en'"
            >Submission time: 13:45:25, June 10, 2020</span>
          </i-col>
        </Row>

        <br />

        <!--div class="mates-homework-content">
          <h2>{{ randomHomeworkComtent()[1] }}</h2>
          {{ randomHomeworkComtent()[0] }}
          <br />
          <br />

          <img :src="randomHomeworkComtent()[2]" alt />
          <img :src="randomHomeworkComtent()[2]" alt />
          <br />
        </div-->
        <Row :gutter="20">
          <i-col :xs="24" :sm="24" :md="18" :lg="18">
            <iframe
              v-if=" currentdocPreview!=2"
              class="uploadPPTarea"
              :src="
            `./PlayerAPI_v1.0.6.pdf#page=${
              this.$store.getters.getCurrentPdfpage
            }?+${new Date().getTime()}`
          "
              width="100%"
            />
            <div class="cannotPreview" v-if=" currentdocPreview==2">
              <div class="cannotPreviewContent">
                <h3>{{$t('studentWeb.classmatesComment.unPreview')}}</h3>

                <a href="./PlayerAPI_v1.0.6.pdf" download>
                  <button class="uploadBtn">{{$t('studentWeb.classmatesComment.download')}}</button>
                </a>
              </div>
            </div>
          </i-col>
          <i-col :xs="24" :sm="24" :md="6" :lg="6"  class="multidocarea">
           
              <div
                class="upload-item"
                v-for="item in multidoc" :key="item"
                :class="{'upload-item-selected':item==currentdocPreview}"
                @click="changeDocNo(item)"
              >
                <div class="upload-item-icon">
                  <svg-icon icon-class="doc" />
                </div>
                <div class="upload-item-info">
                  <li class="upload-item-name">檔案名稱 0{{item}}</li>
                  
                </div>
              </div>
          
          </i-col>
        </Row>

        <div class="title-rect-group">
          <div class="title-rect" />
          <h2 class="title-rect-name">{{$t('studentWeb.classmatesComment.comment')}}</h2>
        </div>
        <br />
        <Rate
          class="homework-rate"
          show-text
          allow-half
          v-model="valueCustomText[currentIndex() - 1]"
        >
          <span class="homework-rate-num">{{ valueCustomText[currentIndex() - 1] }}</span>
        </Rate>
        <br />
        <textarea
          class="comment-ungiven"
          :class="{ 'comment-given': comments[currentIndex() - 1] != '' }"
          v-if="getCurrentClassmates.isGivenComment == false&&senttoServer.includes(getCurrentClassmatesID)==false"
          :placeholder="$t('studentWeb.classmatesComment.inputSomething')"
          v-model="comments[currentIndex() - 1]"
          cols="10"
          rows="5"
        ></textarea>
        <textarea
          class="comment-given"
          v-if="getCurrentClassmates.isGivenComment == true||senttoServer.includes(getCurrentClassmatesID)==true"
          v-model="comments[currentIndex() - 1]"
          cols="10"
          rows="5"
        ></textarea>
        <!--button class="comment-btn">
          <span v-if="getCurrentClassmates.isGivenComment == false&&comments[currentIndex() - 1]==''">給評</span
          ><span v-if="getCurrentClassmates.isGivenComment == true||comments[currentIndex() - 1]!=''">更新</span>
        </button-->
        <br style="clear:both" />
        <br />
        <div class="changePage-btn">
          <button
            v-if="currentIndex()>1"
            class="page-btn"
            @click="preMate()"
          >{{$t('studentWeb.classmatesComment.previous')}}</button>
          <span class="page-num">{{ currentIndex() }}/{{ finishedStudentNum }}</span>
          <button
            :class="{'hint-page-next': comments[currentIndex()-1]!=''}"
            v-if="currentIndex()<this.finishedStudentNum"
            class="page-btn"
            @click="nextMate()"
          >{{$t('studentWeb.classmatesComment.next')}}</button>
          <button
            :class="{'hint-submit': comments[currentIndex()-1]!=''}"
            class="page-btn"
            @click="sentComment(getCurrentClassmatesID)"
          >{{$t('studentWeb.classmatesComment.submitBtn')}}</button>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { Random } from "mockjs";
import mockdata from "@/api/newData";
import mockdataEn from "@/api/newDataEn";
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/vue-loading.css";
export default {
  name: "ClassmatesCommentPages",

  data() {
    return {
      //loading畫面
      ishideHint: false,
      isLoading: false,
      fullPage: true,
      opacity: 0.6,
      //loading畫面
      currentdocPreview: 1,
      students: "",
      valueCustomText: [],
      valueCustomTextforList: [], //給List顯示的
      finishedStudentNum: 0,
      finishedStudent: [],
      finishedStudentID: [],

      comments: [],
      senttoServer: [],
      currentStarID: 0,
      indexA: 0,
      indexofShowArray: [],
      indexofShow: 0,
    };
  },
  components: {
    Loading,
  },

  computed: {
    multidoc() {
      return Math.floor(Math.random() * 10) + 2;
    },
    getCurrentClassmates() {
      return this.$store.getters.getCurrentClassmatesComment;
    },
    getCurrentClassmatesID() {
      return this.$store.getters.getCurrentClassmatesCommentID;
    },
  },
  created() {
    if (localStorage.getItem("lang") == "tw") {
      this.students = mockdata.courseList[0].students;
    } else this.students = mockdataEn.courseList[0].students;
    let count = 0;
    //給content顯示的
    for (let i = 0; i < 30; i++) {
      if (this.students[i].isUploadHomework == true) {
        this.indexofShowArray.push(this.indexofShow);
        this.indexofShow++;
        count++;
        this.finishedStudent.push(this.students[i]);
        this.finishedStudentID.push(i);
        if (this.students[i].isGivenComment == true) {
          this.comments.push("可圈可點");
          this.valueCustomText.push(4.5);
          this.valueCustomTextforList.push(4.5);
        } else {
          this.comments.push("");
          this.valueCustomText.push(0);
          this.valueCustomTextforList.push(0);
        }
      } else {
        this.indexofShowArray.push(0);
        this.valueCustomTextforList.push(0);
      }
    }
    //給List顯示的

    this.finishedStudentNum = count;
    console.log(this.comments);
    console.log(this.indexofShowArray);
  },
  methods: {
    currentIndex() {
      return (
        this.finishedStudent.indexOf(
          this.$store.getters.getCurrentClassmatesComment
        ) + 1
      );
    },
    currentIndexID(index) {
      return this.finishedStudentID.indexOf(index);
    },
    randomHomeworkComtent() {
      let homeworkComtent = [];
      let doc = Random.cparagraph(80, 90);
      let title = Random.ctitle(4, 10);
      let img = `https://source.unsplash.com/random/${
        Math.floor(Math.random() * 200) + 200
      }x${Math.floor(Math.random() * 200) + 200}`;
      homeworkComtent.push(doc, title, img);
      return homeworkComtent;
    },
    closeComment() {
      this.isLoading = true;
     if(this.$store.getters.getFinishedItem.includes(this.$store.getters.getItemTitle.eventID)){
        this.$emit("isHintNextItem", true); //傳回父組件，通知已經完成本次測驗，可以提示下一個活動為何
     }
      // simulate AJAX
      setTimeout(() => {
        this.$store.commit("ToggleClassmatesComment");
        this.isLoading = false;
      }, 8000);
    },
    changeMate(item, ID) {
      this.$store.commit("ChangeClassmatesComment", item);
      this.$store.commit("ChangeClassmatesCommentID", ID);
      this.currentdocPreview = 1;
    },
    changeDocNo(docNo) {
      this.currentdocPreview = docNo;
    },
    preMate() {
      //如沒按送出，切上一個時立刻清掉
      if (this.senttoServer.includes(this.getCurrentClassmatesID) == false) {
        this.comments[this.currentIndex() - 1] = "";
      }

      if (this.currentIndex() > 1) {
        this.$store.commit(
          "ChangeClassmatesComment",
          this.finishedStudent[this.currentIndex() - 1 - 1]
        );
        this.$store.commit(
          "ChangeClassmatesCommentID",
          this.finishedStudentID[this.currentIndex() - 1] + 1
        );
        this.currentdocPreview = 1;
      }
    },
    nextMate() {
      //如沒按送出，切上一個時立刻清掉
      if (this.senttoServer.includes(this.getCurrentClassmatesID) == false) {
        this.comments[this.currentIndex() - 1] = "";
      }

      if (this.currentIndex() < this.finishedStudent.length) {
        this.$store.commit(
          "ChangeClassmatesComment",
          this.finishedStudent[this.currentIndex() - 1 + 1]
        );
        this.$store.commit(
          "ChangeClassmatesCommentID",
          this.finishedStudentID[this.currentIndex() - 1] + 1
        );
        this.currentdocPreview = 1;
      }
    },
    sentComment(index) {
      this.senttoServer.push(index);
    },
  },
};
</script>

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