$(window).load(function () {
  $(".loading").fadeOut();
});

$(document).ready(function () {
  var whei = $(window).width();
  $("html").css({ fontSize: whei / 20 });
  $(window).resize(function () {
    var whei = $(window).width();
    $("html").css({ fontSize: whei / 20 });
  });
});

$(window).load(function () {
  $(".loading").fadeOut();
});

$(function () {
  echarts_1();
  echarts_2();
  // echarts_3();

  function echarts_1() {
    var myChart = echarts.init(document.getElementById("echarts01"));

    $.ajax({
      type: "GET",
      async: false,
      dataType: "json",
      url: "/RuYuanZaiYuan/school/preschool/chart",
      success: function (res) {        
        option_1_1.series.forEach((seriesItem, index) => {
          seriesItem.tooltip = { valueFormatter: (v) => v + " 万人" };
        });
        option_1_1.xAxis[0].data = res.xAxis_data;
        option_1_1.series[0].data = res.series_data_1;
        option_1_1.series[1].data = res.series_data_2;
        option_1_1.series[2].data = res.series_data_3;
        option_1_1.series[3].data = res.series_data_4;
        myChart.setOption(option_1_1);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
    });
  }

  function echarts_2() {
    var myChart = echarts.init(document.getElementById("echarts02"));

    option = {
      grid: {
        left: 0,
        right: 0,
        top: 40,
        bottom: 0,
        containLabel: true,
      },
      textStyle: {
        color: "#fff",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: { color: "#999" },
        },
        textStyle: { color: "#fff" },
        // 1. 背景色
        backgroundColor: "rgba(96,98,102,0.8)", // 半透明黑
        // 2. 边框
        borderColor: "rgba(255,255,255,0.3)",
        borderWidth: 1,
      },
      legend: {
        data: ["城区", "镇区", "乡村", "总入园数", "2022年基数"],
        top: 0,
        textStyle: { color: "#fff" },
        icon: "roundRect",
        itemWidth: 12,
        itemHeight: 12,
      },
      xAxis: [
        {
          type: "category",
          data: ["2019", "2021", "2022", "2023", "2024", "2025", "2026"],
          axisPointer: { type: "shadow" },
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { color: "#fff" },
          nameTextStyle: { color: "#fff" },
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: { formatter: "{value}", color: "#fff" },
        },
        {
          type: "value",
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: { formatter: "{value}", color: "#fff" },
        },
      ],
      series: [
        {
          name: "城区",
          type: "bar",
          tooltip: { valueFormatter: (v) => v + " 万人" },
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
          },
        },
        {
          name: "镇区",
          type: "bar",
          tooltip: { valueFormatter: (v) => v + " 万人" },
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
          },
        },
        {
          name: "乡村",
          type: "bar",
          tooltip: { valueFormatter: (v) => v + " 万人" },
          data: [2.4, 5.2, 8.0, 25.4, 27.7, 73.7, 155.6],
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
          },
        },
        {
          name: "总入园数",
          type: "line",
          yAxisIndex: 1,
          tooltip: { valueFormatter: (v) => v + " 万人" },
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
        },
        // 2. 新增折线
        {
          name: "2022年基数",
          type: "line",
          yAxisIndex: 1,
          tooltip: { valueFormatter: (v) => v + " 万人" },
          // 3. 数据整体 +0.8
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3].map((v) =>
            (v + 0.8).toFixed(1)
          ),
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_3() {
    var myChart = echarts.init(document.getElementById("echarts01"));

    option = {
      grid: {
        left: 0,
        right: 0,
        top: 40,
        bottom: 0,
        containLabel: true,
      },
      textStyle: {
        color: "#fff",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: { color: "#999" },
        },
        textStyle: { color: "#fff" },
        // 1. 背景色
        backgroundColor: "rgba(96,98,102,0.8)", // 半透明黑
        // 2. 边框
        borderColor: "rgba(255,255,255,0.3)",
        borderWidth: 1,
      },
      legend: {
        data: ["城区", "镇区", "乡村", "总入园数", "2022年基数"],
        top: 0,
        textStyle: { color: "#fff" },
        icon: "roundRect",
        itemWidth: 12,
        itemHeight: 12,
      },
      xAxis: [
        {
          type: "category",
          data: ["2019", "2021", "2022", "2023", "2024", "2025", "2026"],
          axisPointer: { type: "shadow" },
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { color: "#fff" },
          nameTextStyle: { color: "#fff" },
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: { formatter: "{value}", color: "#fff" },
        },
        {
          type: "value",
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: { formatter: "{value}", color: "#fff" },
        },
      ],
      series: [
        {
          name: "城区",
          type: "bar",
          tooltip: { valueFormatter: (v) => v + " 万人" },
          data: [201.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
          },
        },
        {
          name: "镇区",
          type: "bar",
          tooltip: { valueFormatter: (v) => v + " 万人" },
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
          },
        },
        {
          name: "乡村",
          type: "bar",
          tooltip: { valueFormatter: (v) => v + " 万人" },
          data: [2.4, 5.2, 8.0, 25.4, 27.7, 73.7, 155.6],
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
          },
        },
        {
          name: "总入园数",
          type: "line",
          yAxisIndex: 1,
          tooltip: { valueFormatter: (v) => v + " 万人" },
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
        },
        // 2. 新增折线
        {
          name: "2022年基数",
          type: "line",
          yAxisIndex: 1,
          tooltip: { valueFormatter: (v) => v + " 万人" },
          // 3. 数据整体 +0.8
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3].map((v) =>
            (v + 0.8).toFixed(1)
          ),
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  $(".tab-item").click(function () {
    // 移除所有active类
    $(this).siblings().removeClass("active");
    // 添加active类到当前点击的元素
    $(this).addClass("active");

    // 获取当前选中的标签数据
    var selectedTab = $(this).data("tab");

    // 这里可以添加根据标签切换内容的逻辑
    console.log("切换到: " + selectedTab);

    // 示例：根据标签切换图表数据
    switch (selectedTab) {
      case "入园数":
        // 加载入园数数据
        echarts_1();
        break;
      case "在园数":
        echarts_3();
        break;
    }
  });
});