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

<template>
    <div id="smart-dashboard" class="backdrop-dark">
      <div class="Header">
        <Row type="flex" justify="center" align="middle">
          <Col :span="3">
            <img style="height: 20px;" src="@/assets/mark.svg"/>
          </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;">
            <!-- <Icon style="font-size: 24px; color: #FAFAFA;" type="md-person" /> -->
            <img style="width: 35px;margin-top: 4px;" src="@/assets/image/touxiang.png">
          </Col>
        </Row>
      </div>
      <div class="content">
        <div style="text-align: center;padding-top: 5px;height: 5%;">
          <Button to="/smartclassdashboard" class="dashBoardBtn">{{$t('schoolMgmt.pageButton1')}}</Button>
          <Button class="dashBoardBtn select">{{$t('schoolMgmt.pageButton2')}}</Button>
        </div>
        <Row class="box" type="flex" justify="center">
          <Col style="padding: 0 7px"  :span="4"  class="block-1">
            <div style="height: 100%;">
              <div class="block-border" style="height: 19%;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-->
                <Row class="total" type="flex" align="middle" justify="space-around">
                  <Col :span="10" v-if="viewAccess('fun1')">
                    <div class="total-box">
                      <div class="total-box-border total-box-left-top" ></div>
                      <div class="total-box-border total-box-right-top" ></div>
                      <div class="total-box-border total-box-left-bottom" ></div>
                      <div class="total-box-border total-box-right-bottom" ></div>
                      <span class="total-box-title">{{$t('schoolMgmt.block1SubTitle1')}}</span>
                      <h5 class="total-box-number">2,056</h5>
                      <span class="total-box-subtitle">{{$t('schoolMgmt.block1SubTitle3')}}: <span class="total-box-subtitle-num">38</span></span>
                    </div>
                  </Col>
                  <Col :span="10">
                    <div class="total-box" style="height: 100%;text-align: center;">
                      <div class="total-box-border total-box-left-top" ></div>
                      <div class="total-box-border total-box-right-top" ></div>
                      <div class="total-box-border total-box-left-bottom" ></div>
                      <div class="total-box-border total-box-right-bottom" ></div>
                      <span class="total-box-title">{{$t('schoolMgmt.block1SubTitle2')}}</span>
                      <h5 class="total-box-number">81,762</h5>
                      <span class="total-box-subtitle">{{$t('schoolMgmt.block1SubTitle3')}}: <span class="total-box-subtitle-num">183</span></span>
                    </div>
                  </Col>
                </Row>
              </div>  
              <div style="height: 1.5%"></div>
              <div class="block-border" style="height: 30%;position: relative;background-color: rgba(217, 217, 217, 0.14);padding-right: 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: 20%;position: relative">
                  <h5 style="height: 100%;padding: 3% 4%;font-size: 1.25em;color: rgb(228, 233, 220);font-weight: 100;">{{$t('schoolMgmt.block1Title1')}}</h5>
                </div>
                <div style="height: 70%;position: relative">
                  <AccountLine style="position: absolute;" :id="'accountline1'"></AccountLine>
                </div>
              </div>  
              <div style="height: 1.5%"></div>
              <div class="block-border" style="height: 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: 13%;">
                  <h5 style="height: 100%;padding: 3% 4%;font-size: 1.25em;color: #E4E9DC;border-bottom: solid 1px #94998a;font-weight: 100;">{{$t('schoolMgmt.block1Title2')}}</h5>
                </div>
                <div style="height: 87%;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;;background-color: rgba(17, 17, 17, 0.14);">
                      <div class="course" v-for="(item, index) in courseList" :key="index">
                          <Row type="flex" justify="center" align="middle" class="course-Row">
                            <Col :span="16">
                              <h5 class="ellipsis course-className">{{ $t(item.className) }}</h5>
                              <span class="ellipsis course-user">{{item.user }}</span><Icon class="course-icon" :size="15" type="ios-information-circle" />
                            </Col>
                            <Col :span="8">
                              <div class="course-text" style="margin-bottom: 3px;">{{$t('schoolMgmt.block1SubTitle4')}} | {{ item.courses }}</div>
                              <div class="course-text">{{$t('schoolMgmt.block1SubTitle5')}} | {{ item.students }}</div>
                            </Col>
                          </Row>
                      </div>
                  </div>
                </div>
              </div>  
            </div>
          </Col>
          <Col  style="padding: 0 7px" :span="6" class="block-2">
            <!-- block-2 -->
            <div class="block-border" style="height: 38%;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: 77%">
                <ClassTypePie :id="'classtypepie'"></ClassTypePie>
              </div>
              <div style="height: 23%;padding-top: 10px;">
                 <Row type="flex" justify="space-around" align="middle">
                  <Col :span="6" style="padding: 0 10px;">
                    <div class="classroom">
                      <span class="classroom-title">{{$t('schoolMgmt.block2SubTitle1')}}</span>
                      <h5 class="classroom-number">521</h5>
                    </div>
                  </Col>
                  <Col :span="6" style="padding: 0 10px;">
                    <div class="classroom">
                      <span class="classroom-title">{{$t('schoolMgmt.block2SubTitle2')}}</span>
                      <h5 class="classroom-number">857</h5>
                    </div>  
                  </Col>
                  <Col :span="6" style="padding: 0 10px;">
                    <div class="classroom">
                      <span class="classroom-title">{{$t('schoolMgmt.block2SubTitle3')}}</span>
                      <h5 class="classroom-number">410</h5>
                    </div>  
                  </Col>
                  <Col :span="6" style="padding: 0 10px;">
                    <div class="classroom">
                      <span class="classroom-title">{{$t('schoolMgmt.block2SubTitle4')}}</span>
                      <h5 class="classroom-number">242</h5>
                    </div>  
                  </Col>
                </Row>
              </div>
            </div>
            <div style="height: 1.5%"></div>
            <div class="block-border" style="height: 25%;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="today-class-content">
                <h5 class="today-class-content-title">{{$t('schoolMgmt.block3Title1')}}</h5>
                <Row class="today-class-content-contents" type="flex" justify="center" align="middle">
                  <Col :span="10" class="chart">
                    <RingPie :id="'ringPie1'"></RingPie>
                  </Col>
                  <Col :span="14" class="detail">
                    <Row class="detail-row" type="flex" justify="center" align="middle">
                      <Col :span="8" class="detail-col">
                        <div @mouseleave="pieDownPlay('class','苏格拉底')" @mouseenter="pieHeightLight('class','苏格拉底')">
                          <span class="detail-title detail-title-border-red">{{$t('schoolMgmt.text11')}}</span>
                          <h5 class="detail-amount">33% <small>(168)</small></h5>
                        </div>
                      </Col>
                      <Col :span="8" class="detail-col">
                        <div @mouseleave="pieDownPlay('class','电子笔记')" @mouseenter="pieHeightLight('class','电子笔记')">
                          <span  class="detail-title detail-title-border-pink" >{{$t('schoolMgmt.text12')}}</span>
                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
                        </div>
                      </Col>
                      <Col :span="8" class="detail-col">
                        <div @mouseleave="pieDownPlay('class','上传影片')" @mouseenter="pieHeightLight('class','上传影片')">
                          <span  class="detail-title detail-title-border-blue" >{{$t('schoolMgmt.text13')}}</span>
                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
                        </div>
                      </Col>
                      <Col :span="8" class="detail-col">
                        <div @mouseleave="pieDownPlay('class','作业作品')" @mouseenter="pieHeightLight('class','作业作品')">
                          <span  class="detail-title detail-title-border-green">{{$t('schoolMgmt.text14')}}</span>
                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
                        </div>
                      </Col>
                      <Col :span="8" class="detail-col">
                        <div @mouseleave="pieDownPlay('class','翻转课堂')" @mouseenter="pieHeightLight('class','翻转课堂')">
                          <span  class="detail-title detail-title-border-yellow" >{{$t('schoolMgmt.text15')}}</span>
                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
                        </div>
                      </Col>
                      <Col :span="8" class="detail-col">
                        <div @mouseleave="pieDownPlay('class','线上测验')" @mouseenter="pieHeightLight('class','线上测验')">
                          <span  class="detail-title detail-title-border-orange" >{{$t('schoolMgmt.text16')}}</span>
                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
                        </div>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </div>
            </div>
            <div style="height: 1.5%"></div>
            <div class="block-border" style="height: 34%;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="course-content">
                <div class="course-content-title">
                  <h5>{{$t('schoolMgmt.block3Title2')}}</h5>
                </div>
                <Row class="course-content-contents" type="flex" justify="center" align="middle">
                  <Col class="course-content-contents-left" :span="11">
                    <Row class="course-content-contents-left-row" type="flex"  justify="center" align="middle">
                      <Col class="course-content-contents-left-row-col" :span="12">
                        <div class="contents-box">
                          <span class="contents-box-title contents-box-border-red">{{$t('schoolMgmt.text31')}}</span>
                          <h5 class="contents-box-num">0.0%</h5>
                          <span class="contents-box-subtitle">{{$t('schoolMgmt.text38')}}: 0</span>
                        </div>
                      </Col>
                      <Col class="course-content-contents-left-row-col" :span="12">
                        <div class="contents-box">
                          <span class="contents-box-title contents-box-border-green">{{$t('schoolMgmt.text32')}}</span>
                          <h5 class="contents-box-num">0.5%</h5>
                          <span class="contents-box-subtitle">{{$t('schoolMgmt.text38')}}: 28</span>
                        </div>
                      </Col>
                      <Col :span="12" class="course-content-contents-left-row-col">
                        <div class="contents-box">
                          <span class="contents-box-title contents-box-border-pink">{{$t('schoolMgmt.text33')}}</span>
                          <h5 class="contents-box-num">1.5%</h5>
                          <span class="contents-box-subtitle">{{$t('schoolMgmt.text38')}}:77</span>
                        </div>
                      </Col>
                      <Col :span="12" class="course-content-contents-left-row-col" >
                        <div class="contents-box">
                          <span class="contents-box-title contents-box-border-yellow">{{$t('schoolMgmt.text34')}}</span>
                          <h5 class="contents-box-num">0.4%</h5>
                          <span class="contents-box-subtitle">{{$t('schoolMgmt.text38')}}: 20</span>
                        </div>
                      </Col>
                      <Col :span="12" class="course-content-contents-left-row-col">
                        <div class="contents-box">
                          <span class="contents-box-title contents-box-border-purple">{{$t('schoolMgmt.text35')}}</span>
                          <h5 class="contents-box-num">4.6%</h5>
                          <span class="contents-box-subtitle">{{$t('schoolMgmt.text38')}}: 227</span>
                        </div>
                      </Col>
                      <Col :span="12" class="course-content-contents-left-row-col" >
                        <div class="contents-box">
                          <span class="contents-box-title contents-box-border-orange">{{$t('schoolMgmt.text36')}}</span>
                          <h5 class="contents-box-num">4.1%</h5>
                          <span class="contents-box-subtitle">{{$t('schoolMgmt.text38')}}: 214</span>
                        </div>
                      </Col>
                      <Col :span="12" class="course-content-contents-left-row-col" >
                        <div class="contents-box">
                          <span class="contents-box-title contents-box-border-blue">{{$t('schoolMgmt.text37')}}</span>
                          <h5 class="contents-box-num">88.9%</h5>
                          <span class="contents-box-subtitle">{{$t('schoolMgmt.text38')}}: 4531</span>
                        </div>
                      </Col>
                      <Col :span="12" class="course-content-contents-left-row-col" >
                      
                      </Col>
                    </Row>
                  </Col>
                  <Col :span="13" style="height: 100%;">
                    <div style="height:65%">
                      <CourseBar :id="'coursebar1'"></CourseBar>
                    </div>
                    <div style="height:35%">
                      <Row type="flex" justify="center" align="middle" >
                        <Col :span="11">
                          <RingPie :singleColor="true" :id="'ringPie3'"></RingPie>
                        </Col>
                        <Col :span="13">
                            <div style="color: #A9B2B8">{{$t('schoolMgmt.block3SubTitle1')}} : <span style="color: #fafafa;">54</span></div>
                            <div style="color: #A9B2B8">{{$t('schoolMgmt.block3SubTitle2')}} : <span style="color: #fafafa;">48</span></div>
                            <div style="color: #A9B2B8">{{$t('schoolMgmt.block3SubTitle3')}} : <span style="color: #fafafa;">49</span></div>
                        </Col>
                      </Row>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </Col>
          <Col style="padding: 0 7px" :span="12">
            <Row style="height: 64.5%">
              <Col :span="8" class="block-3">
                <div class="block-border" style="height: 47.5%;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="today-class-content">
                    <h5 class="today-class-content-title">{{$t('schoolMgmt.block3Title3')}}</h5>
                    <Row type="flex" justify="center" align="middle" class="today-class-content-contents">
                      <Col :span="13" class="chart">
                        <RingPie  style="height: 60%" :tooltip="true" :pieData="[{value:3719, name:$t('schoolMgmt.text39')}, {value:0, name:$t('schoolMgmt.text41')},{value:251, name:$t('schoolMgmt.text40')}, {value:0, name:$t('schoolMgmt.text42')}]" :id="'ringPie2'"></RingPie>
                        <div style="height: 30%;text-align: center;" >
                          <span style="color: #94998a;">{{$t('schoolMgmt.block3SubTitle4')}}</span>
                          <h5 style="font-size: 2em;color: #fafafa;font-weight: 100;">7,689</h5>
                        </div>
                      </Col>
                      <Col :span="11" class="detail">
                        <Row class="detail-row" >
                          <Col  class="detail-col">
                            <div @mouseleave="pieDownPlay('class','题目数')" @mouseenter="pieHeightLight('class','题目数')">
                              <span class="detail-title detail-title-border-red">{{$t('schoolMgmt.text39')}}</span>
                              <h5 class="detail-amount">3,719 <small>(48.36%)</small></small></h5>
                            </div>
                          </Col>
                          <Col  class="detail-col">
                            <div @mouseleave="pieDownPlay('class','教材数')" @mouseenter="pieHeightLight('class','教材数')">
                              <span  class="detail-title detail-title-border-blue" >{{$t('schoolMgmt.text40')}}</span>
                              <h5 class="detail-amount" >251 <small>(3.26%)</small></h5>
                            </div>
                          </Col>
                          <Col  class="detail-col">
                            <div @mouseleave="pieDownPlay('class','分享课例数')" @mouseenter="pieHeightLight('class','分享课例数')">
                              <span  class="detail-title detail-title-border-pink" >{{$t('schoolMgmt.text41')}}</span>
                              <h5 class="detail-amount" >3,104 <small>(0%)</small></h5>
                            </div>
                          </Col>
                          <Col  class="detail-col">
                            <div @mouseleave="pieDownPlay('class','校本课纲数')" @mouseenter="pieHeightLight('class','校本课纲数')">
                              <span  class="detail-title detail-title-border-yellow" >{{$t('schoolMgmt.text42')}}</span>
                              <h5 class="detail-amount" >615 <small>(0%)</small></h5>
                            </div>
                          </Col>
                        </Row>
                      </Col>
                    </Row>
                  </div>             
                </div>
                <div style="height: 1.5%"></div>
                <div class="block-border" style="height: 51%;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-->   
                  <h5 style="border-bottom: 1px solid #94998a;font-size: 1.25em;color: #E4E9DC;font-weight: 100;height: 15%;padding: 10px;">{{$t('schoolMgmt.text43')}}</h5>
                  <div style="height: 85%;">
                    <ClassResourceBar :id="'classresourcebar1'"></ClassResourceBar>
                  </div>
                </div>
              </Col>
              <Col style="padding-left: 14px;" :span="16" class="block-4">
                <div class="block-border" style="height: 31.5%;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%">
                    <div style="height: 20%;">
                      <h5 style="font-size: 1.25em;color: #E4E9DC;padding: 10px 0 15px 15px;font-weight: 100;">{{$t('schoolMgmt.block4Title1')}}</h5>
                    </div>
                    <div class="teachingEvent">
                      <Row type="flex" justify="center" align="middle" class="teachingEvent-row">
                        <Col class="teachingEvent-row-col" :span="17">
                          <Row type="flex" justify="space-around" align="middle" class="teachContent">
                            <Col class="teachContent-box" :span="6">
                              <span class="teachContent-box-title">{{$t('schoolMgmt.block4SubTitle1')}}</span>
                              <span class="teachContent-box-num">175</span>
                              <span class="teachContent-box-subnum">{{$t('schoolMgmt.block4SubTitle4')}} : 11</span>
                            </Col>
                            <Col class="teachContent-box" :span="6">
                              <span class="teachContent-box-title">{{$t('schoolMgmt.block4SubTitle2')}}</span>
                              <span class="teachContent-box-num">537</span>
                              <span class="teachContent-box-subnum">{{$t('schoolMgmt.block4SubTitle4')}} : 11</span>
                            </Col>
                            <Col class="teachContent-box" :span="6">
                              <span class="teachContent-box-title">{{$t('schoolMgmt.block4SubTitle3')}}</span>
                              <span class="teachContent-box-num">643</span>
                              <span class="teachContent-box-subnum">{{$t('schoolMgmt.block4SubTitle4')}} : 11</span>
                            </Col>                
                          </Row>
                        </Col>
                        <Col :span="7" style="height:100%">
                          <RingPie :pieData="[{value:175, name:$t('schoolMgmt.text39')}, {value:537, name:$t('schoolMgmt.text41')},{value:643, name:$t('schoolMgmt.text40')}]" :id="'ringPie4'"></RingPie>
                        </Col>
                      </Row>
                    </div>
                  </div>
                </div>
                <div style="height: 2.3%"></div>
                <div class="block-border" style="height: 31.5%;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%">
                    <div style="height: 20%;">
                      <h5 style="font-size: 1.25em;color: #E4E9DC;padding: 10px 0 15px 15px;font-weight: 100;">{{$t('schoolMgmt.block4Title2')}}</h5>
                    </div>
                    <div class="teachingEvent">
                      <Row type="flex" justify="center" align="middle" class="teachingEvent-row">
                        <Col class="teachingEvent-row-col" :span="17">
                          <Row type="flex" justify="space-around" align="middle" class="teachContent">
                            <Col class="teachContent-box" :span="6">
                              <span class="teachContent-box-title">{{$t('schoolMgmt.block4SubTitle5')}}</span>
                              <span class="teachContent-box-num">519</span>
                              <span class="teachContent-box-subnum">{{$t('schoolMgmt.block4SubTitle4')}} : 11</span>
                            </Col>
                            <Col class="teachContent-box" :span="6">
                              <span class="teachContent-box-title">{{$t('schoolMgmt.block4SubTitle6')}}</span>
                              <span class="teachContent-box-num">410</span>
                              <span class="teachContent-box-subnum">{{$t('schoolMgmt.block4SubTitle4')}} : 11</span>
                            </Col>
                            <Col class="teachContent-box" :span="6">
                              <span class="teachContent-box-title">{{$t('schoolMgmt.block4SubTitle7')}}</span>
                              <span class="teachContent-box-num">426</span>
                              <span class="teachContent-box-subnum">{{$t('schoolMgmt.block4SubTitle4')}} : 11</span>
                            </Col>                
                          </Row>
                        </Col>
                        <Col :span="7" style="height:100%">
                          <RingPie :pieData="[{value:519, name:$t('schoolMgmt.text39')}, {value:410, name:$t('schoolMgmt.text41')},{value:426, name:$t('schoolMgmt.text40')}]" :id="'ringPie5'"></RingPie>
                        </Col>
                      </Row>
                    </div>
                  </div>
                </div>
                <div style="height: 2.3%"></div>
                <div style="height: 32.5%;">
                  <Row style="height: 100%;">
                    <Col :span="8" style="height: 100%;padding-right:1.5%;">
                      <div class="block-border" style="height: 100%;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-->
                        <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('schoolMgmt.block4Title3')}}</h5>
                        <div style="height: 85%">
                          <FinishPercentPie :id="'finishpercentpie1'"></FinishPercentPie>
                        </div>
                      </div>
                    </Col>
                    <Col :span="8" style="height: 100%;padding:0 1%;">
                      <div class="block-border" style="height: 100%;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-->
                        <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('schoolMgmt.block4Title4')}}</h5>
                        <div style="height: 85%">
                          <FinishPercentPie :pieData="{total: 537, value: 354}" :id="'finishpercentpie2'"></FinishPercentPie>
                        </div>                        
                      </div>
                    </Col>
                    <Col  :span="8" style="height: 100%;padding-left: 1.5%;">
                      <div class="block-border"  style="height: 100%;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-->
                        <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('schoolMgmt.block4Title5')}}</h5>
                        <div style="height: 85%">
                          <FinishPercentPie :pieData="{total: 643, value:379}" :id="'finishpercentpie3'"></FinishPercentPie>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              </Col>
            </Row>
            <div style="height: 1.5%"></div>
            <Row style="height: 34%;">
              <Col style="height: 100%;"> 
                <div class="block-border" style="height: 100%;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 0 15px;font-weight: 100;">{{$t('schoolMgmt.block4Title6')}}</h5>                
                  </div>
                  <div style="height: 80%">
                    <TotalLine :id="'totalLine1'"></TotalLine>
                  </div>
                </div>  
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </div>
</template>

