<!--
 * @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 11:48:11
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, defineProps, watch, onMounted } from 'vue'
import CommonCard from "../../../../components/CommonCard/CommonCard.vue";
import CircularDiagram from "../../../../components/chart/CircularDiagram/CircularDiagram.vue";
import { bigNumberTransform } from "../../../../utils/utils";
const title = ref("全省网站上行流量排名TOP5");
const chartData = ref([]) as any;
const props = defineProps({
  LIST: Array,
});
const init = () => {
  watch(
    () => props.LIST,
    (val, preVal) => {
      chartData.value = val.map((item, index) => {
        return {
          name: item.websiteName,
          value: item.netWorkSum,
          // unit: item.unit,
        };
      });
    }
  );
};
onMounted(() => {
  init();
});
const tooltipValueFormatter = (params) => {
  let _resHtml = "";
  const { color, seriesName, value, name, percentage } = params;
  _resHtml += `<div class="rose-linechart-tooltip-content-item">
              <div class="rose-linechart-tooltip-content-item-value">${bigNumberTransform(
    value
  )}
              </div>
          </div>`;
  return `<div class="rose-linechart-tooltip">
        <div style="display: flex;">
          <div class="rose-linechart-tooltip-content-item-icon" style="background: ${color};top:4px;position:relative"></div>
          <div >
            <div class="rose-linechart-tooltip-subtitle">${name}</div>
            <div class="rose-linechart-tooltip-content">
              ${_resHtml}
            </div>
          </div>
        </div>
      </div>`;
};

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;
};
</script>

<template>
  <CommonCard :title="title" unit="GB" class="access-feature">
    <CircularDiagram v-if="chartData.length" otherType="one" :chartData="chartData" :radius="['50%', '63%']"
      :pieCenter="['50%', '50%']" legendLeft="50%" legendTop="auto" :legendFormatter="legendFormatter" :name="title" />
    <ya-empty v-else></ya-empty>
  </CommonCard>
</template>

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

::v-deep .circle-icon-flex {
  justify-content: space-between;
}

::v-deep .chart {
  width: 50% !important;
}

::v-deep .custom-circle-legend-item .legend-label {
  width: 100%;
}
</style>
