<template>
  <a-card :hoverable="false" :bordered="false">
    <div class="content-wrap">
      <div class="content">
        <div data-v-55251d00="" class="arco-statistic">
          <div class="arco-statistic-title">歌手擅长曲风</div>
          <div class="arco-statistic-content">
            <div class="arco-statistic-value">
              <span class="arco-statistic-value-integer"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="chart">
        <Chart :option="chartOption" style="width: 100%" />
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import useChartOption from '@/hooks/chart-option';
import { onMounted, ref } from 'vue';
import Chart from '@/components/chart/index.vue';

import { ToolTipFormatterParams } from '@/types/echarts';
import useDashboardApi from '@/api/dashboard';

type recordType = { value: number; name: string };

const record = ref<recordType[]>([]);

const { chartOption } = useChartOption(() => {
  return {
    grid: { left: 0, right: 0, top: 0, bottom: 0 },
    label: { show: false },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter(params) {
        const item = params as ToolTipFormatterParams;
        return `
           <div class="content-panel">
            <p>
              <span style="background-color: ${item.color}" class="tooltip-item-icon"></span>
              <span style="margin-right: 10px">${item.name}</span>
            </p>
            <span class="tooltip-value">${item.value?.toLocaleString()}</span>
            <span class="tooltip-value">${item.percent?.toLocaleString()}%</span>
          </div>`;
      },
      className: 'echarts-tooltip-diy',
    },
    series: [{ type: 'pie', radius: ['65%', '90%'], label: { show: false }, data: record.value }],
  };
});

onMounted(async () => {
  record.value = await useDashboardApi.userStyle();
});
</script>

<style lang="less" scoped>
.echarts-tooltip-diy {
  background: none !important;
  border: none !important;
}

:deep(.arco-card) {
  border-radius: 4px;
}

:deep(.arco-card-body) {
  width: 100%;
  height: 193px;
}

.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  white-space: nowrap;

  .content {
    width: 108px;

    :deep(.arco-statistic) {
      .arco-statistic-title {
        font-size: 14px;
        font-weight: bold;
        white-space: nowrap;
      }

      .arco-statistic-content {
        margin-top: 10px;
      }
    }
  }

  .chart {
    width: calc(100% - 108px);
    vertical-align: bottom;
  }
}
</style>