<template>
  <div class="content">
    <!-- 标题区域 -->
    <div class="header">游客年龄及性别分布汇总</div>

    <!-- 内容区域 -->
    <div class="box">
      <!-- 圆环图区域 -->
      <div class="chart" ref="pieChart"></div>
      <!-- 性别统计区域 -->
      <div class="sex">
        <!-- 男性 -->
        <div class="sex_box">
          <div class="box_icon">
            <img src="@/assets/images/6.png" />
          </div>
          <div class="box_msg">
            <div class="msg_num" ref="manDom">{{ manValue }}</div>
            <div class="msg_text">男（人）</div>
          </div>
        </div>
        <!-- 女性 -->
        <div class="sex_box">
          <div class="box_icon">
            <img class="women" src="@/assets/images/7.png" />
          </div>
          <div class="box_msg">
            <div class="msg_num" ref="womanDom">{{ womanValue }}</div>
            <div class="msg_text">女（人）</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

// 圆环图DOM元素
const pieChart = ref(null);

// 圆环图数据
const chartData = ref([
  { value: 5, name: " 0 - 12岁 " },
  { value: 6, name: "13 - 25岁" },
  { value: 3, name: "26 - 40岁" },
  { value: 2, name: "41 - 60岁" },
  { value: 1, name: "61 - 90岁" },
]);
// 总人数
const chartCount = ref(0);

// 男人数量
const manValue = ref(0);
const manDom = ref();

// 女人数量
const womanValue = ref(0);
const womanDom = ref();

onMounted(() => {
  // 获取年龄数据
  getAgeData();
  // 获取性别数据
  getGenderData();
});

// 获取年龄数据
const getAgeData = async () => {
  const res = await reqGetAgeData();
  // console.log(res);
  res.data.map((ele: any) => {
    ele.value = ele.num * 1;
    ele.name = ele.ageArea;
    delete ele.num;
    delete ele.ageArea;
    chartCount.value += ele.value;
  });
  chartData.value = res.data;
  // 初始化圆环图
  initPieChart();
};

// 获取性别数据
const getGenderData = async () => {
  const res = await reqGetGenderData();
  // console.log(res);
  res.data.forEach((ele: any) => {
    if (ele.gender === "男") {
      manValue.value = ele.num * 1;
    }
    if (ele.gender === "女") {
      womanValue.value = ele.num * 1;
    }
  });
  // 让数字跳动
  getCountUpNum();
};

// 初始化圆环图
const initPieChart = () => {
  let myPieChart = Echarts.init(pieChart.value);
  // 折线图配置
  const options = {
    title: {
      text: "靖安县",
      left: "21%",
      top: "40%",
      textStyle: {
        fontSize: 16,
        color: "#9BB7D4",
      },
      subtext: chartCount.value,
      subtextStyle: {
        fontSize: 20,
        color: "#fff",
        fontWeight: "bold",
      },
      itemGap: 15,
      textAlign: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "0%",
      top: "center",
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 25,
      textStyle: {
        padding: 8,
        color: "#fff",
        fontSize: 19,
        rich: {
          a: {
            fontSize: 19,
            fontWeight: "bold",
            align: "right",
          },
          b: {
            fontSize: 19,
            fontWeight: "bold",
            align: "right",
            padding: [0, 20, 0, 20],
          },
        },
      },
      formatter: (params: any) => {
        // 找到匹配的数据
        const valueObj: any = chartData.value.find(
          (item) => item.name === params
        );

        // 计算百分比
        let rate =
          (
            Number((valueObj.value / chartCount.value).toFixed(2)) * 100
          ).toFixed(0) + "%";

        return (
          params + "{b|" + rate + "}" + "{a|" + valueObj.value + "人" + "}"
        );
      },
    },
    color: ["#59F7CA", "#2B99FF", "#F2B949", "#81C4E4", "#FDFDFD"],
    series: [
      {
        name: "游客年龄分布情况汇总",
        type: "pie",
        center: ["22%", "48%"],
        radius: ["45%", "60%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        itemStyle: {
          borderColor: "rgba(2, 27, 41, 0.1)",
          borderWidth: 5,
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "人";
          },
        },
        data: chartData.value,
      },
    ],
  };
  myPieChart.setOption(options);
};

// 让数字跳动
const getCountUpNum = () => {
  nextTick(() => {
    countUpNum(manDom.value, manValue.value);
    countUpNum(womanDom.value, womanValue.value);
  });
};
</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;

    .chart {
      width: 484px;
      height: 336px;
    }

    .sex {
      display: flex;
      justify-content: space-between;
      padding: 0 35px;
      width: 484px;
      height: 106px;

      .sex_box {
        display: flex;
        justify-content: space-between;
        width: 170px;
        height: 77px;

        .box_icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 77px;
          height: 77px;
          background-image: url(@/assets/images/5.png);
          background-size: 100% 100%;

          img {
            width: 51px;
            height: 51px;
          }

          .women {
            width: 40px;
            height: 40px;
          }
        }

        .box_msg {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          width: 82px;
          height: 77px;

          .msg_num {
            font-size: 30.5px;
            color: #b8edff;
          }

          .msg_text {
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>
