<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/components/DomainAccessFeature.vue
 * @Date: 2022-08-31 14:15:59
 * @Description: 
 * @LastEditTime: 2023-08-31 20:21:16
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { unref, defineProps } from 'vue'
import CommonCard from '../../../../components/CommonCard/CommonCard.vue'
import CircularDiagram from '../../../../components/chart/CircularDiagram/CircularDiagram.vue'

interface IComponentProps {
  title: string
  chartData: any
}

const { title = '', chartData = '' } = defineProps<IComponentProps>()




const legendFormatter = (name) => {
  const findItem = unref(chartData).findIndex(item => item.name === name)
  const _item = unref(chartData)[findItem] as any
  const _name = `{title|${name}}`
  const percentage = `{subtitle|${_item.value}}`
  return _name + percentage + 'GB';
}

const tooltipValueFormatter = (val) => {
  return val + 'GB';
}
</script>

<template>
  <CommonCard :title="title" class="domain-access-feature">
    <CircularDiagram :tooltipValueFormatter="tooltipValueFormatter" :chartData="chartData" legendLeft="30%"
      legendTop="25%" :pieCenter="['12%', '50%']" :legendFormatter="legendFormatter" :name="title" />
  </CommonCard>
</template>

<style lang="scss" scoped>
.domain-access-feature {
  width: 100%;
  height: 225px;
}
</style>
