<!--
 * @Author: walker.liu
 * @Date: 2022-05-30 17:23:07
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <chart-box
    :title="$t('analysis.twitterTitle')"
    name="twitter-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.Dateaccountcreation') }}</span>
        <span class="value">{{ formData.value1 ?? '---' }}</span>
      </div>
      <div class="onefield">
        <span class="label">{{ $t('analysis.Numberfans') }}</span>
        <span class="value">{{ formData.value2 ?? '---' }}</span>
      </div>
    </template>
    <div class="chart-box" id="chart-box-4"></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,
  token: String,
  tb: String,
  r24h: String,
  currentPath: String,
});
const route = useRoute();
const date = ref('5m');
const formData = reactive({
  value1: '',
  value2: '',
});
let myChart: any = null;
const WatchEcharts = useWatchEcharts();
watch(
  () => WatchEcharts.value,
  (v) => {
    initChart();
    getData();
  }
);
const chain = useChain();
onMounted(() => {
  nextTick(() => {
    if (route.name !== 'tokenAnalysis') {
      initChart();
      getData();
    }
  });
});
watch(
  () => props.token,
  (v) => {
    if (v) {
      // 当处于右侧折线图页面时,点击行，切换重新加载折线图
      initChart();
      getData();
    }
  }
);
const initChart = () => {
  if (myChart) {
    myChart.dispose();
  }
  const chartDom = document.getElementById('chart-box-4') 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/getTwitter`, {
      params: {
        tag: props.token,
        date: date.value,
      },
    })
    .then((res: any) => {
      myChart && myChart.hideLoading();
      formData.value1 = res?.count?.twt;
      formData.value2 = res?.count?.twf;
      // 先计算出双轴各自的最大值
      getMinNum(res.list.twn, 'oneMin');
      getMaxNum(res.list.twn, 'oneMax');
      renderChart(res.list);
    });
};
const renderChart = (list) => {
  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    legend: {
      data: [t('analysis.ChildNumberfans')],
    },
    grid: {
      bottom: 30,
      left: '60px',
    },
    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.ChildNumberfans'),
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: t('analysis.ChildNumberfans'),
        type: 'line',
        data: list.twn,
        // 是否在折现点展示数值
        // itemStyle: { normal: { label: { show: true } } },
      },
    ],
  };
  document.querySelector('#chart-box-4').removeAttribute('_echarts_instance_');
  myChart.setOption(options);
};
</script>
<style lang="less" scoped>
.chart-box {
  height: 212px;
}
</style>
