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

<template>
    <div id="smart-dashboard"  class="backdrop">
      <!-- <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;">
            <img style="width: 35px;" src="@/assets/image/touxiang.png">
          </Col>
        </Row>
      </div> -->
      <div class="content">
        <div style="text-align: center;padding-top: 5px;height: 6%;">

        </div>
        <Row class="box" type="flex" justify="center" v-if="talData">
          <Col  :span="11"  class="block-1">
            <div style="height: 100%;">
              <div class="block-border" style="height: 66%;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%;">
                  <Row type="flex" justify="center" align="middle" style="height: 25%;">
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text1')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.totalCourse) | commaFormat}}</h5>
                    </Col>
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text2')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.teachers) | commaFormat}}</h5>
                    </Col>
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text3')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.premiumCollections) | commaFormat}}</h5>
                    </Col>
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text4')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.AdvancedCollections) | commaFormat}}</h5>
                    </Col>
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text5')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.classicCollections) | commaFormat}}</h5>
                    </Col>
                  </Row>
                  <Row type="flex" justify="center" align="middle" style="height: 25%;">
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text6')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.todayTotal) | commaFormat}}</h5>
                    </Col>
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text7')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.weekTotal) | commaFormat}}</h5>
                    </Col>
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text8')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.monthTotal) | commaFormat}}</h5>
                    </Col>
                    <Col :span="4" style="text-align: center;">
                      <span style="font-size: 1.25em;color: rgb(148, 153, 138)">{{ $t('talMgmt.text9')}}</span>
                      <h5 style="font-size: 2.5em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.semesterTotal) | commaFormat}}</h5>
                    </Col>
                  </Row>
                  <Row style="height: 50%">
                    <Col :span="12" style="height: 100%;">
                      <RingPie :tooltip="true" :title="$t('talMgmt.text10')" :pieData="pieData ? pieData.gradeList : []" :id="'ringpie1'"></RingPie>
                    </Col>
                    <Col :span="12" style="height: 100%;">
                      <RingPie :tooltip="true" :title="$t('talMgmt.text11')" :pieData="pieData ? pieData.subjectList : []" :id="'ringpie2'"></RingPie>
                    </Col>
                  </Row>
                </div>
              </div>
              <div style="height: 1.5%"></div>
              <div style="height: 30.5%;">
                <Row :gutter="16" type="flex" justify="space-between" align="middle" style="height: 100%;">
                  <Col :span="12" style="height: 100%;">
                    <div class="block-border" style="position: relative;background-color: rgba(217, 217, 217, 0.14);height: 100%;">
                      <!-- 边角设计 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-->
                      <Bubble style="padding-right: 16px;"
                        :bubleData="bubbleData.gradeTech.data"
                        :ylabel="bubbleData.gradeTech.yLabel"
                        :xlabel="bubbleData.gradeTech.xLabel"
                        :title="$t('talMgmt.text23')"
                        :id="'bubble1'"></Bubble>
                    </div>
                  </Col>
                  <Col :span="12" style="height: 100%;">
                    <div class="block-border" style="position: relative;background-color: rgba(217, 217, 217, 0.14);height: 100%;">
                      <!-- 边角设计 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-->
                      <Bubble style="padding-right: 16px;"
                        :title="$t('talMgmt.text24')"
                        :bubleData="bubbleData.subjectTech.data"
                        :ylabel="bubbleData.subjectTech.yLabel"
                        :xlabel="bubbleData.subjectTech.xLabel"
                        :id="'bubble2'"></Bubble>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </Col>
          <Col  :span="11" 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: 100%;">
                <Row type="flex" justify="center" align="middle" style="height: 25%;">
                  <Col :span="4" style="text-align: center;">
                    <span style="font-size: 1.25em;color: rgb(148, 153, 138)">
                      <Tooltip placement="top-start">
                        {{$t('talMgmt.text35')}}
                        <div slot="content">
                          <p>{{$t('talMgmt.text59')}}</p>
                          <p>{{$t('talMgmt.text60')}}</p>
                        </div>
                      </Tooltip>
                    </span>
                    <h5 style="font-size: 2.3em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.todayInteractive + '/' + totalText.todayTeach)}}</h5>
                  </Col>
                  <Col :span="4" style="text-align: center;">
                    <span style="font-size: 1.25em;color: rgb(148, 153, 138)">
                      <Tooltip placement="top-start">
                        {{$t('talMgmt.text36')}}
                        <div slot="content">
                          <p>{{$t('talMgmt.text59')}}</p>
                          <p>{{$t('talMgmt.text60')}}</p>
                        </div>
                      </Tooltip>
                    </span>
                    <h5 style="font-size: 2.3em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.monthInteractive + '/' + totalText.monthTeach)}}</h5>
                  </Col>
                  <Col :span="4" style="text-align: center;">
                    <span style="font-size: 1.25em;color: rgb(148, 153, 138)">
                      <Tooltip placement="top-start">
                        {{$t('talMgmt.text37')}}
                        <div slot="content">
                          <p>{{$t('talMgmt.text59')}}</p>
                          <p>{{$t('talMgmt.text60')}}</p>
                        </div>
                      </Tooltip>
                    </span>
                    <h5 style="font-size: 2.3em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.semesterInteractive + '/' + totalText.semesterTeach)}}</h5>
                  </Col>
                  <Col :span="4" style="text-align: center;">
                    <span style="font-size: 1.25em;color: rgb(148, 153, 138)">
                      <Tooltip placement="top-start">
                        {{$t('talMgmt.text38')}}
                        <div slot="content">
                          <p>{{$t('talMgmt.text59')}}</p>
                          <p>{{$t('talMgmt.text60')}}</p>
                        </div>
                      </Tooltip>
                    </span>
                    <h5 style="font-size: 2.3em;color: rgb(250, 250, 250);font-weight: 100;">{{ (!totalText ? '' : totalText.allInteractive + '/' + totalText.allTeach)}}</h5>
                  </Col>
                </Row>
                <div style="height: 5%;"></div>
                <Row  type="flex" justify="space-around" align="middle" style="height: 70%">
                  <Col :span="11" style="height: 100%;">
                    <InteractiveLine
                      :xlabel="lineData.trend.time"
                      :data="lineData.trend.data"
                      :id="'interactiveline1'"></InteractiveLine>
                  </Col>
                  <Col :span="11" style="height: 100%;">
                    <BnteractiveBarLine
                      :xlabel="lineData.distribution.label"
                      :bardata1="lineData.distribution.barData1"
                      :bardata2="lineData.distribution.barData2"
                      :linedata="lineData.distribution.lineData"
                      :id="'BnteractiveBarLine1'"></BnteractiveBarLine>
                  </Col>
                </Row>
              </div>
            </div>
            <div style="height: 1.5%"></div>
            <div class="block-border" style="height: 26.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-->
              <TechnologyBar
                :xlabel="techDistribution.label"
                :data="techDistribution.barData"
                :id="'TechnologyBar1'"></TechnologyBar>
            </div>
            <div style="height: 1.5%"></div>
            <div style="height: 30.5%;">
              <Row :gutter="16" type="flex" justify="space-between" align="middle" style="height: 100%;">
                <Col :span="12" style="height: 100%;">
                  <div class="block-border" style="position: relative;background-color: rgba(217, 217, 217, 0.14);height: 100%;">
                    <!-- 边角设计 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-->
                    <Bubble style="padding-right: 16px;"
                      :title="$t('talMgmt.text57')"
                      :bubleData="bubbleData.gradeTeaching.data"
                      :ylabel="bubbleData.gradeTeaching.yLabel"
                      :xlabel="bubbleData.gradeTeaching.xLabel"
                      :id="'bubble3'"></Bubble>
                  </div>
                </Col>
                <Col :span="12" style="height: 100%;">
                  <div class="block-border" style="position: relative;background-color: rgba(217, 217, 217, 0.14);height: 100%;">
                    <!-- 边角设计 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-->
                    <Bubble style="padding-right: 16px;"
                      :title="$t('talMgmt.text58')"
                      :bubleData="bubbleData.subjectTeaching.data"
                      :ylabel="bubbleData.subjectTeaching.yLabel"
                      :xlabel="bubbleData.subjectTeaching.xLabel"
                      :id="'bubble4'"></Bubble>
                  </div>
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
      </div>
    </div>
