<!--
 * @Author: walker.liu
 * @Date: 2022-06-06 16:19:14
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
 * 买卖次数
-->
<template>
  <chart-box
    :title="t('analysis.BuyAndSell')"
    name="deal-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.r24hBay') }}</span>
        <span class="value">{{ formData.value1 ?? '---' }}</span>
      </div>
      <div class="twofield">
        <span class="label">{{ $t('analysis.r24hSell') }}</span>
        <span class="value">{{ formData.value2 ?? '---' }}</span>
      </div>
    </template>
    <div class="chart-box" id="chart-box-2"></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 props = defineProps({
  title: String,
  options: Array,
  tb: String,
  token: String,
  currentPath: String,
  r24h: String,
});
const date = ref('5m');
// 初始化折线图
const WatchEcharts = useWatchEcharts();
// 当前链
const chain = useChain();
const formData = reactive({
  value1: '',
  value2: '',
});
watch(
  () => WatchEcharts.value,
  (v) => {
    initChart();
    getData();
  }
);
let myChart: any = null;
onMounted(() => {
  nextTick(() => {
    initChart();
    getData();
  });
});
watch(
  () => props.tb,
  (v) => {
    if (v) {
      initChart();
      getData();
    }
  }
);
const initChart = () => {
  if (myChart) {
    myChart.dispose();
  }
  const chartDom = document.getElementById('chart-box-2') 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/getBuyAndSellNumber`, {
      params: {
        tag: props.tb,
        date: date.value,
      },
    })
    .then((res: any) => {
      myChart && myChart.hideLoading();
      formData.value1 = res?.count?.buy;
      formData.value2 = res?.count?.sell;
      // 先计算出双轴各自的最大值
      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.bay'), t('analysis.sell')],
    },
    grid: {
      bottom: 30,
      left: '50px',
      right: '50px',
    },
    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.bay'),
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        min: maxNum.twoMin,
        max: maxNum.twoMax,
        splitNumber: 5,
        interval: (maxNum.twoMax - maxNum.twoMin) / 5,
        type: 'value',
        name: t('analysis.sell'),
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: t('analysis.bay'),
        type: 'line',
        data: list.buy,
      },
      {
        name: t('analysis.sell'),
        type: 'line',
        data: list.sell,
        // 右侧y轴
        yAxisIndex: 1,
      },
    ],
  };
  document.querySelector('#chart-box-2').removeAttribute('_echarts_instance_');
  myChart.setOption(options);
};
</script>
<style lang="less" scoped>
.chart-box {
  height: 212px;
}
</style>
