<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const canvasRef = ref()

const props = defineProps({
  data:Array
});

const data = props?.data

const total = ref(
  data.reduce((p, { value }) => p += value, 0)
)
const option = {
  // tooltip: {
  //   trigger: 'item'
  // },
  legend: {
    right: 0,
    top: 'center',
    orient: 'vertical',
    formatter: function (name) {
      return `${name} ${data.find((item) => name === item.name).value}`
    }
  },
  series: [
    {
      name: '维修管理',
      type: 'pie',
      center: [90, 80],
      radius: [40, 70],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 6,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data
    }
  ]
};
onMounted(() => {
  const myChart = echarts.init(canvasRef.value)
  myChart.setOption(option)
})
</script>

<template>
  <div class="card">
    <div class="h-12 flex justify-between items-end">
      <div class="font-semibold text-lg">维修管理</div>
      <div class="font-semibold"><span class="text-3xl font-bold mr-2">{{ total }}</span>个设备</div>
    </div>
    <canvas ref="canvasRef" :height="160" :width="320"></canvas>
  </div>
</template>
