<template>
    <global-page
        title="气象信息"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        auto
        :params="{ terminal: query.terminal }"
        :api="getTerminalWeatherListApi"
        :padding="24"
    >
        <template #default="{ item }">
            <template v-for="(option, index) in item.weatherList" :key="index">
                <view class="mocp-cell">
                    <view class="mocp-title">报文生成时间:{{ option.generateTime || '-' }}</view>
                    <up-cell-group>
                        <up-cell title="气象类型" :value="useGetDictByValue('wdm_alarmcategory', option.weatherType) || '-'"></up-cell>
                        <up-cell title="气象中文描述" :label="option.weatherDescribe || '-'"></up-cell>
                        <up-cell title="平均风速" :value="option.windfs || '-'"></up-cell>
                        <up-cell title="最大风速" :value="option.windzf || '-'"></up-cell>
                        <up-cell title="预计开始时间" :value="option.startTime || '-'"></up-cell>
                        <up-cell title="预计解除时间" :value="option.endTime || '-'"></up-cell>
                    </up-cell-group>
                </view>
            </template>
        </template>
    </global-page>
</template>

<script setup>
import { getTerminalWeatherListApi } from 'mocp/api/windDamageManagement'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'

const query = defineProps(['id'])
</script>
<style lang="scss" scoped>
.mocp-cell {
    background: #fff;
}
.mocp-title {
    color: $mocp-text-5;
    font-size: 24rpx;
    padding: 20rpx 0;
    background: $mocp-fill-1;
}
</style>
