<script setup lang="ts">
import * as echarts from "echarts";

interface ChartDataType {
  name: string;
  value: number;
  icon: string;
}

const chartObj = reactive({
  online: 0,
  offline: 0,
  rate: 0,
  onlineIcon: "",
  offlineIcon: "",
});

const props = defineProps({
  id: {
    type: String,
    default: "barChart",
  },

  chartData: {
    type: Array as () => ChartDataType[],
  },
});

watch(
  () => props.chartData,
  (newData) => {
    if (newData) {
      const total = newData[0].value + newData[1].value;
      chartObj.online = newData[0].value;
      chartObj.offline = newData[1].value;
      chartObj.rate = Math.round((newData[0].value / total) * 100);
      chartObj.onlineIcon = newData[0].icon;
      chartObj.offlineIcon = newData[1].icon;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const isColor = ["rgba(79, 203, 255, 1)", "rgba(140, 225, 251,1)"];

const options = {
  legend: {
    show: false,
  },
  title: {
    text: "{a|" + chartObj.rate + "}{c|%}",
    x: "40.5%",
    y: "40%",
    textStyle: {
      rich: {
        a: {
          fontSize: 29, //环内数据字体大小
          color: "#dbe2ea",
          fontWeight: "bold",
          fontFamily: "SourceHanSansCN",
        },
        c: {
          fontSize: 15,
          color: "#dbe2ea",
          fontWeight: "500",
          fontFamily: "SourceHanSansCN",
        },
      },
    },
  },
  series: [
    {
      legendHoverLink: false, //只需要将这个给 false 即可
      center: ["50.1%", "50%"],
      name: "",
      type: "pie",
      radius: ["85%", "75%"],
      silent: true,
      clockwise: true,
      startAngle: 90,
      z: 0,
      zlevel: 0,
      label: {
        normal: {
          position: "center",
        },
      },
      data: [
        {
          value: chartObj.online,
          name: "在线",
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: {
                // 圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: isColor[0], // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: isColor[1], // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          value: chartObj.offline,
          name: "离线",
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: "rgba(86, 118, 139, 1)",
            },
          },
        },
      ],
    },
  ],
};
const chart = ref<any>("");

onMounted(() => {
  // 图表初始化
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  chart.value.setOption(options);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
</script>

<template>
  <div class="ring">
    <div class="ring-left">
      <img :src="chartObj.onlineIcon" alt="" />
      <p class="data">{{ chartObj.online }}</p>
      <p class="name">设备在线</p>
    </div>
    <div class="ring-content">
      <div :id="id" class="ring-content-chart"></div>
      <img src="@/assets/images/ring.png" />
    </div>
    <div class="ring-right">
      <img :src="chartObj.offlineIcon" alt="" />
      <p class="data">{{ chartObj.offline }}</p>
      <p class="name">设备离线</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
@mixin data-style($color) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 120px;
  margin-top: 30px;

  .data {
    margin-top: 8px;
    margin-bottom: -13px;
    font-size: 18px;
    font-weight: 400;
    color: #21cffe;
  }

  .name {
    font-size: 12px;
    color: #fefffe;
  }

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

.ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  padding: 0 20px;

  &-left {
    @include data-style(#21cffe);
  }

  &-content {
    width: 100%;
    height: 100%;

    &-chart {
      width: 100%;
      height: 100%;
    }

    img {
      position: absolute;
      top: 0;
      left: 50%;
      width: 194px;
      height: 151px;
      transform: translateX(-50%);
    }
  }

  &-right {
    @include data-style(#f6ff01);
  }
}
</style>
