<template>
  <div class="cointan">
    <div class="title1">
      <div style="margin-left:25px;line-height: 22px;">教学楼教室使用情况</div>
    </div>

    <!-- 左侧环形图 -->
    <div class="huankuang">
      <div class="chart" ref="chart"></div>
    </div>
    <!-- 右侧信息 -->
    <div class="zongkuang">
      <div class="zongtu"></div>
      <div class="zongtxt">房间总数</div>
    </div>
    <div class="zongshu">241</div>

    <div class="zongkuang" style="margin-top:143px;
    background: linear-gradient(90deg, rgba(103, 255, 255, 0.2), rgba(163, 248, 255, 0) 100%);">
      <div class="zongtu2"></div>
      <div class="zongtxt">使用中</div>
    </div>
    <div class="zongshu" style="margin-top:174px;">121</div>
    <div class="zongline"></div>
    <div class="zongbai">55%</div>

    <div class="zongkuang" style="margin-top:204px;
    background: linear-gradient(90deg, rgba(249, 219, 80, 0.2) , rgba(163, 248, 255, 0) 100%);">
      <div class="zongtu3"></div>
      <div class="zongtxt">空闲</div>
    </div>
    <div class="zongshu" style="margin-top:236px;">100</div>
    <div class="zongline" style="margin-top:249px;"></div>
    <div class="zongbai" style="margin-top:238px;">45%</div>
  </div>
</template>

<script>
export default {
  name: 'righttop',
  data() {
    return {
      
    }
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    this.getEchartData()
  },
  methods:{
    getEchartData(){
      let _this = this;
      const chart = this.$refs.chart;
      var option = null;
      const myChart = this.$echarts.init(chart);

      option = {
        color: ['#66FFFF','#F9DB50'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['73%', '92%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 48, name: '使用中' },
              { value: 135, name: '空闲' }
            ]
          }
        ]
      };
      myChart.setOption(option);

      myChart.off("click");

      myChart.on("click", function (params) {
        // console.log(params);
        _this.$emit("openPop");
      });

      window.addEventListener("resize", function () {
        myChart.resize();
      });
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          chart.resize();
        });
      });
      return option;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 450px;
  height: 302px;
  background-image: url('../assets/index/litterbackground.png');
  background-size: 100%;
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 左侧环形图
.huankuang{
  position: absolute;
  margin: 87px 0 0 41px;
  width: 151px;
  height: 151px;
  background-image: url('../assets/rightTop/huanxing.png');
  background-size: 100%;
}
.chart{
  position: absolute;
  margin: 5px 0 0 5px;
  width: 141px;
  height: 141px;
}
// 右侧信息
.zongkuang{
  position: absolute;
  margin: 83px 0 0 227px;
  width: 171px;
  height: 28px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(163, 248, 255, 0) 100%);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 28px;
  color: rgba(255, 255, 255, 1);
}
.zongtu{
  position: absolute;
  margin: 0px 0 0 -15px;
  width: 28px;
  height: 28px;
  background-image: url('../assets/rightTop/lin1.png');
  background-size: 100%;
}
.zongtu2{
  position: absolute;
  margin: 0px 0 0 -15px;
  width: 28px;
  height: 28px;
  background-image: url('../assets/rightTop/lin2.png');
  background-size: 100%;
}
.zongtu3{
  position: absolute;
  margin: 0px 0 0 -15px;
  width: 28px;
  height: 28px;
  background-image: url('../assets/rightTop/lin3.png');
  background-size: 100%;
}
.zongtxt{
  position: absolute;
  margin: 0px 0 0 31px;
}
.zongshu{
  position: absolute;
  margin: 115px 0 0 258px;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  font-family : '优设标题黑';
}
.zongline{
  position: absolute;
  margin: 188px 0 0 306px;
  width: 42px;
  height: 0px;
  opacity: 0.5;
  border: 1px dashed rgba(255, 255, 255, 1);
}
.zongbai{
  position: absolute;
  margin: 177px 0 0 357px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20.27px;
  color: rgba(255, 255, 255, 1);
}
</style>
