<!--
 * @Author: walker.liu
 * @Date: 2022-06-06 17:01:32
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <chart-box
    :title="$t('analysis.Top100')"
    name="top100-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="onefield">
        <span class="label">{{ $t('analysis.top10024HDeposit') }}</span>
        <span class="value">{{
          formData.value1 ? '$' + conversionNum(formData.value1) : '-'
        }}</span>
      </div>
      <div class="twofield">
        <span class="label">{{ $t('analysis.top100withdrawal') }}</span>
        <span class="value">{{
          formData.value2 ? '$' + conversionNum(formData.value2) : '-'
        }}</span>
      </div>
    </template>
    <div class="chart-box" id="chart-box-6"></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 { conversionNum } from '@/utils/tool';
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: '',
});
onMounted(async () => {
  nextTick(() => {
    initChart();
    getData();
  });
});
watch(props, (v) => {
  // 当处于右侧折线图页面时,点击行，切换重新加载折线图
  initChart();
  getData();
});
const initChart = () => {
  if (myChart) {
    myChart.dispose();
  }
  const chartDom = document.getElementById('chart-box-6') as HTMLCanvasElement;
  chartDom.style.width = chartDom.offsetWidth + 'px';
  chartDom.style.height = '212px';
  myChart = echarts.init(chartDom, 'vintage');
};
const getData = () => {
  myChart &&
    myChart.showLoading({
      maskColor: 'rgba(255,255,255,0)',
      textColor: 'rgb(150,150,150)', //文字颜色
    });
  request
    .get(`/v1/${chain.value}/analysis/getTop100Change`, {
      params: {
        tag: props.tb,
        date: date.value,
      },
    })
    .then((res: any) => {
      myChart && myChart.hideLoading();
      let buy_24h, sell_24h;
      if (res.count) {
        buy_24h = parseFloat(res.count.buy_24h).toFixed(2);
        sell_24h = parseFloat(res.count.sell_24h).toFixed(2);
      }
      formData.value1 = buy_24h;
      formData.value2 = sell_24h;
      res.list.buy = res.list.buy.map((item) => {
        if (item !== undefined && item !== null) {
          return parseFloat(item).toFixed(2);
        }
      });
      res.list.sell = res.list.sell.map((item) => {
        if (item !== undefined && item !== null) {
          return parseFloat(item).toFixed(2);
        }
      });
      // 先计算出双轴各自的最大值
      getMinNum(res.list.buy, 'oneMin');
      getMaxNum(res.list.buy, 'oneMax');
      getMinNum(res.list.sell, 'twoMin');
      getMaxNum(res.list.sell, 'twoMax');
      renderChart(res.list);
    });
};
const renderChart = (list) => {
  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    legend: {
      data: [t('analysis.Deposit'), t('analysis.Withdrawal')],
    },
    grid: {
      bottom: 30,
      left: '50px',
      right: '50px',
      // containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: list.date,
        axisLine: {
          onZero: false,
        },
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        min: maxNum.oneMin,
        max: maxNum.oneMax,
        splitNumber: 5,
        interval: (maxNum.oneMax - maxNum.oneMin) / 5,
        type: 'value',
        name: `${t('analysis.Deposit')}($)`,
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        min: maxNum.twoMin,
        max: maxNum.twoMax,
        splitNumber: 5,
        interval: (maxNum.twoMax - maxNum.twoMin) / 5,
        type: 'value',
        name: `${t('analysis.Withdrawal')}($)`,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: t('analysis.Deposit'),
        type: 'line',
        data: list.buy,
      },
      {
        name: t('analysis.Withdrawal'),
        type: 'line',
        data: list.sell,
        // 右侧y轴
        yAxisIndex: 1,
        // 线条粗细
        // lineStyle: {
        //   width: 1,
        // },
      },
    ],
  };
  document.querySelector('#chart-box-6').removeAttribute('_echarts_instance_');
  myChart.setOption(options);
};
</script>
<style lang="less" scoped>
.chart-box {
  height: 212px;
}
</style>
