<style lang="less" scoped>
  @import './Index.less';
</style>

<template>
    <div id="smart-dashboard" class="backdrop-dark">
      <!-- <div style="position: fixed;right: 10px;bottom: 10px;z-index: 100;">
          <Button @click="modal11 = true">Open a fullscreen modal</Button>
          <Modal v-model="modal11" fullscreen title="Fullscreen Modal">
            <FloorPlan></FloorPlan>
          </Modal>
      </div> -->
      <div v-if="!isExistShortCode" class="Header">
        <Row type="flex" justify="center" align="middle">
          <Col :span="3">
            <h1 style="color: #d0b772;font-size: 1.3em;">{{classData.schoolName}}</h1>
          </Col>
          <Col :span="8">
            <Icon size="20" type="md-pin" style="vertical-align: middle;color: #94998a" /><span class="smart-markD">{{ $t('menu.breadcrumbs')}}</span>
          </Col>
          <Col :span="11">
            <Menu class="menu" mode="horizontal" theme="dark">
              <MenuItem name="1">
                  <Icon type="ios-paper" />
                  {{ $t('menu.menu1')}}
              </MenuItem>
              <MenuItem name="2">
                  <Icon type="ios-people" />
                  {{ $t('menu.menu2')}}
              </MenuItem>
              <MenuItem name="3">
                  <Icon type="ios-people" />
                  {{ $t('menu.menu3')}}
              </MenuItem>
              <MenuItem name="4">
                  <Icon type="ios-construct" />
                  {{ $t('menu.menu4')}}
              </MenuItem>
          </Menu>
          </Col>
          <Col :span="2" style="text-align: center;">
            <img style="width: 35px;margin-top: 4px;" src="@/assets/image/touxiang.png">            
          </Col>
        </Row>
      </div>
      <div class="content">
        <div v-if="!isExistShortCode" style="text-align: center;padding-top: 5px;height: 5%;">
          <Button class="dashBoardBtn select">{{ $t('classMgmt.pageButton1') }}</Button>
          <Button to="/smartschooldashboard" class="dashBoardBtn">{{ $t('classMgmt.pageButton2') }}</Button>
        </div>
        <Row class="box" type="flex" justify="center">
          <Col  :span="8"  class="block-1 block-border">
            <!-- block-1 -->
            <!-- 边角设计 start -->
            <div class="image-border image-border-left-top" ></div>
            <div class="image-border image-border-right-top" ></div>
            <div class="image-border image-border-left-bottom" ></div>
            <div class="image-border image-border-lright-bottom" ></div>
            <!-- 边角设计 end-->
            <div style="height: 100%;">
              <div style="height: 60%;width:100%;">
                <div style="height: 100%;">
                  <div style="height: 80%;text-align: center;">
                    <template v-if="floorPlanData">                      
                      <Carousel :dots="floorPlanData.length > 1 ? 'inside' :'none'" loop>
                        <CarouselItem v-for="(item, index) in floorPlanData" :key="index">
                            <img style="width: 100%;height: 100%;" :src="item" />
                        </CarouselItem>                        
                    </Carousel>                      
                    </template>
                    <template v-else>
                      <img id="planImg" style="width: 100%;height: 100%;display: none;" src="@/assets/image/floorplan.png" />
                      <img id="pin" style="display: none;" src="@/assets/pin.svg" />
                      <img id="greenpin" style="display: none;" src="@/assets/greenpin.svg" />
                      <img id="redpin" style="display: none;" src="@/assets/redpin.svg" />
                      <canvas id="floorplan" style="width: 100%;height: 100%;">
                        当前浏览器不支持canvas
                      </canvas>
                    </template>
                  </div>
                  <div style="height: 20%;padding: 0 5%;border-bottom: 1px solid #94998a;">
                    <Row>
                      <Col :span="5" style="text-align: center;">
                        <span style="color: #94998a;">{{$t('classMgmt.block1Title1')}}</span>
                        <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.activeCount}} <small>({{classCount.activeCount/classCount.total | percentFormat(0)}}%)</small></h5>
                      </Col>
                      <Col :span="5" style="text-align: center;">
                      <span style="color: #94998a;">{{$t('classMgmt.block1Title2')}}</span>
                        <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.failCount}} <small>({{classCount.failCount/classCount.total | percentFormat(0)}}%)</small></h5>
                      </Col>
                      <Col :span="5" style="text-align: center;">
                      <span style="color: #94998a;">{{$t('classMgmt.block1Title3')}}</span>
                        <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.updateCount}} <small>({{classCount.updateCount/classCount.total | percentFormat(0)}}%)</small></h5>
                      </Col>
                      <Col :span="5" style="text-align: center;">
                      <span style="color: #94998a;">{{$t('classMgmt.block1Title4')}}</span>
                        <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.loginCount}} <small>({{classCount.loginCount/courseACT.today | percentFormat(0)}}%)</small></h5>
                      </Col>
                      <Col :span="4"  style="text-align: center;">
                        <span style="color: #94998a;">{{$t('classMgmt.block1Title5')}}</span>
                        <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.total}}</h5>
                      </Col>
                    </Row>
                  </div>
                </div>
              </div>
              <div style="height: 40%;width:100%;position: relative;overflow: auto;">
                <div class="scrollstyle" style="position: absolute;right: 0px;left: 0;top: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;">
                  <div class="classInfo" v-for="(item, index) in classInfo" :key="index">
                    <Row type="flex" justify="center" align="bottom" style="border-bottom: solid 1px #94998a;padding-bottom: 7px;">
                      <Col :span="15">
                        <h5>
                          <Icon v-if="!item.classNum || item.className=='UnKnown' || !item.ver" style="color: #ffe24e;" type="md-warning" />
                          {{ item.classNum ? item.classNum :  $t('classMgmt.text5') }}, {{item.className != 'UnKnown' ? item.className : 'No Name'}}
                        </h5>
                        <span class="ellipsis subtitle">
                          {{ item.ver ? item.ver : 'ver.0.0.0'}}&nbsp;&nbsp;|&nbsp;&nbsp;
                          {{ !item.serialExp ? $t('classMgmt.text4') :  $t('classMgmt.text2') +' '+item.serialExp }}, 
                          {{ item.classTotal ? item.classTotal : 0 }}{{ $t('unit.text7')}}
                        </span>
                      </Col>
                      <Col :span="9">
                        <Row>
                          <!-- <Col :span="12"  v-for="(h, key) in item.hardware" :key="key">
                            <img v-if="h == 'board'" class="teachIcon" width="15" height="15" src="@/assets/icon/product_board.svg">
                            <img v-else-if="h == 'irs'" class="teachIcon" width="15" height="15" src="@/assets/icon/product_irs.svg">
                            <img v-else-if="h == 'ezStation'" class="teachIcon" width="15" height="15" src="@/assets/icon/product_ezstation.svg">
                            <img v-else-if="h == 'sokrates'" class="teachIcon" width="15" height="15" src="@/assets/icon/product_sokrates.svg"> 
                          </Col> -->
                          <Col :span="12">                         
                            <Tooltip v-if="item.hardware.board" :transfer="true" placement="top-start">
                                <img class="teachIcon" width="15" height="15" src="@/assets/icon/product_board.svg">
                                <div slot="content">
                                   <p>教室名稱: {{item.hardware.board.classNo}}</p>
                                   <p>裝置名稱: {{item.hardware.board.deviceName}}</p>
                                   <p>IP位置: {{item.hardware.board.IP}}</p>
                                   <p>使用序號: {{item.hardware.board.serialNo}}</p>
                                </div>
                            </Tooltip>
                            <img v-if="item.hardware.irs" class="teachIcon" width="15" height="15" src="@/assets/icon/product_irs.svg">
                            <img v-if="item.hardware.ezstation" class="teachIcon" width="15" height="15" src="@/assets/icon/product_ezstation.svg">
                            <img v-if="item.hardware.sokrates" class="teachIcon" width="15" height="15" src="@/assets/icon/product_sokrates.svg">                            
                          </Col> 
                          <Col :span="12">
                            <Icon v-if="item.teacher.name" size="15" type="md-person" class="teachIcon" /><span class="ellipsis teacherName">{{item.teacher.name}}</span>
                          </Col>
                        </Row>                        
                        <Row  style="display: block;">
                          <Col :span="12" style="color: #48DBFC;">
                            {{$t('classMgmt.hotclass')}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.hot + $t('unit.text1')}}
                          </Col>
                          <Col :span="12" :class="classModeClass(item.mode)">
                            {{ classModeStr(item.mode) }}&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{item.usetime}}
                          </Col>
                        </Row>
                      </Col>
                    </Row>
                  </div>
                </div>
              </div>
            </div>
          </Col>
          <Col  :span="5" class="block-2">
            <!-- block-2 -->
            <div class="block-border" style="height: 12%;position: relative;">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <Row type="flex" justify="center" class="info-row">
                <Col :span="9" class="info-col-main">
                  <div class="info-col-content">
                    <span>{{ $t('classMgmt.block2Title1')}}</span><br/><small>{{ $t('classMgmt.block2SubTitle1')}}</small>
                    <h5>{{hiTeachACT.today}}<small>/{{hiTeachACT.yesterday}}</small></h5>
                  </div>            
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content border-right">
                    <br/><small>{{ $t('classMgmt.block2SubTitle6')}}</small>
                    <h5>{{hiTeachACT.weekAgo}}</h5>
                  </div> 
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content border-right">
                    <br/><small>{{ $t('classMgmt.block2SubTitle7')}}</small>
                    <h5>{{hiTeachACT.mounthAgo}}</h5>
                  </div> 
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content">
                    <br/><small>{{ $t('classMgmt.block2SubTitle8')}}</small>
                    <h5>{{hiTeachACT.semester}}</h5>
                  </div> 
                </Col>
              </Row>
            </div>
            <div style="height: 1.5%"></div>
            <div class="block-border" style="height: 12%;position: relative;">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <Row type="flex" justify="center" class="info-row">
                <Col :span="9" class="info-col-main">
                  <div class="info-col-content">
                    <span>{{ $t('classMgmt.block2Title2')}}</span><br/><small>{{ $t('classMgmt.block2SubTitle1')}}</small>
                    <h5>{{courseACT.today}}<small>/{{courseACT.yesterday}}</small></h5>
                  </div>            
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content border-right">
                    <br/><small>{{ $t('classMgmt.block2SubTitle6')}}</small>
                    <h5>{{courseACT.weekAgo}}</h5>
                  </div> 
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content border-right">
                    <br/><small>{{ $t('classMgmt.block2SubTitle7')}}</small>
                    <h5>{{courseACT.mounthAgo}}</h5>
                  </div> 
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content">
                    <br/><small>{{ $t('classMgmt.block2SubTitle8')}}</small>
                    <h5>{{courseACT.semester}}</h5>
                  </div> 
                </Col>
              </Row>
            </div>
            <div style="height: 1.5%"></div>
            <div class="block-border" style="height: 12%;position: relative;">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <Row type="flex" justify="center" class="info-row">
                <Col :span="9" class="info-col-main">
                  <div class="info-col-content">
                    <span>{{ $t('classMgmt.block2Title3')}}</span><br/><small>{{ $t('classMgmt.block2SubTitle1')}}</small>
                    <h5>{{participants.today}}<small>/{{participants.yesterday}}</small></h5>
                  </div>            
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content border-right">
                    <br/><small>{{ $t('classMgmt.block2SubTitle2')}}</small>
                    <h5>{{participants.weekAgoAVG ? participants.weekAgoAVG : 0}}</h5>
                  </div> 
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content border-right">
                    <br/><small>{{ $t('classMgmt.block2SubTitle3')}}</small>
                    <h5>{{participants.mounthAgoAVG ? participants.mounthAgoAVG : 0}}</h5>
                  </div> 
                </Col>
                <Col :span="5"  class="info-col-secondary">
                  <div class="info-col-content">
                    <br/><small>{{ $t('classMgmt.block2SubTitle4')}}</small>
                    <h5>{{participants.semesterAVG ? participants.semesterAVG : 0}}</h5>
                  </div> 
                </Col>
              </Row>
            </div>
            <div style="height: 1.5%"></div>
            <div class="block-border" style="height: 29%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <div style="height:20%;">
                <h5 style="font-size: 1.25em;color:#E4E9DC;padding: 15px 0 15px 15px;font-weight: 100;">{{$t('classMgmt.block2Title4')}}</h5>
              </div>
              <div style="height: 80%;">
                <ClassLine :data="immediateData" :id="'classline1'"></ClassLine> 
              </div>
            </div>
            <div style="height: 1.5%"></div>
            <div class="block-border" style="height: 29%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <div style="height: 20%;padding: 15px 0 15px 15px;">
                <h5 style="font-size: 1.25em;color:#E4E9DC;font-weight: 100;">{{$t('classMgmt.block2Title5')}}</h5>
              </div>
              <div class="classPercent"> 
                <Row type="flex" justify="center" align="middle" class="classPercent-row">
                  <Col class="left" :span="12" style="">
                    <div style="height: 100%;">
                      <RingPie ref="ringpie5" :pieData="gradeClassPer" :id="'ringpie5'"></RingPie>
                    </div>
                  </Col>
                  <Col class="right" :span="12">
                    <Row style="height: 15%;">
                      <Col>
                        <div class="right-title">{{$t('classMgmt.text3')}} : <span>{{gradeClassAccount}}</span> {{$t('unit.text1')}}</div>
                      </Col>
                    </Row>
                    <div style="height: 85%;width:100%;position: relative;overflow: auto;">
                      <Row class="scrollstyle" style="position: absolute;right: 0px;left: 0;top: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;">
                        <Col v-for="(item, key, index) in gradeClassPer" :key="index" :span="12">
                          <div class="right-detail" @mouseleave="pieDownPlay('course', key)" @mouseenter="pieHeightLight('course', key)">
                            <span class="right-detail-title" :class="'border-letf-color-' + index">{{ $t('classMgmt.grade' + key)}}</span>
                            <h5 class="right-detail-num">{{item}} <small>({{item/gradeClassAccount | percentFormat(1)}}%)</small></h5>
                          </div>                        
                        </Col>
                      </Row>                      
                    </div>
                  </Col>
                </Row>                
              </div>
            </div>
          </Col>
          <Col  :span="5" class="block-3">
            <div class="block-border" style="height: 23.91%;position: relative;">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <div class="today-class-content">
                <h5 class="today-class-content-title">{{$t('classMgmt.block3Title1')}}</h5>
                <Row class="today-class-content-contents">
                  <Col :span="12" class="chart">
                    <RingPie :pieData="hiteachType" ref="ringpie1" :id="'ringPie1'"></RingPie>
                  </Col>
                  <Col :span="12" class="detail">
                    <Row class="detail-row">
                      <Col v-for="(item, key, index) in hiteachType" :key="index"  :span="12" class="detail-col">
                        <div @mouseleave="pieDownPlay('class', key)" @mouseenter="pieHeightLight('class', key)">
                          <span class="detail-title" :class="'border-letf-color-' + index">{{$t('classMgmt.' + key)}}</span>
                          <h5 class="detail-amount">{{item}} <small>({{item/hiteachTypeAccount | percentFormat(1)}}%)</small></h5>
                        </div>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </div>
            </div>
            <div style="height: 2.17%;"></div>
            <div class="block-border" style="height: 23.91%;position: relative;">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <div class="today-class-content">
                <h5 class="today-class-content-title">{{$t('classMgmt.block3Title2')}}</h5>
                <Row class="today-class-content-contents">
                  <Col :span="12" class="chart">
                    <RingPie :pieData="hiteachStatus" ref="ringpie2" :id="'ringPie2'"></RingPie>
                  </Col>
                  <Col :span="12" class="detail">
                    <Row class="detail-row">
                      <Col  v-for="(item, key, index) in hiteachStatus" :key="index" :span="12" class="detail-col">
                        <div @mouseleave="pieDownPlay('system',key)" @mouseenter="pieHeightLight('system', key)">
                          <span class="detail-title" :class="'border-letf-color-' + index">
                            {{ (key == 'unKnown') || (key == 'unauthorization')  ?  $t('classMgmt.' + key) : key}}
                          </span>
                          <h5 class="detail-amount">{{item}} <small>({{item/hiteachStatusAccount | percentFormat(1)}}%)</small></h5>
                        </div>
                      </Col>                     
                    </Row>
                  </Col>
                </Row>
              </div>
            </div>
            <div style="height: 2.17%;"></div>
            <div class="block-border" style="height: 47.84%;position: relative;">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <div class="classCum">
                <div class="classCum-title-Box">
                  <h5 class="titleName">{{ $t('classMgmt.block3Title3')}}</h5>
                  <div class="leangedDiv">
                    <span class="circle green"></span>
                    <h5 style="vertical-align: middle;display:inline-block;color: #ffffff;margin-right: 15px;">{{$t('classMgmt.today')}}</h5>
                    <span class="circle white"></span>
                    <h5 style="vertical-align: middle;display:inline-block;color: #ffffff;">{{$t('classMgmt.lastweek')}}</h5>
                  </div>
                </div>
                <div class="classCum-chat">
                  <ClassBar :todayData="gradeUseStatus.today" :lastWeekData="gradeUseStatus.lastWeek"  :id="'classbar1'"></ClassBar>
                </div>
              </div>
            </div>
          </Col>
          <Col  :span="4" class="block-4">
            <div class="block-border" style="height: 10.43%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <div class="hours">
                <span class="hours-title">{{$t('classMgmt.block4Title1')}}</span>
                <h5><span>{{ cumMin | minToHM('h')}}</span>h<span>{{cumMin | minToHM('m')}}</span>m</h5>
              </div>
            </div>
            <div style="height: 2.17%"></div>
            <div class="block-border" style="height: 23.48%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <div style="height: 100%;">
                <h5 style="height: 20%;font-size: 1.25em;color: #E4E9DC;padding: 10px 0 0 10px;font-weight: 100;">{{$t('classMgmt.block4Title2')}}</h5>
                <Row type="flex" justify="center" align="middle" style="height: 80%;">
                  <Col style="height: 100%;" :span="12">
                    <RingPie :pieData="sokratesStates" @highLightInfo="classVersionByPie" :defaultActive="true" :id="'ringPie3'"></RingPie>
                  </Col>
                  <Col :span="12" style="padding-left: 7px;color: #94998a;">
                    <span>{{ classVersion.name }}</span>
                    <h5 style="font-weight: 100;font-size: 2.2em;color: #fafafa;">{{ classVersion.percent +$t('unit.text2')}}</h5>
                    <span>{{$t('classMgmt.block4SubTitle1') + ' ' + classVersion.val + ' ' +$t('unit.text3')}}</span>
                  </Col>
                </Row>
              </div>
            </div>
            <div style="height: 2.17%"></div>
            <div class="block-border" style="height: 23.48%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->
              <div style="height: 100%;">
                <h5 style="height: 20%;font-size: 1.25em;color: #E4E9DC;padding: 10px 0 0 10px;font-weight: 100;">{{$t('classMgmt.block4Title3')}}</h5>
                <Row type="flex" justify="center" align="middle" style="height: 80%;">
                  <Col style="height: 100%;" :span="12">
                    <RingPie :pieData="operatingSystems" @highLightInfo="homeworkByPie" :defaultActive="true" :id="'ringPie4'"></RingPie>
                  </Col>
                  <Col :span="12" style="padding-left: 7px;color: #94998a;">
                    <span>{{ homework.name }}</span>
                    <h5 style="font-weight: 100;font-size: 2.2em;color: #fafafa;">{{ homework.percent +$t('unit.text2')}}</h5>
                    <span>{{$t('classMgmt.block4SubTitle1') + ' ' + homework.val + ' ' +$t('unit.text9')}}</span>
                  </Col>
                </Row>
              </div>
            </div>
            <div style="height: 2.17%"></div>
            <div class="block-border" style="height: 36.1%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
              <!-- 边角设计 start-->
              <div class="image-border image-border-left-top" ></div>
              <div class="image-border image-border-right-top" ></div>
              <div class="image-border image-border-left-bottom" ></div>
              <div class="image-border image-border-lright-bottom" ></div>
              <!-- 边角设计 end-->  
              <div class="rank">
                <h5 style="height: 10%;font-size: 1.25em;color: #E4E9DC;padding: 10px 0 0 10px;font-weight: 100;">{{$t('classMgmt.block4SubTitle3')}}</h5>
                <div class="rank-block" v-for="(item, index) in mostClassUser" :key="index">
                  <Row type="flex" justify="center" align="middle" class="rank-block-row">
                    <Col class="sticker" :span="6">
                      <img v-if="item.avatar" :src="item.avatar">
                      <img v-else src="@/assets/image/touxiang.png">
                    </Col>
                    <Col class="conect" :span="18">
                      <!-- <span class="conect-title">{{$t('classMgmt.block4SubTitle3')}}</span> -->
                      <Tooltip :transfer="true" placement="top-start">
                          <h5 class="conect-name ellipsis">{{item.name}}</h5>
                          <div slot="content">
                              <p>{{item.id}}</p>
                          </div>
                      </Tooltip>                      
                      <!-- <Icon class="conect-icon" :size="15" type="ios-information-circle" /> -->
                      <span class="conect-val">{{$t('classMgmt.block4SubTitle6')}}: <span class="number">{{item.today}}</span> {{$t('unit.text1')}}</span>
                      <span class="conect-val">{{$t('classMgmt.block4SubTitle7')}}: <span class="number">{{item.cumClass}}</span> {{$t('unit.text1')}}</span>
                    </Col>
                  </Row>
                </div>              
              </div>              
            </div>            
          </Col>
        </Row>
      </div>
    </div>
