<!--
 * @Author: 张宁 18339727226@163.com
 * @Date: 2024-05-23 20:42:55
 * @LastEditors: 张宁 18339727226@163.com
 * @LastEditTime: 2024-06-03 15:28:11
 * @FilePath: \welcome-system-screen\src\views\index\left-bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { useDataStore } from "@/stores/index";
const dataStore = useDataStore();
const {forecast,forecastFill} = storeToRefs(dataStore)

const chartRef = ref(null)
const pieChartRef = ref(null)
watch(forecast,()=>{
  if (chartRef) {
    chartRef.value.init(forecast.value.total,forecast.value.reported)
  }
},{
  deep:true,
})
watch(forecastFill,()=>{
  if (pieChartRef) {
    pieChartRef.value.init(forecastFill.value.total,forecastFill.value.reported)
  }
})
onMounted(()=>{
  // if (chartRef) {
  //   chartRef.value.init(forecast.value.total,forecast.value.reported)
  // }
  // if (pieChartRef) {
  //   pieChartRef.value.init(forecastFill.value.total,forecastFill.value.reported)
  // }
})
</script>

<template>

  <div class="left-bottom">
    <div class="content">
      <div class="title">预报到报到率</div>
      <div class="left-content">
        <chart ref="chartRef"></chart>
      </div>
      <div class="bottom-title">
        <div class="icons"></div> 
        <div class="tips">预报到填写总数</div>
      </div>
      <div class="bottom-title">
        <img src="@/assets/img/zheke/fillOut.png" alt="">
        <div class="tips">预报到填写报到人数</div>
      </div>
    </div>
    <div class="content">
      <div class="title">预报到填写率</div>
      <div class="right-content">
        <PieChart ref="pieChartRef"></PieChart>
      </div>
      <div class="bottom-title">
        <div class="icons"></div>
        <div class="tips">新生总人数</div>
      </div>
      <div class="bottom-title">
        <img src="@/assets/img/zheke/fillOut.png" alt="">
        <div class="tips">预报到填写人数</div>
      </div>
    </div>


  </div>
</template>

<style scoped lang="scss">
.left-bottom {
  display: flex;
  justify-content: space-around;

  .title {
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 20px;
  }

  .left-content,.right-content {
    width: 105px;
    height: 105px;
    // background: url("@/assets/img/zheke/lb_left.png");
    // background-size: cover;
    // background-position: center center;
    margin-bottom: 10px;
  }

  .bottom-title {
    display: flex;
  }

  .icons {
    width: 15px;
    height: 15px;
    background: #00214d;
  }
  .tips{
    margin-left: 10px;
  }
}
</style>
