<template>
  <app-view class="futures-goods" @ready="onReady">
    <app-tabs class="app-tabs--info" :data-list="chartCycleTypeList" :data-index="1" @change="tabChange">
      <component :is="components.echartsTimeline" goodscode="cu2208" style="height:500px;"
        v-if="selectedCycleType === ChartCycleType.Time" />
      <component :is="components.echartsKline" goodscode="cu2208" :cycle-type="selectedCycleType" style="height:500px;"
        v-else />
    </app-tabs>
  </app-view>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, ref, onMounted, onUnmounted } from 'vue'
import { timerInterceptor } from '@/utils/timer'
import { ChartCycleType, getChartCycleTypeList } from '@/constants/chart'
import subscribe from '@/services/subscribe'
import AppTabs from '@/components/base/tabs/index.vue'

const components = {
  echartsKline: defineAsyncComponent(() => import('@pc/components/modules/echarts-kline/index.vue')),
  echartsTimeline: defineAsyncComponent(() => import('@pc/components/modules/echarts-timeline/index.vue')),
}

const scrollEl = ref<HTMLDivElement>();
const selectedCycleType = ref(ChartCycleType.Minutes); // 当前选中的图表周期
const chartCycleTypeList = getChartCycleTypeList();
const quoteSubscribe = subscribe.addQuoteSubscribe(['cu2208']); // 行情订阅

// 指标切换
const tabChange = (index: number) => {
  selectedCycleType.value = chartCycleTypeList[index].value;
}

const onReady = () => {
  const onscroll = timerInterceptor.setDebounce(() => {
    console.log(new Date().getTime())
  });
  scrollEl.value?.addEventListener('scroll', onscroll)
}

onMounted(() => quoteSubscribe.start());
onUnmounted(() => quoteSubscribe.stop());
</script>

<style lang="less" scoped>
@import './index.less';
</style>