</template>

<script>
import RingPie from '@/components/smartclassdashboard/RingPie'
import LegendPie from '@/components/smartclassdashboard/LegendPie'
import ClassLine from '@/components/smartclassdashboard/Classline'
import ClassBar from '@/components/smartclassdashboard/ClassBar'
import FloorPlan from '@/components/smartclassdashboard/FloorPlan'
import { mapState } from 'vuex'
import * as d3 from "d3"
export default {
  name:'smart-dashboard',
  data () {
    return {
      isExistShortCode: this.$route.params.schoolshortcode ? true : false,
      gradeClassAccount:0,
      hiteachTypeAccount: 0,
      hiteachStatusAccount: 0,      
      classVersion:{
        percent: '',
        name: '',
        val: 0
      },
      homework:{
        percent: '',
        name: '',
        val: 0
      },
      modal11: false,
    }
  },
  computed:{
    ...mapState({
      classData: state => state.classMgmt.data,
    }),
    classCount(){ // 教室總數
      return this.classData.classCount
    },
    classInfo(){ // 開啟教室資訊
      this.classData.classInfo.forEach(function(item, key) {
        item['id'] = key+1
      });
      
      this.classData.classInfo.sort(function (a, b) {
        let aNum;
        let bNum;
        if(!a.classNum || a.className=='UnKnown' || !a.ver){
          aNum = 2
        } else if (a.mode == 1){
          aNum = 0
        } else {
          aNum = 1
        }
        if(!b.classNum || b.className=='UnKnown' || !b.ver){
          bNum = 2
        } else if(b.mode == 1){
          bNum = 0
        } else {
          bNum = 1
        }
        return aNum > bNum ? 1 : -1;
      });
      return this.classData.classInfo
    },
    hiTeachACT(){ //教室開機數
      return this.classData.hiTeachACT
    }, 
    courseACT(){ // 課堂開機數
      return this.classData.courseACT
    },
    participants(){ //課堂參與人數
      return this.classData.participants
    },
    immediateData(){ // 今日課堂數量變化
      return this.classData.immediateData
    },
    gradeClassPer(){ // 今日各年級課堂百分比
      this.gradeClassAccount = 0;
      for (let g in this.classData.gradeClassPer){
        this.gradeClassAccount += this.classData.gradeClassPer[g]
      }
      return this.classData.gradeClassPer
    },
    hiteachType(){  // 今日智慧教室啟用類型
      this.hiteachTypeAccount = 0;
      for (let g in this.classData.hiteachType){
        this.hiteachTypeAccount += this.classData.hiteachType[g]
      }
      return this.classData.hiteachType
    },
    hiteachStatus(){ // 今日各版本教室開課狀態
      this.hiteachStatusAccount = 0;
      for (let g in this.classData.hiteachStatus){
        this.hiteachStatusAccount += this.classData.hiteachStatus[g]
      }
      return this.classData.hiteachStatus
    },
    gradeUseStatus(){ // 各年級開課狀態
      return this.classData.gradeUseStatus
    },
    cumMin(){ // 累計課堂時數
      return this.classData.cumMin
    },
    sokratesStates(){ // 蘇格拉底議課APP授權狀態
      return this.classData.sokratesStates
    },
    operatingSystems(){ // 課堂作業系統
      return this.classData.operatingSystems
    },
    mostClassUser(){ // 最多課堂使用者
      this.classData.mostClassUser.sort(function (a, b) {
          return a.cumClass > b.cumClass ? -1 : 1;
      });
      return this.classData.mostClassUser.slice(0,3)
    },
    mostMinUser(){
      return this.classData.mostMinUser
    },
    mostEffUser(){
      return this.classData.mostEffUser
    },
    floorPlanData(){
      if(!this.classData.floorPlan || (this.classData.floorPlan && this.classData.floorPlan.length == 0)){
        this.buildDefaultFloorplan();
      }
      return this.classData.floorPlan
    },
  },
  methods:{
    pieHeightLight: function(type, value) {
      switch (type) {
        case 'class':
          this.$refs.ringpie1.heightlight(value);
          break;
        case 'system':
          this.$refs.ringpie2.heightlight(value);
          break;
        case 'course':
          this.$refs.ringpie5.heightlight(value);
          break;
      }
    },
    pieDownPlay: function(type, value) {
      switch (type) {
        case 'class':
          this.$refs.ringpie1.downplay(value);
          break;
        case 'system':
          this.$refs.ringpie2.downplay(value);
          break;
        case 'course':
          this.$refs.ringpie5.downplay(value);
          break;
      }      
    },
    classVersionByPie: function(val){
      this.classVersion.percent = val.percent
      this.classVersion.name = val.name
      this.classVersion.val = val.value
    },
    homeworkByPie: function(val){
      this.homework.percent = val.percent
      this.homework.name = val.name
      this.homework.val = val.value
    },
    classModeStr: function(val){
      switch (val) {
        case 0:
          return this.$t('classMgmt.notInitiated')
          break;
        case 1:
          return this.$t('classMgmt.runing')
          break;
        case 2:
          return this.$t('classMgmt.repair')
          break;
      }
    },
    classModeClass: function(val){
      switch (val) {
        case 0:
          return 'unopen'
          break;
        case 1:
          return 'processing'
          break;
        case 2:
          return 'maintain'
          break;
      }
    },
    buildDefaultFloorplan(){
      this.$nextTick(() => {    
        var c=document.getElementById("floorplan");
        var ctx=c.getContext("2d");
        var img=document.getElementById("planImg");
        var pin=document.getElementById("pin");
        var greenpin=document.getElementById("greenpin");
        var redpin=document.getElementById("redpin");    
        c.width = img.width;
        c.height = img.height
        var pinW = 35;
        var pinH = 35;
        ctx.clearRect(0, 0, img.width, img.height);
        ctx.drawImage(img,0,0);
        ctx.drawImage(redpin, (c.width*0.595) ,(c.height * 0.67) , pinW, pinH);
        ctx.drawImage(greenpin, (c.width*0.45) ,(c.height * 0.23) , pinW, pinH);
        ctx.drawImage(greenpin, (c.width*0.455) ,(c.height * 0.79) , pinW, pinH);
        ctx.drawImage(greenpin, (c.width*0.595) ,(c.height * 0.79) , pinW, pinH);
        ctx.drawImage(greenpin, (c.width*0.245) ,(c.height * 0.79) , pinW, pinH);
        ctx.drawImage(pin, (c.width*0.52) ,(c.height * 0.23) , pinW, pinH);
        ctx.drawImage(pin, (c.width*0.59) ,(c.height * 0.23) , pinW, pinH);
        ctx.drawImage(pin, (c.width*0.595) ,(c.height * 0.73) , pinW, pinH);
        ctx.drawImage(pin, (c.width*0.525) ,(c.height * 0.73) , pinW, pinH);
        ctx.drawImage(pin, (c.width*0.525) ,(c.height * 0.79) , pinW, pinH);
        ctx.drawImage(pin, (c.width*0.455) ,(c.height * 0.73) , pinW, pinH);     
      })
    }
  },
  filters: {
    commaFormat: function(value) { // 加上千分位符號
      return value.toString().replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/, function (all, pre, groupOf3Digital) {
        return pre + groupOf3Digital.replace(/\d{3}/g, ',$&');
      })
    },
    percentFormat: function(num, pos){
      if(!num || !isFinite(num)) return 0
      return (num* 100).toFixed(pos) 
    },
    minToHM: function(min, type){      
      switch (type) {
        case 'h':
          return Math.floor(min / 60);
          break;      
        case 'm':
          return min%60;          
          break;
      }
    },
  },
  components:{
    LegendPie,
    RingPie,
    ClassBar,
    ClassLine,
    FloorPlan
  },
  created(){    
    let _this = this;
    if(this.isExistShortCode){
      this.$api.ClassMgmt.GetTestIoTData({schoolshortcode: this.$route.params.schoolshortcode}).then(res => {
        console.log(res)
        _this.$store.state.classMgmt.data = res
      })      
    } else {
      this.$api.ClassMgmt.GetTestIoTData({schoolshortcode: 'hbtw'}).then(res => {
        console.log(res)
        _this.$store.state.classMgmt.data = res
      })
    }        
  },
  mounted(){
    this.$nextTick(() => {    
     
    })
  }
}
</script>
