<template>
  <view class="charts-box">
    <qiun-data-charts type="ring" canvas2d :opts="opts" :chartData="chartData" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import { watch } from 'vue';
interface SeriesType {
  data: any[];
}
interface ChartDataType {
  categories?: string[];
  series: SeriesType[];
}
const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    chartData: ChartDataType;
    showLegend?: boolean;
    title?: string;
    subtitle?: string;
  }>(),
  { height: '420rpx', categories: () => [], showLegend: true, title: '', subtitle: '' },
);

const chartData = ref(props.chartData);

const opts = ref({
  rotate: false,
  rotateLock: false,
  padding: [0, 0, 0, 0],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: props.showLegend,
    position: 'bottom',
    lineHeight: 16,
  },
  title: {
    name: props.title,
    fontSize: 15,
    color: 'rgba(102, 102, 102, 1)',
  },
  subtitle: {
    name: '',
    fontSize: 25,
    color: 'rgba(51, 51, 51, 1)',
  },
  extra: {
    ring: {
      ringWidth: 60,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: true,
      borderWidth: 3,
      borderColor: '#FFFFFF',
    },
  },
});
watch(
  () => props.subtitle,
  val => {
    if (val) {
      opts.value.subtitle.name = val;
    } else {
      opts.value.subtitle.name = props.title ? '0%' : '';
    }
  },
  {
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 500rpx;
}
</style>
