<!--Louise的智能教室使用分析儀表板-->
<!--v-icon iconClass="trash" /-->
<style lang="less" scoped>
@import "./Index.less";
</style>

<template >
  <div id="scboard" :class="{ 'fs-scboard': isFullscreenNow == true }">
    <div>
      <Row :gutter="20" class="cards-wrapper">
        <i-col :xs="24" :sm="24" :md="24" :lg="9">
          <Card
            class="classrooms-card"
            :class="{ 'fs-classrooms-card': isFullscreenNow == true }"
          >
            <div class="top-infoBtn">
              <p class="title">
                <span class="title-btn" @click="setFullscreen">
                  <span v-if="isFullscreenNow == false">
                    <v-icon
                      iconClass="fullscreen"
                      class="full-screen-icon"
                    />&nbsp; &nbsp;全屏檢視</span
                  >
                  <span class="title-btn" v-if="isFullscreenNow == true">
                    <v-icon
                      iconClass="nomalScreen"
                      class="full-screen-icon"
                    />&nbsp; &nbsp;一般檢視</span
                  >
                </span>
                <span
                  class="map-btn"
                  :class="{ 'map-open': getMapInfo == true }"
                  @click="
                    getMapInfo == true
                      ? closeInfo()
                      : setClassroomInfo(mockdata[0])
                  "
                  >&nbsp; &nbsp;<v-icon
                    iconClass="map"
                    style="margin-left: 10px"
                  ></v-icon
                  >&nbsp;教室地圖</span
                >
              </p>
              <span style="float: right"
                ><v-icon iconClass="conference" /> 133間
                <v-icon iconClass="clock" style="margin-left: 10px" /> 812h
                11m</span
              >

              <br style="clear: both" />

              <Classroomlist
                :showfilter="showClassroomListFilter"
                :isFullscreenNow="isFullscreenNow"
              />
            </div>
          </Card>
        </i-col>

        <i-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="14"
          v-if="getOpenClassroomInfo == true && showClassroomChartView == false"
        >
          <ClassroomDetail
            :class="{ 'fs-classroomDetail': isFullscreenNow == true }"
          />
        </i-col>

        <i-col :xs="24" :sm="24" :md="24" :lg="6" v-if="getMapInfo == false">
          <!--開課數觀察卡牌-->
          <Card
            class="course-card"
            :class="{ 'fs-course-card': isFullscreenNow == true }"
            >開課數觀察
            <InfoTitle :titleName="infotitles[3]" />
            <ClassNumLineAreaChart
              :class="{ 'fs-course-chart': isFullscreenNow == true }"
            />
            <Row>
              <i-col :xs="24" :sm="24" :md="12" :lg="12">
                <InfoTitle :titleName="infotitles[4]" />
                <p class="maininfo-num">
                  123<span class="subinfo-num"
                    >/100
                    <div class="num-percent" :class="{ 'num-up': true }">
                      {{
                        Math.abs(Number(((123 - 100) / 100) * 100).toFixed(1)) +
                        "%"
                      }}<v-icon iconClass="up" class="down-icon" /></div
                  ></span>
                </p>
              </i-col>
              <i-col :xs="24" :sm="24" :md="12" :lg="12">
                <InfoTitle :titleName="infotitles[5]" />
                <p class="maininfo-num">4690</p>
              </i-col>
            </Row>
          </Card>
          <!--大螢幕時展開版本系統卡牌-->
          <Row :gutter="20" v-if="getMapInfo == false">
            <i-col :xs="24" :sm="24" :md="12" :lg="12">
              <Card
                class="version-card"
                :class="{ 'fs-version-card': isFullscreenNow == true }"
                ><p class="version-card-title">智慧教室Hiteach版本</p>
                <HiteachVersionPie
                  @HiteachInfo="HiTeachVerByPie"
                  :class="{ 'fs-HiteachVersionPie': isFullscreenNow == true }"
                />
                <div
                  class="hiVer-info"
                  :class="{ 'fs-hiVer-info': isFullscreenNow == true }"
                >
                  總計: <span class="hiVer-rooms-num">56</span> 間
                  <Row class="hiVer-infodata">
                    <i-col
                      v-for="(item, index) in hiteachVersionInfo"
                      :key="index"
                      :xs="24"
                      :sm="24"
                      :md="12"
                      :lg="index != 4 ? 12 : 16"
                    >
                      <div
                        class="hiVer-dot"
                        :style="{
                          background: hiteachVersionInfoColor[index],
                        }"
                      ></div>
                      <p class="hiVer-name">{{ item.name }}</p>
                      <p class="hiVer-val">{{ item.value }}</p>
                      <p class="hiVer-percent">
                        ({{
                          ((item.value / hiteachVersionTotal) * 100).toFixed(
                            1
                          ) + "%"
                        }}
                        )
                      </p>
                    </i-col>
                  </Row>
                </div>
              </Card>
            </i-col>
            <i-col :xs="24" :sm="24" :md="12" :lg="12"
              ><Card
                class="version-card"
                :class="{ 'fs-version-card': isFullscreenNow == true }"
              >
                <p class="version-card-title">作業系統版本</p>
                <OSVersionPie
                  @highLightInfo="OSDataByPie"
                  :class="{ 'fs-OSVersionPie': isFullscreenNow == true }"
                />
                <div
                  class="os-info"
                  :class="{ 'fs-os-info': isFullscreenNow == true }"
                >
                  <p class="os-name">{{ osInfo.name }}</p>
                  <p class="os-percent">{{ osInfo.percent + "%" }}</p>
                  <p class="os-rooms">
                    總計:
                    <span class="os-rooms-num">{{ osInfo.val }}</span> 間
                  </p>
                </div>
              </Card></i-col
            >
          </Row>
        </i-col>
        <!--大螢幕才出現的熱度圖-->
        <i-col :xs="24" :sm="24" :md="24" :lg="5" v-if="getMapInfo == false">
          <Card
            class="heatMap-card"
            :class="{ 'fs-HeatMap': isFullscreenNow == true }"
            ><Dropdown>
              <a href="javascript:void(0)" class="heatMap-card-title"
                >{{ monthSelect }}月
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <div
                  v-for="month in [10, 11, 12]"
                  :key="month"
                  @click="selectMonth(month)"
                >
                  <DropdownItem>{{ month }}月</DropdownItem>
                </div>
              </DropdownMenu> </Dropdown
            >開課熱度
            <MonthCourseHeatMap
              :monthSelect="monthSelect"
              @monthClassNum="monthClassNumfromHeatMap"
              :class="{ 'fs-HeatMapCanvas': isFullscreenNow == true }"
            />
            <p class="month-classNum">
              總計：<span class="classNum-text">{{ monthClassNum }} </span>堂
            </p></Card
          >
          <!--課堂參與人次觀察卡牌-->
          <Card
            class="student-source-card"
            :class="{ 'fs-student-source-card': isFullscreenNow == true }"
            >課堂參與人次觀察
            <InfoTitle :titleName="infotitles[0]" />
            <Row>
              <i-col :xs="24" :sm="24" :md="15" :lg="15">
                <StudentSourceRingPie @StudentSourceInfo="StudentSourceByPie"
              /></i-col>
              <i-col :xs="24" :sm="24" :md="9" :lg="9">
                <Row class="student-infodata">
                  <i-col
                    class="student-infodataItem"
                    v-for="(item, index) in studentSourceInfo"
                    :key="index"
                    :xs="24"
                    :sm="24"
                    :md="24"
                    :lg="24"
                  >
                    <div
                      class="student-dot"
                      :style="{ background: studentSourceColor[index] }"
                    ></div>
                    <p class="student-name">{{ item.name }}</p>
                    <p class="student-val">
                      {{ item.value
                      }}<span class="student-percent"
                        >({{
                          ((item.value / studentSourceTotal) * 100).toFixed(1) +
                          "%"
                        }}
                        )</span
                      >
                    </p>
                  </i-col>
                </Row>
              </i-col>
            </Row>

            <Row>
              <i-col :xs="24" :sm="24" :md="12" :lg="12">
                <InfoTitle :titleName="infotitles[1]" />
                <p class="maininfo-num">
                  2690<span class="subinfo-num"
                    >/3000
                    <div class="num-percent" :class="{ 'num-down': true }">
                      {{
                        Math.abs(
                          Number(((2690 - 3000) / 3000) * 100).toFixed(1)
                        ) + "%"
                      }}<v-icon iconClass="down" class="down-icon" /></div
                  ></span>
                </p>
              </i-col>
              <i-col :xs="24" :sm="24" :md="12" :lg="12">
                <InfoTitle :titleName="infotitles[2]" />
                <p class="maininfo-num">2000</p>
              </i-col>
            </Row>
          </Card>
        </i-col>

        <i-col :xs="24" :sm="24" :md="24" :lg="4" v-if="getMapInfo == false">
          <Card
            class="rank-card"
            :class="{ 'fs-rank-card-top': isFullscreenNow == true }"
            ><p class="version-card-title">累計開課數排名</p>
            <ul
              class="rank-card-item-wrapper"
              :class="{ 'fs-rank-card-item-wrapper': isFullscreenNow == true }"
            >
              <li
                class="rank-card-item"
                v-for="(item, index) in mockRankdata"
                :key="index"
                v-show="index < 10"
              >
                <span class="rank-card-index">{{
                  rankStatus == "累計開課數排名" ? index + 1 : index - 9
                }}</span>
                <span class="rank-card-avatar">
                  <img
                    :src="`https://source.unsplash.com/random/40x40/?people${index}`"
                /></span>
                <span class="rank-card-name">{{ item.name }}</span>
                <span class="rank-card-num"
                  >{{ item.score }} <span class="last-ch">堂</span></span
                >
              </li>
            </ul>
          </Card>
        </i-col>
        <i-col :xs="24" :sm="24" :md="24" :lg="4" v-if="getMapInfo == false">
          <Card
            class="rank-card rank-card-btm"
            :class="{ 'fs-rank-card-bottom': isFullscreenNow == true }"
            ><p class="version-card-title">今日開課數排名</p>
            <ul class="rank-card-item-wrapper rank-card-item-wrapper-btm">
              <li
                class="rank-card-item"
                v-for="(item, index) in mockRankdata"
                :key="index"
                v-show="index >= 10 && index < 20"
              >
                <span class="rank-card-index">{{ index - 9 }}</span>
                <span class="rank-card-avatar">
                  <img
                    :src="`https://source.unsplash.com/random/40x40/?people${index}`"
                /></span>
                <span class="rank-card-name">{{ item.name }}</span>
                <span class="rank-card-num"
                  >{{ item.score }} <span class="last-ch">堂</span></span
                >
              </li>
            </ul></Card
          >
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
import StudentSourceRingPie from "./SubComponents/StudentSourceRingPie";
import MonthCourseHeatMap from "./SubComponents/MonthCourseHeatMap";
import ClassNumLineAreaChart from "./SubComponents/ClassNumLineAreaChart"; //圖表螢幕寬度拉伸自適應寫在這支
import HiteachVersionPie from "./SubComponents/HiteachVersionPie";
import OSVersionPie from "./SubComponents/OSVersionPie";
import Classroomlist from "./SubComponents/ClassRoomsCard/Classroomlist";
import ClassroomChartView from "./SubComponents/ClassRoomsCard/ClassroomChartView";
import ClassroomDetail from "./SubComponents/ClassRoomsCard/ClassroomDetail";
import InfoTitle from "./SubComponents/InfoTitle";
import data from "@/mock"; //引入使用mock包內的假資料
import scboardData from "@/mock/scboard";
import { mapGetters, mapMutations } from "vuex";
import "@/icons/svg/fullscreen.svg";
import "@/icons/svg/up.svg";
import "@/icons/svg/down.svg";
import "@/icons/svg/pie.svg";
import "@/icons/svg/filter.svg";
import "@/icons/svg/listview.svg";
import "@/icons/svg/fire.svg";
import "@/icons/svg/IRS.svg";
import "@/icons/svg/ezStation.svg";
import "@/icons/svg/socrate.svg";
import "@/icons/svg/board.svg";
import "@/icons/svg/hi.svg";
import "@/icons/svg/fix.svg";
import "@/icons/svg/teachNow.svg";
import "@/icons/svg/nomalScreen.svg";
import "@/icons/svg/sort-down.svg";
import "@/icons/svg/clock.svg";
import "@/icons/svg/conference.svg";
import "@/icons/svg/map.svg";

