<template>
  <div class="chart">
    <!-- 标题区域 -->
    <div class="chart_title">近12{{ timeList[currentIndex] }}人流趋势分析</div>

    <!-- 切换时间区域 -->
    <div class="chart_search">
      <!-- 选择时间区域 -->
      <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="chart_box" ref="lineChart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Echarts from "echarts";
// 引入获取最近天数函数
import { getNearDay } from "@/utils/getNearDay";
// 引入获取最近月份函数
import { getNearMonth } from "@/utils/getNearMonth";
// 引入获取近8年函数
import { getNearYear } from "@/utils/getNearYear";
// 引入路口相关的接口
import {
  reqTrendByDay,
  reqTrendByMonth,
  reqTrendByYear,
} from "@/api/junction/index";

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

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

// 折线图DOM元素
const lineChart = ref(null);
// 折线图实例
let myLineChart: any;
// 折线图x轴数据
const chartXdata = ref<any>([]);
// 折线图y轴数据
const chartYdata = ref<any>([]);

onMounted(() => {
  // 获取折线图数据
  getChartData();
});

// 获取折线图数据
const getChartData = async () => {
  if (currentIndex.value === 0) {
    // 获取日数据
    chartXdata.value = getNearDay(12);
    const res = await reqTrendByDay();
    // console.log(res);
    chartYdata.value = res.data.map((ele: any) => ele.num);
    initLineChart();
  } else if (currentIndex.value === 1) {
    // 获取月数据
    chartXdata.value = getNearMonth(11);
    const res = await reqTrendByMonth();
    chartYdata.value = res.data.map((ele: any) => ele.num);
    // 初始化折线图
    initLineChart();
  } else if (currentIndex.value === 2) {
    // 获取年数据
    chartXdata.value = getNearYear(11);
    const res = await reqTrendByYear();
    chartYdata.value = res.data.map((ele: any) => ele.num);
    // 初始化折线图
    initLineChart();
  }
};

// 初始化折线图
const initLineChart = () => {
  myLineChart = Echarts.init(lineChart.value);
  // 折线图配置
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "1%",
      right: "1%",
      top: "10%",
      bottom: "18%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      axisLabel: {
        color: "#fff",
        fontSize: 16,
        margin: 20,
      },
      data: chartXdata.value,
    },
    yAxis: {
      type: "value",
      name: "人",
      nameTextStyle: {
        color: "#fff",
        fontSize: 16,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 16,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ["rgba(255, 255, 255, 0.15)"],
        },
      },
    },
    series: [
      {
        data: chartYdata.value.reverse(),
        type: "line",
        smooth: true,
        color: "#1F92F6",
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "人";
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(25, 104, 255, 0.1)",
              },
              {
                offset: 1,
                color: "rgba(54, 161, 255, 0.6)",
              },
            ],
          },
        },
      },
    ],
  };
  myLineChart.setOption(options);
};

// 切换选择时间时的回调
const handleChangeIndex = (index: number) => {
  currentIndex.value = index;
  // 销毁图表实例重新加载
  myLineChart.dispose();
  getChartData();
};
</script>

<style lang="scss" scoped>
.chart {
  width: 924px;
  height: 546px;

  .chart_title {
    padding-left: 44px;
    width: 924px;
    height: 48px;
    font-size: 28px;
    background-image: url(@/assets/images/13.png);
    background-size: 100% 100%;
  }

  .chart_search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 924px;
    height: 89px;

    .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);
      }
    }
  }

  .chart_box {
    width: 924px;
    height: 409px;
  }
}
</style>
