<!--
 * @Author: walker.liu
 * @Date: 2022-05-31 11:15:12
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <chart-box
    :title="$t('analysis.Holders')"
    name="hoder-box"
    :r24h="r24h"
    :token="token"
    :tb="tb"
    :currentPath="currentPath"
  >
    <template #chartSwitch>
      <radio-group type="analysisDate" v-model:current="date" @change="getData">
      </radio-group>
    </template>
    <template #header>
      <div class="newfield">
        <span class="label">{{ $t('analysis.TotalHolder') }}</span>
        <span class="value">{{ formData.value1 ?? '--' }}</span>
      </div>
      <div class="twofield">
        <span class="label">{{ $t('analysis.r24hadded') }}</span>
        <span class="value">{{ formData.value2 ?? '--' }}</span>
      </div>
      <div class="threefield">
        <span class="label">{{ $t('analysis.r24hClearance') }}</span>
        <span class="value">{{ formData.value3 ?? '--' }}</span>
      </div>
    </template>
    <div class="chart-box" id="chart-box-1"></div>
  </chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
const { maxNum, getMaxNum, getMinNum } = useEchartNum();
const { t } = useI18n();
const route = useRoute();
const props = defineProps({
  title: String,
  options: Array,
  tb: String,
  token: String,
  r24h: String,
  currentPath: String,
});
const date = ref('5m');
let myChart: any = null;
// 折线图状态
const WatchEcharts = useWatchEcharts();
watch(
  () => WatchEcharts.value,
  (v) => {
    initChart();
    getData();
  }
);
const chain = useChain();
// 头部数据
const formData = reactive({
  value1: '',
  value2: '',
  value3: '',
});
onMounted(async () => {
  nextTick(() => {
    initChart();
    getData();
  });
});
watch(
  () => props.tb,
  (v) => {
    // 当处于右侧折线图页面时,点击行，重新加载折线图
    initChart();
    getData();
  }
);
const initChart = () => {
  if (myChart) {
    myChart.dispose();
  }
  const chartDom = document.getElementById('chart-box-1') as HTMLCanvasElement;
  chartDom.style.width = chartDom.offsetWidth + 'px';
  chartDom.style.height = '212px';
  myChart = echarts.init(chartDom, 'vintage');
};
const getData = () => {
  myChart &&
    myChart.showLoading({
      textColor: 'rgb(150,150,150)', //文字颜色
      maskColor: 'rgba(255,255,255,0)',
    });
  request
    .get(`/v1/${chain.value}/analysis/getNhData`, {
      params: {
        tag: props.tb,
        date: date.value,
      },
    })
    .then((res: any) => {
      myChart && myChart.hideLoading();
      formData.value1 = res?.count?.total_nh;
      formData.value2 = res?.count?.add_24;
      formData.value3 = res?.count?.cl_24;
      // 先计算出双轴各自的最大值
      getMinNum(res.list.active, 'oneMin');
      getMaxNum(res.list.active, 'oneMax');
      getMinNum(res.list.cl_nh, 'twoMin');
      getMaxNum(res.list.cl_nh, 'twoMax');
      getMinNum(res.list.new_nh, 'threeMin');
      getMaxNum(res.list.new_nh, 'threeMax');
      renderChart(res.list);
    });
};
const renderChart = (list) => {
  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    legend: {
      data: [
        t('analysis.AddressActivity'),
        t('analysis.newHoders'),
        t('analysis.ClearanceHolder'),
      ],
    },
    grid: {
      bottom: 30,
      left: '50px',
    },
    xAxis: [
      {
        type: 'category',
        data: list.date,
        axisLine: {
          onZero: false,
        },
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        // min: maxNum.oneMin,
        // max: maxNum.oneMax,
        // splitNumber: 5,
        // interval: (maxNum.oneMax - maxNum.oneMin) / 5,
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        type: 'value',
        // min: maxNum.twoMin,
        // max: maxNum.twoMax,
        // splitNumber: 5,
        // interval: (maxNum.twoMax - maxNum.twoMin) / 5,
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        type: 'value',
        // min: maxNum.threeMin,
        // max: maxNum.threeMax,
        // splitNumber: 5,
        // interval: (maxNum.threeMax - maxNum.threeMin) / 5,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: t('analysis.AddressActivity'),
        type: 'line',
        data: list.active,
      },
      {
        name: t('analysis.newHoders'),
        type: 'line',
        data: list.new_nh,
      },
      {
        name: t('analysis.ClearanceHolder'),
        type: 'line',
        data: list.cl_nh,
      },
    ],
  };
  document.querySelector('#chart-box-1').removeAttribute('_echarts_instance_');
  myChart.setOption(options);
};
</script>
<style lang="less" scoped>
.chart-box {
  height: 212px;
}
</style>
