<template>
  <div class="latrine_data">
    <!-- 标题区域 -->
    <div class="title">
      <div class="title_text">数据监测</div>
      <img src="@/assets/images/33.png" />
    </div>

    <!-- 图表区域 -->
    <div class="chart" ref="pieChart"></div>

    <!-- 信息展示区域 -->
    <div class="info">
      <!-- 厕所数量区域 -->
      <div class="info_box">
        <div class="box_img">
          <div class="num" ref="numDom">{{ num }}</div>
        </div>
        <div class="box_text">厕所数量</div>
      </div>

      <!-- 累计服务区域 -->
      <div class="info_box">
        <div class="box_img">
          <div class="num" ref="serverDom">{{ server }}</div>
        </div>
        <div class="box_text">累计服务</div>
      </div>

      <!-- 当日服务区域 -->
      <div class="info_box">
        <div class="box_img">
          <div class="num" ref="todayDom">{{ today }}</div>
        </div>
        <div class="box_text">当日服务</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Echarts from "echarts";
import { countUpNum } from "@/utils/countUpNum.ts";

// 厕所数量
const num = ref<number>(48);
const numDom = ref();

// 累计服务
const server = ref<number>(15130);
const serverDom = ref();

// 当日服务
const today = ref<number>(486);
const todayDom = ref();

// 扇形图DOM元素
const pieChart = ref(null);

// 扇形图数据
const chartData = ref([
  { value: 200, name: "男" },
  { value: 300, name: "女" },
  { value: 88, name: "无障碍" },
]);

onMounted(() => {
  // 初始化扇形图
  initPieChart();
  getCountUpNum();
});

const initPieChart = () => {
  let myPieChart = Echarts.init(pieChart.value);
  // 扇形图配置
  const options = {
    title: {
      text: "588",
      left: "38%",
      top: "34%",
      textStyle: {
        fontSize: 23,
        color: "#fff",
        fontWeight: "bold",
      },
      subtext: "厕所坑位",
      subtextStyle: {
        fontSize: 17,
        color: "#fff",
        align: "center",
      },
      itemGap: 15,
    },
    tooltip: {
      trigger: "item",
    },
    color: ["#38F5E8", "#70B7FA", "#E1E2E6"],
    series: [
      {
        name: "厕所坑位数据情况",
        type: "pie",
        center: ["45%", "45%"],
        radius: ["35%", "65%"],
        avoidLabelOverlap: false,
        label: {
          color: "inherit",
          fontSize: 22,
          formatter: "{b}\n{c}",
        },
        labelLine: {
          length2: 46,
        },
        itemStyle: {
          borderColor: "rgba(2, 27, 41, 0.1)",
          borderWidth: 5,
        },
        data: chartData.value,
      },
    ],
  };
  myPieChart.setOption(options);
};

// 让数字跳动
const getCountUpNum = () => {
  countUpNum(numDom.value, num.value);
  countUpNum(serverDom.value, server.value);
  countUpNum(todayDom.value, today.value);
};
</script>

<style lang="scss" scoped>
.latrine_data {
  width: 100%;
  height: 100%;

  .title {
    position: relative;
    width: 100%;
    height: 41px;
    line-height: 41px;

    .title_text {
      position: absolute;
      left: 15px;
      z-index: 1;
      font-size: 23.5px;
      font-weight: bold;
      color: #e0efff;
    }

    img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 16px;
    }
  }

  .chart {
    width: 100%;
    height: 305px;
  }

  .info {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 106px;

    .info_box {
      width: 110px;
      height: 106px;
      text-align: center;

      .box_img {
        width: 110px;
        height: 66px;
        background-image: url(@/assets/images/39.png);
        background-size: 100% 100%;

        .num {
          font-size: 26px;
          font-weight: bold;
          animation: float 3s linear infinite;
        }
      }

      .box_text {
        margin-top: 10px;
        font-size: 19px;
      }
    }
  }
}
</style>
