<template>
  <div class="homework">
    <br />
    <div v-if="openLightBox" class="lightBox">
      <Icon class="ImgCloseIcon" type="md-close" @click="closeImg()" />
      <div
        v-for="(item, index) in this.$store.getters.getItemTitle.imgList"
        :key="index"
        v-show="index + 1 == targetImg"
      >
        <img class="lightboxImg" :src="item.img" />
        />
        <p class="Imgtext">Image{{ index + 1 }}.name</p>
      </div>
      <!--切換頁-->
      <button class="ImgleftBtn" @click="pre()">
        <Icon type="ios-arrow-back" />
      </button>
      <button class="ImgrightBtn" @click="next()">
        <Icon type="ios-arrow-forward" />
      </button>
    </div>
    <EventBasicInfo />
    <HomeworkDetail v-if="this.$store.getters.getItemTitle.isDone == false" />
    <br />
    <Tabs value="tab2" v-if="this.$store.getters.getItemTitle.isDone == true" :animated="false">
      <TabPane :label="$t('studentWeb.homework.contentPage')" name="tab1" >
        <div class="billboard-and-LightBox">
          <div class="title-rect-group">
            <div class="title-rect" />
            <h2 class="title-rect-name">{{$t('studentWeb.billboard.description')}}</h2>
            <div class="dec">
              <p>
                <a
                  target="_blank"
                  class="referlink"
                  href="https://zh.wikipedia.org/wiki/%E6%AA%80%E9%A6%99%E5%B1%B1"
                >{{$t('studentWeb.billboard.referlink')}}</a>
                {{ this.$store.getters.getItemTitle.eDes
                }}
                <a
                  target="_blank"
                  class="referlink"
                  href="https://zh.wikipedia.org/wiki/%E6%AA%80%E9%A6%99%E5%B1%B1"
                >{{$t('studentWeb.billboard.referlink')}}</a>
                {{ this.$store.getters.getItemTitle.eDes }}
              </p>
              <Row :gutter="10" class="decImgs">
                <i-col
                  :xs="0"
                  :sm="0"
                  :md="12"
                  :lg="4"
                  v-show="index<=5"
                  v-for="(item, index) in this.$store.getters.getItemTitle.imgList"
                  :key="index"
                >
                  <div
                    class="decImg"
                    v-bind:style="{ 'background-image': 'url(' +`'${item.img}'` + ')' }"
                    @click="openImg(index + 1)"
                  >
                    <span v-if="index==5" class="decImglasthint">6+</span>
                  </div>
                </i-col>
                <!--小於767px時圖片以輪播方式呈現-->
                <i-col :xs="24" :sm="24" :md="0" :lg="0">
                  <Carousel
                    width="100%"
                    style="z-index:1"
                    v-model="value1"
                    :autoplay="setting.autoplay"
                    :dots="setting.dots"
                    :radius-dot="setting.radiusDot"
                    :trigger="setting.trigger"
                    :arrow="setting.arrow"
                  >
                    <CarouselItem
                      class="demo-carousel"
                      v-for="(item, index) in this.$store.getters.getItemTitle.imgList"
                      :key="index"
                    >
                      <div
                        class="carouselImg"
                        v-bind:style="{ 'background-image': 'url(' +`'${item.img}'` + ')' }"
                      ></div>
                    </CarouselItem>
                  </Carousel>
                </i-col>
              </Row>
            </div>
            <div class="title-rect-group">
              <div class="title-rect" />
              <h2 class="title-rect-name">{{$t('studentWeb.billboard.attachment')}}</h2>
            </div>

            <!--w><-->
            <div class="dec">
              <li v-for="item in Math.floor(Math.random() * 3) + 1" :key="item">
                <a class="referdoclink" download href="./PlayerAPI_v1.0.6.pdf">
                  <svg-icon icon-class="doc2" class="docIcon" />
                  {{$t('studentWeb.billboard.reference')}}
                  {{ item }} -
                  {{ docname() }}
                </a>
              </li>
            </div>
            <!--w><-->
          </div>
        </div>
        <div class="title-rect-group">
          <div class="title-rect" />
          <h2 class="title-rect-name">{{$t('studentWeb.homework.homeworkUpload')}}</h2>
        </div>
        <br />
        <Row :gutter="20">
          <i-col :xs="24" :sm="24" :md="12" :lg="6">
            <div class="upload-item">
              <a download href="./PlayerAPI_v1.0.6.pdf">
                <div class="upload-item-icon">
                  <svg-icon icon-class="doc" />
                </div>
                <div class="upload-item-info">
                  <li class="upload-item-name">我繳交的作業名稱</li>
                  <li class="upload-item-time">{{ this.$store.getters.getItemTitle.endTime }} {{$t('studentWeb.classmatesComment.submitted')}}</li>
                </div>
              </a>
            </div>
          </i-col>
        </Row>
      </TabPane>
      <TabPane :label="$t('studentWeb.homework.scorePage')" name="tab2">
        <HomeworkFeedback v-if="this.$store.getters.getItemTitle.isDone == true" />
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import EventBasicInfo from "../../EventBasicInfo";
import HomeworkDetail from "./HomeworkDetail";
import HomeworkFeedback from "./HomeworkFeedback";
import { Random } from "mockjs";
export default {
  name: "Howework",
  components: {
    HomeworkDetail,
    HomeworkFeedback,
    EventBasicInfo,
  },
  created() {
    this.openLightBox = false;
  },
  data() {
    return {
      value1: 0,
      openLightBox: false,
      targetImg: "",
      setting: {
        autoplay: false,
        dots: "outside",
        radiusDot: true,
        trigger: "click",
        //arrow: "always"
      },
    };
  },

  methods: {
    docname() {
      if (localStorage.getItem('lang') == "tw") {
        return Random.ctitle(20, 30) + " .pdf";
      } else {
        return Random.title(10, 15) + " .pdf";
      }
    },
    next() {
      //console.log(this.targetImg)
      if (this.targetImg > 4) {
        this.targetImg = 1;
      } else this.targetImg += 1;
    },
    pre() {
      //console.log(this.targetImg)
      if (this.targetImg < 2) {
        this.targetImg = 5;
      } else this.targetImg -= 1;
    },
    openImg(targetImg) {
      this.openLightBox = true;
      this.targetImg = targetImg;
    },
    closeImg() {
      this.openLightBox = false;
    },
  },
};
</script>

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