<template>
  <div class="content">
    <!-- 标题区域 -->
    <div class="header">景区{{ timeList[currentIndex] }}游客人流排行榜</div>

    <!-- 内容区域 -->
    <div class="box">
      <!-- 选择时间区域 -->
      <div class="box_time">
        <div class="time_box">
          <div
            class="box_item"
            :class="{ active: currentIndex === index }"
            v-for="(item, index) in timeList"
            :key="index"
            @click="handleChangeIndex(index)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 列表区域 -->
      <div class="box_list">
        <!-- 每一个景区区域 -->
        <div class="list_item" v-for="(item, index) in placeList" :key="index">
          <div class="item_index">{{ index + 1 }}</div>
          <div class="item_place">{{ item.name }}</div>
          <div class="item_num" ref="itemNum" :data-value="item.num">
            {{ item.num }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { countUpNum } from "@/utils/countUpNum.ts";
// 引入景区相关的接口
import { reqGetTourByDay, reqGetTourByMonthOrYear } from "@/api/scenic/index";

// 选择时间数组
const timeList = ref(["今日", "本月", "今年"]);

// 当前激活索引
const currentIndex = ref<number>(0);

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

// 景区排行数组
const placeList = ref([
  {
    name: "雷公尖",
    num: 4626,
  },
  {
    name: "虎啸峡",
    num: 3002,
  },
  {
    name: "观音岩",
    num: 5666,
  },
  {
    name: "白水洞",
    num: 5261,
  },

  {
    name: "宝峰寺",
    num: 3266,
  },

  {
    name: "白崖山",
    num: 2563,
  },
]);

onMounted(() => {
  getData();
  // 将数据进行排序
  placeList.value.sort((a, b) => b.num - a.num);
  // 让数字跳动
  getCountUpNum();
});

const getData = async () => {
  if (currentIndex.value === 0) {
    // 今日数据
    const res = await reqGetTourByDay();
    console.log(res);
  } else if (currentIndex.value === 1) {
    // 本月数据
    const res = await reqGetTourByMonthOrYear({
      dateTime: "当月",
    });
    console.log(res);
  } else if (currentIndex.value === 2) {
    // 今年数据
    const res = await reqGetTourByMonthOrYear({
      dateTime: "当年",
    });
    console.log(res);
  }
};

// 让数字跳动
const getCountUpNum = () => {
  nextTick(() => {
    itemNum.value.forEach((ele: any) => {
      countUpNum(ele, ele.dataset.value);
    });
  });
};

// 切换选择时间时的回调
const handleChangeIndex = (index: number) => {
  currentIndex.value = index;
  getData();
};
</script>

<style lang="scss" scoped>
.content {
  width: 484px;
  height: 490px;

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

  .box {
    width: 484px;
    height: 442px;

    .box_time {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 484px;
      height: 90px;

      .time_box {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 232px;
        height: 37px;
        border: 1px solid #9c9c9c;

        .box_item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 71px;
          height: 30px;
          cursor: pointer;
          background-color: rgba(114, 151, 179, 0.5);
        }

        .active {
          background-color: rgba(112, 183, 250, 0.5);
        }
      }
    }

    .box_list {
      width: 484px;
      height: 352px;

      .list_item {
        display: flex;
        align-items: center;
        padding: 0 20px 0 14px;
        margin-bottom: 9px;
        width: 484px;
        height: 50px;
        background-image: linear-gradient(
          rgba(0, 128, 254, 0.1),
          rgba(0, 128, 254, 0.2)
        );

        .item_index {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 31px;
          height: 36px;
          background-image: url(@/assets/images/1.png);
          background-size: 100% 100%;
        }

        .item_place {
          margin-left: 12px;
          font-size: 19px;
        }

        .item_num {
          margin-left: auto;
          font-size: 28px;
        }
      }

      .list_item:nth-child(1) > .item_index {
        background-image: url(@/assets/images/2.png);
      }
      .list_item:nth-child(2) > .item_index {
        background-image: url(@/assets/images/3.png);
      }
      .list_item:nth-child(3) > .item_index {
        background-image: url(@/assets/images/4.png);
      }
    }
  }
}
</style>
