<!--
 * @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 13:54:05
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, defineProps, watch, onMounted } from 'vue'
import CommonCard from "../../../../components/CommonCard/CommonCard.vue";
import FunnelChart from "../../../../components/chart/FunnelChart/FunnelChart.vue";
import { bigNumberTransform } from "../../../../utils/utils";
const yaTheme = localStorage.getItem("YA_THEME");

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,
        };
      });
      console.log(chartData.value, "chartData.valuechartData.value");
    }
  );
};
const legendFormatter = (parms) => {
  let t = parms.name.toString();
  let v = parms.value.toString();
  var maxlength = 30;
  // if (v.length > maxlength1) {
  //   vVal = v.substring(0, maxlength - 1) + "...";
  // } else {
  //   vVal = v;
  // }
  if (t.length > maxlength) {
    return (
      `{name|${t.substring(0, maxlength - 1)}}` +
      "...   " +
      `{value|${bigNumberTransform(v)}}`
    );
  } else {
    return `{name|${parms.name}}` + "   " + `{value|${bigNumberTransform(v)}}`;
  }
};
const tooltipFormatter = function (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>`;
};
onMounted(() => {
  init();
});
</script>

<template>
  <CommonCard :title="title" unit="GB" class="access-feature">
    <div v-if="chartData.length > 0" class="access-feature">
      <FunnelChart :labelLine="20" funnelLeft="10%" :seriesWidth="'30%'" :legendFormatter="legendFormatter"
        :chartData="chartData" />
    </div>
    <ya-empty v-else></ya-empty>
  </CommonCard>
</template>

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

::v-deep .ya-card {
  padding-bottom: 0;
}

.no-data {
  .img1 {
    width: 130px;
    height: 100px;
  }

  margin: 20px auto;
  text-align: center;
  color: #96a2b5;
  font-size: 14px;
}
</style>
