<template>
  <div
    class="course-content"
    :class="{ courseContentEn: this.$store.getters.getCurrentLaguage == 'en' }"
  >
    <h2>{{ getCourseNow().courseName }}</h2>
    <!--h3 class="course-subject">國中/二年級/{{getCourseNow().courseSubject}}</h3-->
    <div
      @click="changeGroupView()"
      :class="{ 'group-on': isChangeGroupView == true }"
      v-if="name == 'tab3'"
    >
      <svg-icon icon-class="group" class="group-btn" />
    </div>

    <Tabs :value="name" v-model="name">
      <TabPane :label="$t('studentWeb.courseContent.baseInfo')" name="tab1">
        <Row :gutter="30">
          <i-col :xs="24" :sm="24" :md="8" :lg="8">
            <h4 class="basic-title">{{ $t("studentWeb.courseContent.classID") }}</h4>
            <h4 class="basic-data">
              T{{ getCourseNow().courseID.substr(0, 5) }}
            </h4>

            <h4 class="basic-title">
              {{ $t("studentWeb.courseContent.classTime") }}
            </h4>
            <h4 class="basic-data">{{ getCourseNow().attendTime }}</h4>

            <h4 class="basic-title">
              {{ $t("studentWeb.courseContent.classroom") }}
            </h4>
            <h4 class="basic-data">{{ getCourseNow().classroom }}</h4>

            <h4 class="basic-title">{{ $t("studentWeb.courseContent.teacher") }}</h4>
            <h4 class="basic-data">{{ getCourseNow().teacher }}</h4>

            <h4 class="basic-title">
              {{ $t("studentWeb.courseContent.co-teacher") }}
            </h4>
            <span
              class="basic-data"
              v-for="(teacher, index) in getCourseNow().assistantTeachers"
              :key="index"
            >
              {{ teacher }}
              <span v-if="index != 2">、</span>
            </span>

            <h4 class="basic-title">
              {{ $t("studentWeb.courseContent.addedTime") }}
            </h4>
            <h4 class="basic-data">
              {{ getCourseNow().courseAddDate }}
            </h4></i-col
          > <i-col :xs="24" :sm="24" :md="16" :lg="16">
             <h4 class="basic-title">課程二維碼</h4>
           
            <img src="mockqrcode.jpg" width="30%" style='margin-left:-12px'>
            </i-col></Row
        >
      </TabPane>
      <TabPane :label="$t('studentWeb.courseContent.description')" name="tab2">
        {{ getCourseNow().courseDesc }}
        <br />
        <br />
        <h3>{{ $t("studentWeb.courseContent.syllabus") }}</h3>
        <br />
        <Collapse simple>
          <Panel name="1">
            1. 史蒂夫·乔布斯
            <div slot="content">
              史蒂夫·乔布斯（Steve
              Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
              <br />
              <br />
              <Collapse simple>
                <Panel name="1-1">
                  iPhone
                  <p slot="content">
                    iPhone，是美国苹果公司研发的智能手机，它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布，并在2007年6月29日正式发售。
                  </p>
                </Panel>
                <Panel name="1-2">
                  iPad
                  <p slot="content">
                    iPad是由苹果公司于2010年开始发布的平板电脑系列，定位介于苹果的智能手机iPhone和笔记本电脑产品之间，（屏幕中有4个虚拟程序固定栏）与iPhone布局一样，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫（Jonathan
                    Ive）（有些翻译为
                    乔纳森·艾维）领导的团队设计的，这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter
                    Rams的崇敬之情。
                  </p>
                </Panel>
              </Collapse>
            </div>
          </Panel>
          <Panel name="2">
            2. 斯蒂夫·盖瑞·沃兹尼亚克
            <p slot="content">
              斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
              Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
              Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
            </p>
          </Panel>
          <Panel name="3">
            3. 乔纳森·伊夫
            <p slot="content">
              乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
            </p>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane :label="$t('studentWeb.courseContent.classmates')" name="tab3">
        <div v-if="isChangeGroupView == false">
          <Row :gutter="50">
            <i-col :xs="24" :sm="24" :md="12" :lg="12">
              <table>
                <tr>
                  <th>{{ $t("studentWeb.courseContent.seatNo") }}</th>
                  <th>{{ $t("studentWeb.courseContent.name") }}</th>
                  <th>{{ $t("studentWeb.courseContent.group") }}</th>
                </tr>
                <tr
                  class="mates-list-item"
                  v-for="(item, index) in getCourseNow().students"
                  :key="index"
                  v-show="index < 15"
                >
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td v-if="getCurrentLang() == 'tw'">第{{ item.group }}組</td>
                  <td v-if="getCurrentLang() == 'en'">{{ item.group }}</td>
                </tr>
              </table>
            </i-col>
            <i-col :xs="24" :sm="24" :md="12" :lg="12">
              <table>
                <tr>
                  <th>{{ $t("studentWeb.courseContent.seatNo") }}</th>
                  <th>{{ $t("studentWeb.courseContent.name") }}</th>
                  <th>{{ $t("studentWeb.courseContent.group") }}</th>
                </tr>
                <tr
                  v-for="(item, index) in getCourseNow().students"
                  :key="index"
                  v-show="index >= 15 && index < 28"
                >
                  <td :class="{ 'my-name': index == 18 }">{{ index + 1 }}</td>
                  <td :class="{ 'my-name': index == 18 }">
                    {{ item.name }}
                    <span v-if="index == 18">{{ getCurrentLang() == "tw" ? "(我)" : "(me)"}}</span>
                  </td>

                  <td
                    :class="{ 'my-name': index == 18 }"
                    v-if="getCurrentLang() == 'tw'"
                  >
                    第{{ item.group }}組
                  </td>
                  <td
                    :class="{ 'my-name': index == 18 }"
                    v-if="getCurrentLang() == 'en'"
                  >
                    {{ item.group }}
                  </td>
                </tr>
              </table>
            </i-col>
          </Row>
        </div>
        <!--小組模式-->
        <div v-if="isChangeGroupView == true">
          <Card
            class="group-student"
            v-for="groupNo in 5"
            :key="groupNo"
            :class="{ 'group-studentEn': getCurrentLang() == 'en' }"
          >
            <h3 class="group-title" v-if="getCurrentLang() == 'tw'">
              第{{ groupNo }}組
            </h3>
            <h3 class="group-title" v-if="getCurrentLang() == 'en'">
              Group {{ groupNo }}
            </h3>
            <table>
              <tr
                v-for="(item, index) in getCourseNow().students"
                :key="index"
                v-show="item.group == groupNo && index < 28"
              >
                <td class="student-no" :class="{ 'my-name': index == 18 }">
                  {{ index + 1 }}
                </td>
                <td class="student-name" :class="{ 'my-name': index == 18 }">
                  {{ item.name }}
                  <span v-if="index == 18">{{  getCurrentLang() == "tw" ? "(我)" : "(me)" }}</span>
                </td>
              </tr>
            </table>
          </Card>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
export default {
  name: "courseContent",
  data() {
    return {
      isChangeGroupView: false,
      name: "tab1",
      istab3Now: false,
    };
  },
  methods: {
    changeGroupView() {
      this.isChangeGroupView = !this.isChangeGroupView;
    },
    getCurrentLang() {
      return localStorage.getItem("lang");
    },
    getCourseNow() {
      return this.$store.getters.getItemTitle;
    },
  },
};
</script>

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