<!-- 
    filename: DoubleRingChart.vue
    author: liubin
    date: 2024-04-17 11:01:55
    description: 
-->

<template>
  <div class="double-ring-chart">
    <div ref="chart" class="double-ring-chart__container"></div>
    <!--   :style="{ height: vHeight + 'vh' }" -->
    <div class="double-ring-chart__legend">
      <div v-for="item in legendItems" :key="item.label" class="legend-item">
        <span class="legend-item__label">{{ item.label }}</span>
        <span class="legend-item__value">{{
          item.value.toLocaleString()
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js";
import options from "./double-ring-chart-options";

export default {
  name: "DoubleRingChart",
  mixins: [chartMixin, fullscreenMixin],
  props: {
    vHeight: {
      type: Number,
      default: 24,
    },
    legendItems: {
      type: Array,
      default: () => [
        { label: "2023年累计", value: 88002 },
        { label: "2024年累计", value: 88002 },
        { label: "2025年累计", value: 88002 },
      ],
    },
  },
  data() {
    return {};
  },
  computed: {},
  mounted() {
    this.initOptions(options);
  },
  methods: {
    // fullscreen mixin 需要的回调
    fullscreenCallback(isFullscreen) {
      console.log("isFullscreen--->", isFullscreen);
    },
  },
};
</script>

<style scoped>
.double-ring-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.double-ring-chart__container {
  flex: 1;
  height: 0;
}

.double-ring-chart__legend {
  padding: 12px;
  color: #fff;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.legend-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.legend-item__label {
  position: relative;
}

.legend-item__label::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 2px;
  top: 6px;
  left: -18px;
}

.legend-item:nth-child(1) .legend-item__label::before {
  background: #0f65ff;
}
.legend-item:nth-child(1) .legend-item__value {
  color: #0f65ff;
}

.legend-item:nth-child(2) .legend-item__label::before {
  background: #12fff5;
}
.legend-item:nth-child(2) .legend-item__value {
  color: #12fff5;
}

.legend-item:nth-child(3) .legend-item__label::before {
  background: #003982;
}
</style>
