<template>
  <div class="mtp-chart">
    <mtp-tabbar class="mtp-chart__tab" theme="menu" :data="chartType" @change="changeCycleType" />
    <!-- K线  -->
    <mtp-echarts-timeline class="mtp-chart__content" :goodscode="goodscode" @ready="onReady" v-if="activeCycleType === CycleType.time" />
    <!-- 分时线  -->
    <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 { CycleType } from './echarts-kline/type';
import MtpEchartsKline from './echarts-kline/index.vue';
import MtpEchartsTimeline from './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(props, { emit }) {
    const activeCycleType = ref(CycleType.time); // 当前选中的图表周期

    // 周期类型
    const chartType: Tabbar[] = [
      { label: '分时', value: CycleType.time },
      { label: '1分钟', value: CycleType.minutes },
      { label: '5分钟', value: CycleType.minutes5 },
      { label: '30分钟', value: CycleType.minutes30 },
      { label: '60分钟', value: CycleType.minutes60 },
      { label: '4小时', value: CycleType.Hours4 },
      { label: '日K', value: CycleType.days },
    ];

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

    const onReady = (startTime: string, endTime: string) => {
      emit('ready', startTime, endTime);
    }

    return {
      CycleType,
      chartType,
      activeCycleType,
      changeCycleType,
      onReady,
    }
  }
})
</script>

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