<!--
 * @Author: tqh
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/website/components/accessNum.vue
 * @Date: 2022-09-2 08:56:59
-->
<script setup lang="ts">
import { ref, defineProps, watch, } from 'vue'

import CommonCard from "../../../../components/CommonCard/CommonCard.vue";
import BarChart from "../../../../components/chart/BarChart/BarChart.vue";
import RoseChart from "../../../../components/chart/RoseChart/RoseChart.vue";

const barChartData = ref([]) as any;
const props = defineProps({
  LIST: Array,
});
watch(
  () => props.LIST,
  (val, preVal) => {
    barChartData.value = val.map((item) => {
      return {
        name: item.type,
        value: item.downSum,
      };
    });
  }
);

const tooltipFormatterone = (params) => {
  let _resHtml = "";
  const { color, seriesName, value, name, percentage } = params;
  _resHtml += `<div class="line-chart-tool-item">
            <div class="line-chart-tool-info">
              <div class="line-chart-tool-item-icon" style="background: ${color}"></div>
              <div class="line-chart-tool-item-name">${name}</div>
            </div>
            <div class="line-chart-tool-item-value">${value}</div>
				</div>`;
  return `<div class="line-chart-tool-bg">
			<div class="line-chart-tool-bg-content">
				${_resHtml}
			</div>
		</div>`;
};
</script>

<template>
  <CommonCard title="网站文件类型访问次数TOP5" unit="次" class="access-num">
    <div class="access-content">
      <RoseChart v-if="barChartData.length" :borderRadius="0" :defaultType="'two'" :pieCenter="['50%', '50%']"
        legendTop="auto" legendRight="0" :legendShow="true" :labelLineShow="false" :labelShow="false"
        :chartData="barChartData" />
      <ya-empty v-else></ya-empty>
    </div>
  </CommonCard>
</template>

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

  .access-content {
    height: 100%;
  }
}

::v-deep .custom-rose-legend .custom-rose-legend-item {
  padding-right: 0;
}
</style>
