<!--
 * @Author: walker.liu
 * @Date: 2022-06-06 17:10:17
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <chart-box
    :title="$t('analysis.poolTitle')"
    name="pool-box"
    :r24h="r24h"
    :token="token"
    :tb="tb"
    :currentPath="currentPath"
  >
    <template #chartSwitch>
      <RadioGroup type="analysisDate" v-model:current="date" @change="getData">
      </RadioGroup>
    </template>
    <template #header>
      <div class="onefield">
        <span class="label">{{ $t('analysis.curPool') }}</span>
        <span class="value">{{
          formData.value1 ? '$' + conversionNum(formData.value1) : '-'
        }}</span>
      </div>
    </template>
    <div class="chart-box" id="chart-box-9"></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 { conversionNum } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
const { maxNum, getMaxNum, getMinNum } = useEchartNum();
const route = useRoute();
const { t } = useI18n();
const props = defineProps({
  tb: String,
  currentPath: String,
  token: String,
  r24h: String,
});
const date = ref('5m');
const WatchEcharts = useWatchEcharts();
watch(
  () => WatchEcharts.value,
  (v) => {
    initChart();
    getData();
  }
);
const chain = useChain();
const formData = reactive({
  value1: '',
});
let myChart: any = null;
onMounted(async () => {
  nextTick(() => {
    initChart();
    getData();
  });
});
watch(props, (v) => {
  // 当处于右侧折线图页面时,点击行，切换重新加载折线图
  initChart();
  getData();
});
const initChart = () => {
  if (myChart) {
    myChart.dispose();
  }
  const chartDom = document.getElementById('chart-box-9') 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/getUbData`, {
      params: {
        tb: props.tb,
        date: date.value,
      },
    })
    .then((res: any) => {
      if (typeof res.list.date[0] === 'number') {
        res.list.date.forEach((item, index) => {
          let date = new Date(item * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          let Y = date.getFullYear() + '-';
          let M =
            (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) + '-';
          let D = date.getDate() + ' ';
          let h = date.getHours() + ':';
          let m = date.getMinutes() + ':';
          let s = date.getSeconds();
          res.list.date[index] = Y + M + D + h + m + s;
        });
      }
      myChart && myChart.hideLoading();
      formData.value1 = res?.count?.ub;
      // 先计算出双轴各自的最大值
      getMinNum(res.list.ub, 'oneMin');
      getMaxNum(res.list.ub, 'oneMax');
      renderChart(res.list);
    })
    .catch((e) => {
      myChart && myChart.hideLoading();
    });
};
const renderChart = (list) => {
  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    legend: {
      data: [t('analysis.Flowpoolchanges')],
    },
    grid: {
      bottom: '30px',
      left: '70px',
    },
    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.Flowpoolchanges'),
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: t('analysis.Flowpoolchanges'),
        type: 'line',
        data: list.ub,
      },
    ],
  };
  document.querySelector('#chart-box-9').removeAttribute('_echarts_instance_');
  myChart.setOption(options);
};
</script>
<style lang="less" scoped>
.chart-box {
  height: 212px;
}
</style>
