<template>
  <div class="app-echats-timeline">
    <template v-if="loading">
      <div class="app-echats-timeline__tip">正在加载...</div>
    </template>
    <template v-else-if="isEmpty">
      <div class="app-echats-timeline__tip">暂无数据</div>
    </template>
    <template v-else>
      <ul class="legend">
        <li class="legend-item">收: {{ selectedItem.close }}</li>
        <li class="legend-item">MA5: {{ selectedItem.ma5 }}</li>
      </ul>
      <app-echarts :option="options.timeline" v-model:dataIndex="dataIndex" @ready="initOptions" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { useTimelineChart } from '@/hooks/echarts/timeline'
import AppEcharts from '@/components/base/echarts/index.vue'

const props = defineProps({
  goodscode: {
    type: String,
    required: true,
  },
})

const { loading, dataIndex, isEmpty, options, selectedItem, initOptions } = useTimelineChart(props.goodscode);
</script>

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