<template>
  <div class="gas_station">
    <!-- 标题区域 -->
    <div class="title">加油站</div>

    <!-- 内容区域 -->
    <div class="content">
      <div class="content_title">
        <div class="title_text">
          数据统计<span
            >/ 总计
            <span ref="countDom">{{ count }}</span>
          </span>
        </div>
        <img src="@/assets/images/33.png" />
      </div>

      <!-- 乡镇列表区域 -->
      <div class="content_list">
        <!-- 每一个乡镇区域 -->
        <div class="list_item" v-for="(item, index) in townList" :key="index">
          <div class="item_town">{{ item.name }}</div>
          <div class="item_num" ref="boxNum" :data-value="item.num">
            {{ item.num }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

// DOM元素数组
const boxNum = ref();

// 数据列表
const townList = ref([
  {
    name: "双溪镇",
    num: 2,
  },
  {
    name: "仁首镇",
    num: 1,
  },
  {
    name: "宝峰镇",
    num: 1,
  },
  {
    name: "高湖镇",
    num: 2,
  },
  {
    name: "璪都镇",
    num: 1,
  },
  {
    name: "香田乡",
    num: 0,
  },
  {
    name: "水口乡",
    num: 0,
  },
  {
    name: "中源乡",
    num: 1,
  },
  {
    name: "官庄镇",
    num: 2,
  },
  {
    name: "三爪仑乡",
    num: 0,
  },
  {
    name: "雷公尖乡",
    num: 1,
  },
]);

// 加油站总数
const count = ref(0);
// DOM元素
const countDom = ref();

onMounted(() => {
  // 计算出加油站总数
  getCount();
  // 让数字跳动
  getCountUpNum();
});

// 计算出加油站总数
const getCount = () => {
  count.value = townList.value.reduce((pre, cur) => {
    return pre + cur.num;
  }, 0);
};

// 让数字跳动
const getCountUpNum = () => {
  boxNum.value.forEach((ele: any) => {
    countUpNum(ele, ele.dataset.value);
  });
  countUpNum(countDom.value, count.value);
};
</script>

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

  .title {
    padding-left: 45px;
    width: 100%;
    height: 48px;
    font-size: 28px;
    font-family: "庞门正道标题体";
    background-image: url(@/assets/images/34.png);
    background-size: 100% 100%;
  }

  .content {
    padding: 26px 40px;
    margin-top: 24px;
    width: 100%;
    height: 508px;
    background-image: url(@/assets/images/9.png);
    background-size: 100% 100%;

    .content_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;
        span {
          margin-left: 10px;
          font-size: 18px;
        }
      }

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

    .content_list {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 1fr);
      margin: auto;
      margin-top: 20px;
      width: 90%;
      height: 400px;

      .list_item {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        background-image: url(@/assets/images/44.png);
        background-size: 100% 100%;

        .item_town {
          font-size: 18px;
        }

        .item_num {
          font-size: 26px;
          color: #2acfff;
        }
      }
    }
  }
}
</style>
