<template>
  <div class="content">
    <!-- 标题区域 -->
    <div class="header">游客来源地统计汇总</div>

    <!-- 内容区域 -->
    <div class="box" ref="barChart"></div>
  </div>
</template>

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

// 柱状图DOM元素
const barChart = ref(null);

// 地方数组
const placeList = ref<string[]>([]);

// 数据数组
const valueList = ref<number[]>([]);
const valueList2 = ref<number[]>([]);

// 原始数据
const dataList = ref([]);

onMounted(() => {
  // 获取游客来源地统计数据
  getSourceRankData();
});

// 获取游客来源地统计数据
const getSourceRankData = async () => {
  const res = await reqGetSourceRankData();
  // console.log(res);
  dataList.value = res.data.slice(0, 7);

  // 整理数据
  placeList.value = dataList.value.map((ele: any) => ele.province).reverse();

  // 真实数据
  valueList.value = dataList.value.map((ele: any) => ele.num).reverse();

  // 因数据相差太大图形展示效果不佳，对数据进行处理后展示
  valueList2.value = dataList.value
    .map((ele: any) => Math.cbrt(ele.num))
    .reverse();

  // 初始化柱状图
  initBarChart();
};

// 初始化柱状图
const initBarChart = () => {
  let myBarChart = Echarts.init(barChart.value);
  // 柱状图配置
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        fontSize: 15,
        fontWeight: "bold",
        rich: {
          a: {
            padding: 2,
            width: 45,
            height: 25,
            align: "center",
            color: "#fff",
            fontSize: 15,
            borderRadius: 5,
            borderWidth: 1,
            borderColor: "#08FFFF",
            shadowColor: "#fff",
            shadowBlur: 5,
          },
        },
      },
      // formatter: "{a}<br />{b}<br />{c}人次",
      formatter: function (params: any) {
        return `${params[0].seriesName}<br />
        <div class="box_icon" style="background-color:${params[0].color}"></div>
        ${params[0].name}&nbsp;&nbsp;&nbsp;
        ${valueList.value[params[0].dataIndex]}人次`;
      },
    },
    grid: {
      left: "0%",
      right: "22%",
      top: "3%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
          fontSize: 18,
          margin: 25,
          formatter: function (value: any, index: any) {
            if (Math.abs(index - 7) % 2 === 1) {
              return (
                "{a|" + "top" + Math.abs(index - 7) + "}" + "{b|" + value + "}"
              );
            } else {
              return (
                "{c|" + "top" + Math.abs(index - 7) + "}" + "{d|" + value + "}"
              );
            }
          },
          rich: {
            a: {
              padding: 2,
              width: 45,
              height: 25,
              align: "center",
              color: "#fff",
              fontSize: 15,
              borderRadius: 5,
              borderWidth: 1,
              borderColor: "#08FFFF",
              shadowColor: "#fff",
              shadowBlur: 5,
            },
            b: {
              padding: [0, 0, 0, 10],
              color: "#08FFFF",
              fontSize: 17.5,
            },
            c: {
              padding: 2,
              width: 45,
              height: 25,
              align: "center",
              color: "#fff",
              fontSize: 15,
              borderRadius: 5,
              borderWidth: 1,
              borderColor: "#EFFC6D",
              shadowColor: "#fff",
              shadowBlur: 5,
            },
            d: {
              padding: [0, 0, 0, 10],
              color: "#EFFC6D",
              fontSize: 17.5,
            },
          },
        },
        data: placeList.value,
      },
    ],
    series: [
      {
        name: "游客来源地统计汇总",
        type: "pictorialBar",
        symbol: "rect",
        symbolRepeat: "fixed",
        symbolSize: [10, 20],
        symbolMargin: "25%",
        symbolClip: true,
        z: 10,
        itemStyle: {
          color: function (params: any) {
            if (params.dataIndex % 2 === 0) {
              return "#00BABA";
            } else {
              return "#EFFC6D";
            }
          },
        },
        data: valueList2.value,
      },
      {
        type: "pictorialBar",
        label: {
          show: true,
          formatter: function (params: any) {
            // return params.value + "人次";
            return valueList.value[params.dataIndex] + "人次";
          },
          position: "right",
          color: "#fff",
          fontSize: 15,
          distance: 15,
        },
        symbolRepeat: "fixed",
        symbolMargin: "25%",
        symbol: "rect",
        symbolSize: [10, 20],
        itemStyle: {
          color: "#4D5353",
        },
        data: valueList2.value,
      },
    ],
  };
  myBarChart.setOption(options);
};
</script>

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

  .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: 497px;

    ::v-deep(.box_icon) {
      display: inline-block;
      margin-right: 10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}
</style>
