<template>
  <div class="classroom-chartview">
    <InfoTitle :titleName="chartTitle[0]" />
    <ClassroomTypePie align="center" />
    <hr class="devidedline" />
    <InfoTitle :titleName="chartTitle[1]" />
    <Row class="chartData-wrapper">
      <i-col :xs="6" :sm="6" :md="6" :lg="6"
        ><h1>2</h1>
        <p class="title-fixed">報修中</p></i-col
      >
      <i-col :xs="6" :sm="6" :md="6" :lg="6"
        ><h1>20</h1>
        <p class="title-using">使用中</p></i-col
      >
      <i-col :xs="6" :sm="6" :md="6" :lg="6"
        ><h1>34</h1>
        <p>閒置中</p></i-col
      >
      <i-col :xs="6" :sm="6" :md="6" :lg="6"
        ><h1>36<span class="percent-icon">%</span></h1>
        <p>目前運行率</p></i-col
      >
      <i-col :xs="24" :sm="24" :md="24" :lg="24">
        <div class="emptybar"></div>
        <div class="fixedbar"></div>
        <div class="usingdbar"></div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import InfoTitle from "../InfoTitle";
import ClassroomTypePie from "./ClassroomTypePie";
export default {
  name: "ClassroomChartView",
  data() {
    return {
      chartTitle: ["教室類型組成統計", "目前智慧教室使用狀況 (總計56間)"],
    };
  },
  components: {
    ClassroomTypePie,
    InfoTitle,
  },
};
</script>

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