<template>
    <section class="card trend-chart-panel" v-loading="loading">
        <div v-if="trendResult" class="panel-header">
            <span class="panel-meta">
                {{ trendResult.bucket || '-' }} / {{ trendResult.displayPointCount || 0 }} 点
            </span>
        </div>

        <div v-if="hasSeries" class="chart-body">
            <LineChart :options="chartOptions" />
        </div>
        <el-empty v-else class="chart-empty" description="请选择监测点和指标后查询趋势" />
    </section>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import LineChart from '@/components/echarts/line/index.vue'
import type { SteadyDataView } from '@/api/steady/steadyDataView/interface'
import { buildSteadyTrendChartOptions } from '../utils/trendOptions'

defineOptions({
    name: 'SteadyTrendChartPanel'
})

const props = defineProps<{
    trendResult: SteadyDataView.SteadyTrendQueryResult | null
    loading: boolean
}>()

const hasSeries = computed(() => Boolean(props.trendResult?.series?.length))
const chartOptions = computed(() => buildSteadyTrendChartOptions(props.trendResult?.series || []))
</script>

<style scoped lang="scss">
.trend-chart-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 12px;
}

.panel-header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.panel-meta {
    color: var(--el-text-color-secondary);
    font-size: 12px;
}

.chart-body {
    flex: 1;
    min-height: 0;
}

.chart-empty {
    flex: 1;
}
</style>