export default {
  name: "scboard",
  data() {
    return {
      infotitles: [
        "今日學生端產品使用人次分佈",
        "今日/昨日人次",
        "本學期每日平均人次",
        "今日/昨日開課數量變化",
        "今日/昨日開課總數",
        "本學期開課總數",
      ],
      mockRankdata: data.data.studentList[0].studentScore,
      mockdata: scboardData.scboardData.classroomList,
      isFullscreenNow: document.fullscreen,
      rankStatus: "累計開課數排名",
      targetVersion: "智慧教室Hiteach版本",
      showClassroomChartView: false,
      showClassroomListFilter: false,
      roomByOsTotal: 0,
      monthClassNum: 0,
      monthSelect: 10,
      hiteachVersionTotal: 0,
      hiteachVersionInfo: "",
      hiteachVersionInfoColor: [
        "#FA8D38",
        "#00F492",
        "#F862BB",
        "#65DCDA",
        "#D6B8FF",
      ],
      studentSourceTotal: 0,
      studentSourceInfo: "",
      studentSourceColor: ["#1CC0F3", "#FA8D38", "#00F492", "#ff6bcd"],
      osInfo: {
        percent: "",
        name: "",
        val: 0,
      },
    };
  },
  created() {
    //初始化時先將假資料排序
    this.mockRankdata.sort(function (a, b) {
      return b.score - a.score;
    });
  },
  components: {
    StudentSourceRingPie,
    InfoTitle,
    ClassNumLineAreaChart,
    MonthCourseHeatMap,
    HiteachVersionPie,
    OSVersionPie,
    Classroomlist,
    ClassroomChartView,
    ClassroomDetail,
  },
  computed: {
    ...mapGetters({
      getOpenClassroomInfo: "scboard/getOpenClassroomInfo",
      getMapInfo: "scboard/getMapInfo",
    }),
  },
  watch: {
    isFullscreenNow: function (value) {
      console.log(value);
    },
  },
  mounted() {
    let self = this;
    //偵測只要不是全螢幕狀態就設定值為false，解決chrome fullscreen 按esc偵測不到的問題
    window.addEventListener("resize", function () {
      if (screen.width === window.innerWidth) {
        // this is full screen
        console.log("全屏狀態");
      } else {
        console.log("非全屏狀態");
        self.isFullscreenNow = false;
      }
    });
    window.addEventListener("keydown", function (e) {
      if (event.keyCode === 27) {
        //console.log(event.keyCode)
        self.isFullscreenNow = false;
      }
    });
  },

  methods: {
    ...mapMutations({
      closeInfo: "scboard/closeInfo",
      setClassroomInfo: "scboard/setClassroomInfo",
      setMorefilterCondition: "scboard/setMorefilterCondition",
    }),
    isDocumentInFullScreenMode() {
      return document.fullscreen;
    },
    setFullscreen() {
      //https://developer.mozilla.org/zh-TW/docs/Web/API/Fullscreen_API
      //點擊呼叫全螢幕API

      let elem = document.getElementById("scboard");
      if (this.isFullscreenNow == false) {
        this.isFullscreenNow = true;
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        }
      } else {
        this.isFullscreenNow = false;
        document.exitFullscreen();
      }
    },
    setClassroomChartView: function () {
      this.showClassroomChartView = !this.showClassroomChartView;
      //切到餅圖時，把篩選選單設置，詳細資料的組件關閉
      this.showClassroomListFilter = false;
      this.closeInfo();
      //只要點擊組成視圖，重置篩選條件
      let resetfilterCondition = {
        filterClassroomType: "全部",
        filterClassroomStatus: "全部",
        filterEquip: ["全部"],
        filterUpdate: "全部",
      };
      this.setMorefilterCondition(resetfilterCondition);
    },
    setClassroomListFilter: function () {
      this.showClassroomListFilter = !this.showClassroomListFilter;
      //只要點擊篩選選單，重置篩選條件
      let resetfilterCondition = {
        filterClassroomType: "全部",
        filterClassroomStatus: "全部",
        filterEquip: ["全部"],
        filterUpdate: "全部",
      };
      this.setMorefilterCondition(resetfilterCondition);
    },
    sentRankStatus: function (status) {
      this.rankStatus = status;
    },
    sentTargetVersion: function (target) {
      this.targetVersion = target;
    },
    OSDataByPie: function (val) {
      this.osInfo.percent = val.percent;
      this.osInfo.name = val.name;
      this.osInfo.val = val.value;
    },

    HiTeachVerByPie: function (val) {
      this.hiteachVersionInfo = val;
      let total = 0;
      for (let i = 0; i < val.length; i++) {
        total += val[i].value;
      }
      this.hiteachVersionTotal = total;
    },
    StudentSourceByPie: function (val) {
      this.studentSourceInfo = val;
      let total = 0;
      for (let i = 0; i < val.length; i++) {
        total += val[i].value;
      }
      this.studentSourceTotal = total;
    },
    monthClassNumfromHeatMap: function (val) {
      this.monthClassNum = val;
    },
    selectMonth(month) {
      this.monthSelect = month;
    },
  },
};
</script>

