<template>
  <div class="classroom-detail">
    <Card style='padding:5px 30px;' >
    <div class="top-info">
      <h1 class="classroom-title">{{ getClassroomInfo.classroomName }}教室</h1>
      <div class="close-btn" @click="closeInfo">
        <v-icon iconClass="close" class="close-icon" />
      </div>
    </div>
    <br style="clear: both" />
    <Row class="basicInfo-wrapper">
      <i-col :xs="24" :sm="24" :md="24" :lg="6">
        <p>
          產品狀態：{{getClassroomInfo.status}}
        </p>
      </i-col>
      <i-col :xs="24" :sm="24" :md="24" :lg="6"
        ><div v-if="getClassroomInfo.status == '正常使用中'">
          <p>目前使用者：<span  class="using-text">{{ getClassroomInfo.currentUserName }}</span></p>
        </div></i-col
      >
      <i-col :xs="24" :sm="24" :md="24" :lg="6"
        ><p v-if="getClassroomInfo.status == '正常使用中'">
          開機運行時間：<span class="using-text">{{ getClassroomInfo.optime }}</span>
        </p></i-col
      >
      <i-col :xs="24" :sm="24" :md="24" :lg="6">
        <p v-if="getClassroomInfo.status != '修理'">
          今日開課熱度：<span class="hot-text">{{ getClassroomInfo.todayCourseNum }}</span>
        </p></i-col
      >
    </Row>
    <Row>
      <i-col :xs="24" :sm="24" :md="24" :lg="12">
        <p>產品序號：{{ getClassroomInfo.hiteachId }}</p>
        <p>
          產品版本：<span :class="{'update-text':getClassroomInfo.status == '修理'}">HiTeach {{ getClassroomInfo.hiteachVer }}&nbsp;{{
            getClassroomInfo.hiteachVerNum 
          }}<span v-if="getClassroomInfo.status == '修理'"> (有可用的更新)</span></span>
        </p>
        <p>授權時間：{{ getClassroomInfo.license }}</p>
      </i-col>
      <i-col :xs="24" :sm="24" :md="24" :lg="12">
        <p>IP：{{ getClassroomInfo.hiteachIP }}</p>
        <p>作業系統：{{ getClassroomInfo.OS }}</p>
        <p>電腦名稱：{{ getClassroomInfo.computerName }}</p>
      </i-col>
      <i-col :xs="24" :sm="24" :md="24" :lg="24" class="toolbox-wrapper">
        搭載設備：<br />
        <span class="toolbox">
          <span class="toolitem icon-light"
            ><v-icon iconClass="hi" class="tool-icon" /><span
              >HiTeach
            </span></span
          >
          <span
            class="toolitem"
            :class="{ 'icon-light': getClassroomInfo.toolbox.Haboard == true }"
          >
            <v-icon iconClass="board" class="tool-icon" />
            <span>Haboard</span>
          </span>
          <span
            class="toolitem"
            :class="{ 'icon-light': getClassroomInfo.toolbox.IRS == true }"
          >
            <v-icon iconClass="IRS" class="tool-icon" />
            <span>IRS</span>
          </span>
          <span
            class="toolitem"
            :class="{
              'icon-light': getClassroomInfo.toolbox.ezStation == true,
            }"
          >
            <v-icon iconClass="ezStation" class="tool-icon" />
            <span>ezStation</span>
          </span>
          <span
            class="toolitem"
            :class="{ 'icon-light': getClassroomInfo.toolbox.Scorates == true }"
          >
            <v-icon iconClass="socrate" class="tool-icon" />
            <span>Socrate蘇格拉底議課系統</span>
          </span>
        </span>
      </i-col>
    </Row>

    <p>所在位置：</p>
    <div class="map-area">
      <img src="@/assets/mockMap.png" />
      <v-icon
        v-for='(item,index) in mockdata'
        :key="index"
        v-show='index<30'
        iconClass="map"
        class='icon-unlight'
        :style="{
          color:item.toolbox.Scorates==true?'rgb(0, 245, 144)':'rgb(28, 192, 243)',
          left: item.mapPosData.x * 6.5 + 'px',
          top: item.mapPosData.y * 4.8 + 'px',
        }"
        :class="{'icon-light':item==getClassroomInfo}"
      />
    </div>
     </Card>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import scboardData from "@/mock/scboard";
import "@/icons/svg/close.svg";
export default {
  name: "ClassroomDetail",
  data(){
    return{
      mockdata: scboardData.scboardData.classroomList,
    }
  },
  computed: {
    ...mapGetters({
      getClassroomInfo: "scboard/getClassroomInfo",
    }),
  },
  methods: {
    ...mapMutations({
      closeInfo: "scboard/closeInfo",
    }),
  },
};
</script>

<style lang='less'>
@import "Styles/ClassroomDetail.less";
</style>