<!-- 区域营收占比 -->
<script setup lang="ts">
import "./revenueRate.less";
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";
import { handlegetServerConnec } from "../../newService";

let myChart = ref<any>();
// 省份信息
const baseInfoObj = ref<any>();

onMounted(async () => {
  myChart.value = echarts.init(document.getElementById("revenueRateContent"));
});

// 拿到数据
const handleGetData = async () => {
  const req: any = {
    action_type: "GetCurrentAmountByRegion",
    province_code: baseInfoObj.value.ProvinceId || "3544",
  };
  const data = await handlegetServerConnec(req);
  console.log("revenueRateContent", data);
  console.log("props.SPREGIONTYPECOLOR", props.SPREGIONTYPECOLOR);
  let list: any = data.CurrentData;
  let res: any = [];
  if (list && list.length > 0) {
    let totalRevenue: number = 0;
    list.forEach((item: any) => {
      totalRevenue += item.TOTALPRICE;
    });
    list.forEach((item: any) => {
      res.push({
        value: Number(((item.TOTALPRICE / totalRevenue) * 100).toFixed(2)),
        name: item.TYPE_NAME,
        itemStyle: { color: props.SPREGIONTYPECOLOR[item.REGION_ID] },
      });
    });
  }
  console.log("res", res);

  myChart.value.setOption({
    title: {
      // text: "区域营收占比",
      left: "center",
      textStyle: {
        color: "#fff", // 设置标题主文字颜色
        fontSize: 24, // 设置标题字体大小
        fontWeight: "bold", // 设置标题字体粗细
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: 1,
      padding: [120, 0, 0, 0],
      textStyle: {
        color: "#ffffff", // 设置图例文字颜色
        fontSize: 14, // 设置字体大小
      },
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        center: ["30%", "50%"],
        data: res,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        label: {
          show: true, // 显示标签
          position: "inside", // 将标签显示在饼图内部
          color: "#fff", // 设置字体颜色
          formatter: "{c}%", // 显示数值，即每个扇区的值
        },
        labelLine: false,
      },
    ],
  });
};

// 传入的数据
const props = defineProps<{
  SPREGIONTYPECOLOR: any;
  show: any;
}>();

watch(
  () => props.show,
  (newVal, oldVal) => {
    console.log("realboxnewVal", newVal);
    if (newVal) {
      let saveData = localStorage.getItem("baseInfoObj");
      if (saveData) {
        baseInfoObj.value = JSON.parse(saveData);
      }
      handleGetData();
    }
  },
  { deep: true }
);

defineExpose({
  handleGetData: handleGetData,
});
</script>
<template>
  <div class="revenueRateMain">
    <div class="pageTitle">区域营收占比</div>
    <div
      class="revenueRateContent"
      id="revenueRateContent"
      style="width: 360px; height: 360px"
    ></div>
  </div>
</template>