<script>
import AccountLine from '@/components/smartschooldashboard/AccountLine'
import TeachScienceBar from '@/components/smartschooldashboard/TeachScienceBar'
import ClassTypePie from '@/components/smartschooldashboard/ClasstypePie'
import RingPie from '@/components/smartschooldashboard/RingPie'
import CourseBar from '@/components/smartschooldashboard/CourseBar'
import FinishPercentPie from '@/components/smartschooldashboard/FinishPercentPie'
import TotalLine from '@/components/smartschooldashboard/TotalLine'
import ClassResourceBar from '@/components/smartschooldashboard/ClassResourceBar'
import { mapState } from 'vuex'

export default {
  name:'smart-dashboard',
  data () {
    return {
      courseList:[
        {className: 'schoolMgmt.text1', user: 'Bruse', students: 42, courses: 62},
        {className: 'schoolMgmt.text2', user: 'Picc', students: 30, courses: 51},
        {className: 'schoolMgmt.text3', user: 'Willa', students: 25, courses: 45},
        {className: 'schoolMgmt.text4', user: 'Dr.Liang', students: 42, courses: 27},
        {className: 'schoolMgmt.text5', user: 'Justin', students: 32, courses: 14},
        {className: 'schoolMgmt.text6', user: 'Mr.Chang', students: 33, courses: 34},
        {className: 'schoolMgmt.text7', user: 'Zac', students: 25, courses: 52},
        {className: 'schoolMgmt.text8', user: 'Mr.Wang', students: 37, courses: 32},
        {className: 'schoolMgmt.text9', user: 'Leo', students: 42, courses: 52},
        {className: 'schoolMgmt.text10', user: 'Daphne', students: 30, courses: 30},
      ],
    }
  },
  computed:{
    ...mapState({
        test: state => state.classroomManagement.test
    }),
  },
  components:{
    AccountLine,
    TeachScienceBar,
    ClassTypePie,
    RingPie,
    CourseBar,
    FinishPercentPie,
    TotalLine,
    ClassResourceBar
  },
  methods:{   
    viewAccess:function (comp) {
      return this.hasOneOf(comp);
    },
    hasOneOf: function(comp){
      let router = this.$store.state.authorization.antRouter;
      let nowPath = this.$route.path; // 現在的頁面
      let res = false; // 預設False
      router.forEach(element => {
        if(element.path == nowPath){
          if(element.meta.access[comp]){
            res = element.meta.access[comp];
          }
        }
      });
      return res;
    }
  },
  created(){
    console.log(this.test)
  }
}
</script>