<style lang="less">
#scboard {
  .ivu-card {
    background-color: #454545;

    margin-bottom: 20px;
    color: white;
    border-radius: 4px !important;
    border: none !important;
  }
  .rank-card {
    .ivu-card-body {
      padding-right: 0px !important;
    }
  }

  .rank-card {
    .ivu-select-dropdown {
      border-radius: 4px !important;
      width: 150px;
      background: #000;
      padding: 10px 0px;
      .ivu-dropdown-item {
        color: white;
        font-weight: 400;
        &:hover {
          color: #1cc0f3;
          background: linear-gradient(-0.75turn, #2b2b2e, #56565b85);
        }
      }
    }
  }
  .heatMap-card {
    .ivu-select-dropdown {
      border-radius: 4px !important;
      width: 60px;
      background: #000;

      .ivu-dropdown-item {
        color: white;
        width: 60px;
        font-weight: 400;
        &:hover {
          color: #1cc0f3;
          background: linear-gradient(-0.75turn, #2b2b2e, #56565b85);
        }
      }
    }
  }
  .version-card-selector {
    .ivu-select-dropdown {
      border-radius: 4px !important;
      width: auto;
      background: #000;
      padding: 10px 0px;
      margin-left: -10px;
      .ivu-dropdown-item {
        color: white;
        font-weight: 400;
        &:hover {
          color: #1cc0f3;
          background: linear-gradient(-0.75turn, #2b2b2e, #56565b85);
        }
      }
    }
  }
}
</style>
