<template>
  <div class="homework-detail">
    
      <div v-if="isHintOpenComment == true" class="warmMessage">
        <div class="messageCard previewNextItemCard animate__animated animate__fadeInDown">
          <h2>觀摩與評論同學的作業</h2>
          <div class="list-item-icon">
            <Icon type="ios-eye-outline" class="viewcommnet-icon" />
          </div>
          <p class="nextItemTitle">
            系統檢測本次作業的觀摩互評尚未完成，前往檢視
          </p>
          <button @click="cancelPreview()">取消，自行查看</button>
          <button @click="openComment()">確定</button>
        </div>
      </div>
      <div v-if="showHint == true" class="warmMessage">
        <div class="messageCard previewNextItemCard animate__animated animate__fadeInDown">
          <h2>前往下一個活動</h2>
          <div class="list-item-icon">
            <svg-icon v-if="nextItem.eventType == '作業'" icon-class="doc" />
            <svg-icon
              v-if="nextItem.eventType == '課前預習'"
              icon-class="selflearninginTime"
            />
            <svg-icon
              v-if="
                nextItem.eventType == '評量' &&
                nextItem.eventSubject != '綜合學科'
              "
              icon-class="test"
              class="reset-testIcon"
            />
            <svg-icon
              v-if="
                nextItem.eventType == '評量' &&
                nextItem.eventSubject == '綜合學科'
              "
              icon-class="multiTest"
              class="reset-testIcon"
            />
            <svg-icon v-if="nextItem.eventType == '投票'" icon-class="vote" />
          </div>
          <p class="nextItemTitle">
            <span class="typeMark">{{ nextItem.eventType }}</span>
            {{ nextItem.eventName }}
          </p>
          <div class="setting-checkbox">
            <input type="checkbox" v-model="unhintNextItem" />
            <label> 下次不再詢問，如欲恢復提示，於個人設定頁面勾選</label>
          </div>
          <br />
          <button @click="cancelPreview()">取消，自行查看</button>
          <button @click="gotoNextItem()">確定</button>
        </div>
      </div>
    
    <div
      v-if="
        this.$store.getters.getItemTitle.endTime <= '2020.02.10' &&
        this.$store.getters.getItemTitle.allowRetryNow == false
      "
    >
      <br />
      <div class="dec animate__animated animate__bounceInLeft">
        <svg-icon icon-class="handonHint" class="warm-icon" />
        <span class="warm-hint">{{ $t("studentWeb.homework.timeoutHint") }}</span>
      </div>
    </div>
    <div
      v-if="
        this.$store.getters.getItemTitle.endTime <= '2020.02.10' &&
        this.$store.getters.getItemTitle.allowRetryNow == true
      "
    >
      <br />
      <div class="dec animate__animated animate__bounceInLeft">
        <svg-icon icon-class="handonHint" class="warm-icon" />
        <span
          class="warm-hint"
          v-if="this.$store.getters.getCurrentLaguage == 'tw'"
        >
          作業上傳時間已結束，目前為補交狀態，請於
          <span class="retry-date">2020.02.13 23:59 前</span
          >儘速補交，逾時以0分計算。
        </span>
        <span
          class="warm-hint"
          v-if="this.$store.getters.getCurrentLaguage == 'en'"
        >
          The homework task time has ended, please make up your homework
          <span class="retry-date">before 2020.02.13 23:59</span> or your score
          would be 0.
        </span>
      </div>
    </div>

      <div v-if="WarmMessageisOpen" class="warmMessage">
        <div class="messageCard animate__animated animate__fadeInDown">
          <h2>&nbsp;{{ $t("studentWeb.homework.uploadSuccess") }}</h2>
          <svg-icon icon-class="uploadSuccessful" class="uploadSuccessIcon" />

          <p>{{ $t("studentWeb.homework.uploadDes") }}</p>
        </div>
      </div>
  
    <div class="classmate-comment">
      <ClassmateCommentPages
        v-if="this.$store.getters.getisOpenClassmatesCommentNow"
        @isHintNextItem="getisHint"
      />
    </div>
    <BillBoardandLightBox />
    <div
      v-if="
        (this.$store.getters.getItemTitle.isDone == false &&
          this.$store.getters.getItemTitle.endTime > '2020.02.10') ||
        (this.$store.getters.getItemTitle.endTime <= '2020.02.10' &&
          this.$store.getters.getItemTitle.allowRetryNow == true)
      "
    >
      <div class="title-rect-group">
        <div class="title-rect" />
        <h2 class="title-rect-name">
          {{ $t("studentWeb.homework.homeworkUpload") }}
        </h2>
      </div>

      <br />

      <label class="uploadBtn" v-if="isUpload == false || uploadMessage">
        <input
          type="file"
          id="input-homework"
          multiple
          @change="reUploadFiles"
        />
        <Icon type="ios-cloud-upload-outline" class="uploadBtn-icon" />
        <span>{{ $t("studentWeb.homework.homeworkUoloadBtn") }}</span>
      </label>

      <label
        class="uploadBtn"
        @click="openComment()"
        v-if="isUpload == false || uploadMessage"
      >
        <Icon type="ios-eye-outline" class="uploadBtn-icon" />
        <span>{{ $t("studentWeb.homework.CommentClassmatesHomeworkBtn") }}</span>
      </label>
      <div v-if="isUpload == true && uploadName != ''">
        <Row :gutter="20">
          <i-col
            :key="index"
            v-for="(item, index) in uploadName"
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
          >
            <div class="upload-item">
              <div
                class="upload-item-icon"
                :class="{
                  'uploading-item-icon':
                    isUpload == true && isfinishedUpload == false,
                }"
              >
                <svg-icon icon-class="doc" />
              </div>
              <div
                class="upload-item-info"
                :class="{
                  'uploading-item-info':
                    isUpload == true && isfinishedUpload == false,
                }"
              >
                <li class="upload-item-name">{{ item[index].name }}</li>
                <div
                  class="myProgressBar"
                  v-if="isUpload == true && isfinishedUpload == false"
                >
                  <div class="myTestProgressContent"></div>
                  <div class="myTestProgress"></div>
                </div>
                <li
                  v-if="isUpload == true && isfinishedUpload == true"
                  class="upload-item-time"
                >
                  {{ getShortTime(item[index].lastModifiedDate) }} 提交
                </li>
              </div>
            </div>
          </i-col>
        </Row>
        <br />

        <label class="uploadBtn" v-if="isUpload == true">
          <input
            type="file"
            id="input-homework"
            multiple
            @change="previewFiles"
          />
          <Icon type="ios-cloud-upload-outline" class="uploadBtn-icon" />
          <span>{{ $t("studentWeb.homework.homeworkReUoloadBtn") }}</span>
        </label>

        <label class="uploadBtn" @click="openComment()" v-if="isUpload == true">
          <Icon type="ios-eye-outline" class="uploadBtn-icon" />
          <span>{{ $t("studentWeb.homework.CommentClassmatesHomeworkBtn") }}</span>
        </label>
      </div>
      <br />
      <p class="uploadMessage">{{ uploadMessage }}</p>
      <br />
      <!--ClassmateComment /-->
    </div>
  </div>
