<template>
  <div class="mtp-chart">
    <mtp-tabbar class="mtp-chart__tab" theme="menu" :data="chartCycleTypeList" @change="changeCycleType" />
    <!-- 分时线 -->
    <mtp-echarts-timeline class="mtp-chart__content" :goodscode="goodscode"
      v-if="activeCycleType === ChartCycleType.time" />
    <!-- K线 -->
    <mtp-echarts-kline class="mtp-chart__content" :cycle-type="activeCycleType" :show-indicator="showIndicator"
      :goodscode="goodscode" v-else />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ChartCycleType, chartCycleTypeList } from '@/@next/constants/enum/chart'
import MtpEchartsKline from '@/@next/components/modules/echarts-kline/index.vue'
import MtpEchartsTimeline from '@/@next/components/modules/echarts-timeline/index.vue'
import MtpTabbar from '../tabbar/index.vue'
import { Tabbar } from '../tabbar/type'

export default defineComponent({
  emits: ['ready'],
  components: {
    MtpEchartsKline,
    MtpEchartsTimeline,
    MtpTabbar,
  },
  props: {
    goodscode: {
      type: String,
      default: '',
    },
    // 是否显示指标
    showIndicator: {
      type: Boolean,
      default: true,
    },
  },
  setup() {
    const activeCycleType = ref(ChartCycleType.time); // 当前选中的图表周期

    // 切换图表周期类型
    const changeCycleType = (item: Tabbar<ChartCycleType>) => {
      activeCycleType.value = item.value;
    }

    return {
      ChartCycleType,
      chartCycleTypeList,
      activeCycleType,
      changeCycleType,
    }
  }
})
</script>

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