</template>

<script>
import RingPie from '@/components/talmgmtdashboard/RingPie'
import InteractiveLine from '@/components/talmgmtdashboard/InteractiveLine'
import BnteractiveBarLine from '@/components/talmgmtdashboard/InteractiveBarLine'
import TechnologyBar from '@/components/talmgmtdashboard/TechnologyBar'
import Bubble from '@/components/talmgmtdashboard/Bubble'

import { mapState } from 'vuex'

export default {
  name: 'smart-dashboard',
  data() {
    return {
      lang: localStorage.getItem('local')
    }
  },
  computed: {
    ...mapState({
        talData: state => state.talMgmt.data
    }),
    totalText() { // 總數字串
      return this.talData.totalText
    },
    pieData() { // 圓餅圖
      let tmpData = this.talData.pieData
      if (!tmpData) return false

      let _this = this
      tmpData.gradeList.forEach(function(item, index, arr) {
        arr[index].name = item.name + _this.$t('talMgmt.text64')
      })
      return tmpData
    },
    bubbleData() { // 泡泡圖
      let tmpData = this.talData.bubbleData
      let _this = this
      if (!tmpData) return false

      tmpData.gradeTech.yLabel.forEach(function(item, index, arr) {
        arr[index] = item + _this.$t('talMgmt.text64')
      })
      tmpData.gradeTeaching.yLabel.forEach(function(item, index, arr) {
        arr[index] = item + _this.$t('talMgmt.text64')
      })
      return tmpData
    },
    techDistribution() { // 科技分布圖
      return this.talData.techDistribution
    },
    lineData() { // 折線圖
      return this.talData.lineData
    }
  },
  created() {
    let _this = this
    this.$api.talMgmt.GetTALData({}).then((res) => {
      _this.$store.state.talMgmt.data = res
    })
  },
  components: {
    InteractiveLine,
    TechnologyBar,
    Bubble,
    RingPie,
    BnteractiveBarLine
  },
  filters: {
    commaFormat: function(value) { // 加上千分位符號
      return value.toString().replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/, function(all, pre, groupOf3Digital) {
        return pre + groupOf3Digital.replace(/\d{3}/g, ',$&')
      })
    }
  },
  methods: {

  }
}
</script>