</template>

<script>
import BillBoardandLightBox from "../../EventView/BillBoardandLightBox";
//import ClassmateComment from "../../EventView/EventContentTypeTemplate/ClassmateComment";
import ClassmateCommentPages from "../EventContentTypeTemplate/ClassmateCommentPages";
import mockdata from "@/api/newData";
import mockdataEn from "@/api/newDataEn";
export default {
  name: "HomeworkDetail",
  components: {
    BillBoardandLightBox,
    //ClassmateComment,
    ClassmateCommentPages,
  },
  data() {
    return {
          unhintNextItem: false,
      mockdata: "",
      nextItem: "", //存放下個活動預告
      isHintNextItem: false,
      isHintOpenComment: false,
      showHint: false,

      uploadpercent: 0,
      isUpload: false,
      isfinishedUpload: false,
      uploadName: [],
      uploadMessage: "",
      WarmMessageisOpen: false,
      students: "",
    };
  },
  created() {
    if (localStorage.getItem("lang") == "tw") {
      this.students = mockdata.courseList[0].students;
      this.mockdata = mockdata.eventList;
    } else {
      this.students = mockdataEn.courseList[0].students;
      this.mockdata = mockdataEn.eventList;
    }
    this.WarmMessageisOpen = false;
    this.isUpload = false;
    this.uploadName = [];
    this.uploadMessage = "";
    this.WarmMessageisOpen = false;
  },
  methods: {
    getisHint(data) {
      this.isHintNextItem = data;
      console.log(this.isHintNextItem);
      this.previewNext();
      console.log(localStorage.getItem("hintNextItemSetting"));
      console.log(localStorage.getItem("hintNextItem")); //讀取是否顯示提示下一個
      if (localStorage.getItem("hintNextItem") != "false") {
        setTimeout(() => {
          this.showHint = true;
        }, 8500);
      }

      this.isHintNextItem = false;
    },
    openComment() {
      this.isHintOpenComment = false;
      let theCommentItems = [];
      let theCommentID = [];
      for (let i = 0; i <= 30; i++) {
        if (this.students[i].isUploadHomework == true) {
          theCommentItems.push(this.students[i]);
          theCommentID.push(i + 1);
        }
      }
      console.log(theCommentItems);

      this.$store.commit("ToggleClassmatesComment", theCommentItems[0]);
      this.$store.commit("ChangeClassmatesCommentID", theCommentID[0]);
    },

    getShortTime(time) {
      console.log(time);
      let shorttime = "2020.MM.dd";
      return shorttime;
    },
    reUploadFiles(event) {
      this.isUpload = false;
      this.previewFiles(event);
    },
    //作業上傳完成後，引導使用者點開同儕互評

    //同儕互評完成後，引導使用者點開下一個活動
    previewNext() {
      let eventPageType = ["課前預習", "評量", "作業", "投票"];
      let nextItems = [];

      for (let i = 0; i < this.mockdata.length; i++) {
        if (
          eventPageType.includes(this.mockdata[i].eventType) &&
          this.mockdata[i].isDone == false &&
          this.$store.getters.getFinishedItem.includes(
            this.mockdata[i].eventID
          ) == false
        ) {
          nextItems.push(this.mockdata[i]); //引導使用者前往下一個未完成的項目
        }
      }
      if (nextItems != "") {
        if (
          nextItems[0].eventName ==
          this.mockdata[this.mockdata.length - 1].eventName
        ) {
          console.log("沒有下一個!");
          this.nextItem = "allfinished";
        }
        console.log("下一個：" + nextItems[0].eventName);
        this.nextItem = nextItems[0];
      }
    },
    cancelPreview() {
      this.isHintOpenComment = false;
      this.showHint=false
    },
    gotoNextItem() {
      if (this.unhintNextItem == true) {
        this.$store.commit("sethintNextItem", false);
      }
      if (this.nextItem != "allfinished") {
        this.$store.commit("ChangeItemName", this.nextItem);
          this.$router.push("/studentWeb/eventView#" + this.nextItem.eventID);
        this.$store.commit("SetisFromInfoPoptpScroll", true);
        this.showHint = false;
      } else {
          this.$router.push("/studentWeb/homeView");
      }
    },
    previewFiles(event) {
      this.uploadName = [];

      if (event.target.files != "") {
        this.isUpload = true;

        console.log(event.target.files);
        if (event.target.files.length > 8) {
          this.uploadMessage = "最大限制上傳8個檔!!";
        } else {
          this.uploadMessage = "";
          for (let i = 0; i < event.target.files.length; i++) {
            this.uploadName.push(event.target.files);
          }

          this.$store.commit(
            "SavefinishedItemID",
            this.$store.getters.getItemTitle.eventID
          );
          this.previewNext();
        }
        this.isfinishedUpload = false;

        setTimeout(() => {
          this.isfinishedUpload = true;
          console.log("上傳完成!!"); //等待進度條跑完再秀出上傳完成
          this.WarmMessageisOpen = true;
          setTimeout(() => {
            this.WarmMessageisOpen = false;
          }, 2000);
        }, 3000);

        //加入下一個活動的提示框
        setTimeout(() => {
          this.isHintOpenComment = true;
        }, 5000);
      }
    },
  },
};
</script>

<style>
</style>
