<template>
    <div class="app-echats-line">
        <template v-if="loading">
            <div class="app-echats-line__tip">正在加载...</div>
        </template>
        <template v-else-if="isEmpty">
            <div class="app-echats-line__tip">暂无数据</div>
        </template>
        <template v-else>
            <app-echarts :option="options.line" @ready="initOptions" />
        </template>
    </div>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, watch } from 'vue'
import { useLineChart } from '@/hooks/echarts/line'
import { EchartsDataset } from '@/hooks/echarts/line/interface'
import AppEcharts from '@/components/base/echarts/index.vue'

const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    dataList: {
        type: Object as PropType<EchartsDataset['line']['source']>,
        required: true
    },
})

const { options, initData, initOptions } = useLineChart()
const isEmpty = shallowRef(false)

watch(() => props.loading, (status) => {
    if (status) {
        isEmpty.value = false
    } else {
        if (props.dataList.price.length) {
            initData(props.dataList)
        } else {
            isEmpty.value = true
        }
    }
}, {
    immediate: true
})
</script>

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