<template>
    <div class="water-page">
        <div class="page-heading">
            <div class="page-title">
                <span class="page-title-icon"><el-icon><component :is="pageIcon"/></el-icon></span>
                <div>
                    <h2>{{ title }}</h2>
                    <span class="muted">按时间与数值范围查询实时点位，并查看趋势明细</span>
                </div>
            </div>
            <el-button :icon="Refresh" :loading="loading" @click="loadData">刷新</el-button>
        </div>

        <el-card shadow="never" class="filter-card">
            <el-form :inline="true" :model="query" @submit.prevent="loadData">
                <el-form-item label="设备名称">
                    <el-input v-model="query.equipmentName" clearable placeholder="请输入设备名称"/>
                </el-form-item>
                <el-form-item label="设备编码">
                    <el-input v-model="query.equipmentCode" clearable placeholder="请输入设备编码"/>
                </el-form-item>
                <el-form-item label="安装位置">
                    <el-input v-model="query.equipmentLocation" clearable placeholder="请输入位置"/>
                </el-form-item>
                <el-form-item label="采集时间">
                    <el-date-picker
                            v-model="query.timeRange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            clearable
                    />
                </el-form-item>
                <el-form-item :label="rangeLabel">
                    <el-input-number v-model="query[minKey]" :min="0" controls-position="right"/>
                    <span class="range-sep">至</span>
                    <el-input-number v-model="query[maxKey]" :min="0" controls-position="right"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="loadData">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-alert
                v-if="loadError"
                class="page-error"
                type="error"
                show-icon
                :closable="false"
                title="监测数据加载失败"
                description="请检查后端服务或网络连接后重试。"
        >
            <el-button size="small" type="primary" @click="loadData">重试</el-button>
        </el-alert>

        <div class="metric-grid">
            <div class="metric">
                <el-icon class="metric-icon">
                    <Monitor/>
                </el-icon>
                <span>监测点位</span><strong>{{ page.total }}</strong><small>个</small>
            </div>
            <div class="metric">
                <el-icon class="metric-icon">
                    <DataAnalysis/>
                </el-icon>
                <span>当前均值</span><strong>{{ averageValue }}</strong><small>{{ unit }}</small>
            </div>
            <div class="metric">
                <el-icon class="metric-icon">
                    <Warning/>
                </el-icon>
                <span>异常点位</span><strong class="danger">{{ abnormalCount }}</strong><small>个</small>
            </div>
            <div class="metric">
                <el-icon class="metric-icon">
                    <Clock/>
                </el-icon>
                <span>数据更新时间</span><strong class="time">{{ latestTime }}</strong>
            </div>
        </div>

        <el-card shadow="never" class="table-card">
            <div class="card-title">
                <span>{{ title }}点位清单</span>
                <el-button v-hasPermi="[exportPermission]" link type="primary" :loading="exportLoading" @click="exportData">批量导出</el-button>
            </div>
            <el-table :data="page.records" stripe border v-loading="loading" @row-click="showTrend">
                <template #empty>
                    <el-empty :description="loadError ? '暂无法获取监测数据' : '暂无符合条件的监测数据'"/>
                </template>
                <el-table-column type="index" label="#" width="55"/>
                <el-table-column prop="equipmentCode" label="设备编码" min-width="130"/>
                <el-table-column prop="equipmentName" label="设备名称" min-width="150" show-overflow-tooltip/>
                <el-table-column prop="equipmentTypeName" label="设备子类型" min-width="145" show-overflow-tooltip/>
                <el-table-column prop="location" label="安装位置" min-width="180" show-overflow-tooltip/>
                <el-table-column :label="`${metricLabel}(${unit})`" min-width="130">
                    <template #default="{ row }">
            <span :class="{ danger: row.value == null || row.status === 1 || row.status === '1' }">
              {{ row.value ?? '-' }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="90">
                    <template #default="{ row }">
                        <el-tag :type="statusType(row)">{{ statusText(row) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="采集时间" min-width="165"/>
                <el-table-column label="操作" width="90" fixed="right">
                    <template #default="{ row }">
                        <el-button link type="primary" @click.stop="showTrend(row)">趋势</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    v-model:current-page="query.pageNum"
                    v-model:page-size="query.pageSize"
                    :total="page.total"
                    layout="total, sizes, prev, pager, next"
                    :page-sizes="[10, 20, 50]"
                    @change="loadData"
            />
        </el-card>

        <el-drawer
                v-model="trendVisible"
                class="detail-drawer"
                direction="rtl"
                :title="`${current?.equipmentName || ''} - ${title}趋势`"
                size="520px"
        >
            <div v-loading="trendLoading" class="trend-body">
                <div v-show="trendRecords.length" ref="chartRef" class="trend-chart"/>
                <el-empty v-if="!trendLoading && !trendError && !trendRecords.length" description="暂无趋势数据"/>
                <el-alert
                        v-if="trendError"
                        type="error"
                        show-icon
                        :closable="false"
                        title="趋势数据加载失败"
                        description="请检查后端服务或网络连接后重试。"
                >
                    <el-button size="small" type="primary" @click="loadTrend">重试</el-button>
                </el-alert>
                <el-descriptions v-if="current" :column="1" border>
                    <el-descriptions-item label="设备编码">{{ current.equipmentCode }}</el-descriptions-item>
                    <el-descriptions-item label="安装位置">{{ current.location }}</el-descriptions-item>
                    <el-descriptions-item label="当前值">{{ current.value ?? '-' }} {{ current.unit }}
                    </el-descriptions-item>
                    <el-descriptions-item label="采集时间">{{ current.updateTime || '-' }}</el-descriptions-item>
                </el-descriptions>
            </div>
        </el-drawer>
    </div>
</template>
<script setup>
    import {computed, nextTick, onBeforeUnmount, onMounted, ref} from 'vue'
    import {DataAnalysis, Monitor, Refresh, Warning} from '@element-plus/icons-vue'
    import {ElMessage} from 'element-plus'
    import {saveAs} from 'file-saver'
    import * as echarts from 'echarts'
    import {normalizeMonitoringRecord, normalizePage, readMonitoringExportError, unwrapResponse} from '@/utils/waterSupplyModel'
    import {buildMonitoringQuery, buildTrendQuery} from '@/utils/waterSupplyMonitoringQuery'

    const props = defineProps({
        title: {type: String, required: true},
        metricLabel: {type: String, required: true},
        unit: {type: String, default: 'm³/h'},
        minKey: {type: String, default: 'flowMin'},
        maxKey: {type: String, default: 'flowMax'},
        rangeLabel: {type: String, default: '数值范围'},
        load: {type: Function, required: true},
        trend: {type: Function, required: true},
        exportApi: {type: Function, required: true},
        exportPermission: {type: String, required: true},
        metric: {type: String, default: 'value'},
        monitorType: {type: String, default: ''}
    })

    const pageIcon = computed(() => props.metric === 'pressure' ? Warning : props.metric === 'power' ? DataAnalysis : Monitor)
    const query = ref(createQuery())
    const page = ref({records: [], total: 0})
    const loading = ref(false)
    const loadError = ref(false)
    const exportLoading = ref(false)
    const current = ref(null)
    const trendVisible = ref(false)
    const trendLoading = ref(false)
    const trendError = ref(false)
    const trendRecords = ref([])
    const chartRef = ref(null)
    let chart

    function createQuery() {
        return {
            pageNum: 1,
            pageSize: 10,
            equipmentName: '',
            equipmentCode: '',
            equipmentLocation: '',
            timeRange: [],
            [props.minKey]: undefined,
            [props.maxKey]: undefined
        }
    }

    async function loadData() {
        loading.value = true
        loadError.value = false
        try {
            const response = await props.load(buildMonitoringQuery(query.value, props.minKey, props.maxKey))
            const normalized = normalizePage(response)
            normalized.records = normalized.records.map(row => normalizeMonitoringRecord(row, props.metric, props.monitorType))
            page.value = normalized
        } catch (error) {
            loadError.value = true
            console.warn(`[${props.title}] 数据加载失败`, error)
        } finally {
            loading.value = false
        }
    }

    function resetQuery() {
        query.value = createQuery()
        loadData()
    }

    const averageValue = computed(() => {
        const values = page.value.records.map(item => item.value).filter(value => Number.isFinite(value))
        return values.length ? (values.reduce((a, b) => a + b, 0) / values.length).toFixed(2) : '-'
    })
    const abnormalCount = computed(() => page.value.records.filter(item =>
        item.status === 1 || item.status === '1' || item.value == null
    ).length)
    const latestTime = computed(() =>
        page.value.records.map(item => item.updateTime).filter(Boolean).sort().at(-1) || '-'
    )

    function statusText(row) {
        if (row.status === 1 || row.status === '1') return '异常'
        if (row.status === 0 || row.status === '0') return '正常'
        return row.status ? '在线' : '未知'
    }

    function statusType(row) {
        const text = statusText(row)
        return text === '异常' ? 'danger' : text === '正常' || text === '在线' ? 'success' : 'info'
    }

    async function showTrend(row) {
        current.value = row
        trendVisible.value = true
        await loadTrend(true)
    }

    async function loadTrend(resetTrend = false) {
        if (!current.value?.id) return
        trendLoading.value = true
        trendError.value = false
        if (resetTrend) {
            trendRecords.value = []
            chart?.dispose()
            chart = undefined
        }
        try {
            const response = await props.trend(current.value.id, buildTrendQuery(query.value.timeRange))
            const data = unwrapResponse(response)
            const records = Array.isArray(data) ? data : data?.records || []
            trendRecords.value = records.map(item => normalizeMonitoringRecord(item, props.metric, props.monitorType))
            await nextTick()
            renderTrend()
        } catch (error) {
            trendError.value = true
            if (resetTrend) {
                chart?.dispose()
                chart = undefined
            }
            console.warn(`[${props.title}] 趋势数据加载失败`, error)
        } finally {
            trendLoading.value = false
        }
    }

    function renderTrend() {
        chart?.dispose()
        chart = undefined
        if (!trendRecords.value.length) return
        chart = echarts.init(chartRef.value)
        const labels = trendRecords.value.map(item => item.updateTime)
        const values = trendRecords.value.map(item => item.value ?? 0)
        chart.setOption({
            tooltip: {trigger: 'axis'},
            grid: {left: 40, right: 18, top: 20, bottom: 35},
            xAxis: {type: 'category', data: labels},
            yAxis: {type: 'value', name: props.unit},
            series: [{
                type: 'line',
                smooth: true,
                data: values,
                areaStyle: {opacity: 0.12},
                itemStyle: {color: '#2563eb'}
            }]
        })
    }

    async function exportData() {
        exportLoading.value = true
        try {
            const response = await props.exportApi(buildMonitoringQuery(query.value, props.minKey, props.maxKey))
            const blob = response instanceof Blob
                ? response
                : new Blob([response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
            const exportError = await readMonitoringExportError(blob)
            if (exportError) {
                ElMessage.error(exportError)
                return
            }
            if (!blob.size) throw new Error('导出文件为空')
            saveAs(blob, `${props.title}数据_${new Date().toISOString().slice(0, 10)}.xlsx`)
            ElMessage.success('导出完成')
        } catch (error) {
            console.warn(`[${props.title}] 导出失败`, error)
            ElMessage.error('导出失败，请稍后重试')
        } finally {
            exportLoading.value = false
        }
    }

    onMounted(loadData)
    onBeforeUnmount(() => {
        chart?.dispose()
        chart = undefined
    })
</script>

<style lang="scss">
    @use './waterSupplyPageTheme.scss';
</style>

<style scoped>
    .water-page {
        padding: 20px;
        background: #f5f7fa;
        min-height: calc(100vh - 84px)
    }

    .page-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px
    }

    .page-heading h2 {
        margin: 0 0 5px;
        font-size: 20px;
        color: #1f2937
    }

    .muted {
        font-size: 13px;
        color: #909399
    }

    .filter-card {
        margin-bottom: 16px
    }

    .filter-card :deep(.el-form-item) {
        margin-bottom: 0
    }

    .range-sep {
        margin: 0 8px;
        color: #909399
    }

    .page-error {
        margin-bottom: 16px
    }

    .metric-grid {
        display: grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 16px
    }

    .metric {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: #fff;
        border: 1px solid #ebeef5;
        padding: 16px 18px;
        min-height: 70px;
    }

    /* 图标大小与下边距，确保与文字分离 */
    .metric-icon {
        font-size: 28px;
        margin-bottom: 6px;
    }

    .metric span {
        display: block;
        color: #909399;
        font-size: 13px
    }

    .metric strong {
        font-size: 24px;
        line-height: 1.2;
        color: #1f2937
    }

    .metric small {
        margin-left: 5px;
        color: #909399
    }

    .metric .time {
        font-size: 16px
    }

    .danger {
        color: #e45656 !important
    }

    .table-card {
        min-height: 420px
    }

    .card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        margin-bottom: 14px
    }

    .table-card :deep(.el-pagination) {
        justify-content: flex-end;
        margin-top: 16px
    }

    .trend-body {
        min-height: 340px
    }

    .trend-chart {
        height: 300px;
        margin-bottom: 20px
    }

    .trend-body :deep(.el-empty) {
        margin-bottom: 20px
    }

    @media (max-width: 900px) {
        .metric-grid {
            grid-template-columns:repeat(2, minmax(0, 1fr))
        }

        .filter-card :deep(.el-form-item) {
            margin-bottom: 12px
        }
    }
</style>
