<template>
    <global-page :padding="24" title="机队状态网详情">
        <template v-if="details">
            <view class="details fleetDetails">
                <view class="details-header">
                    <view class="details-header-top">
                        <view class="left">
                            <custom-state :value="useGetDictByValue('wa_state', details.state)" :size="32" />
                        </view>
                        <view class="right">
                            <global-tag :type="useGetDictByValue('wa_isSuccessType', details.isSuccess)">
                                {{ useGetDictByValue('wa_isSuccess', details.isSuccess) }}
                            </global-tag>
                        </view>
                    </view>
                    <view class="details-header-bottom">
                        <view class="left">
                            <global-airline-image :code="details.aviation">
                                {{ details.aviation }} {{ details.machineNumber }} {{ details.model }}
                            </global-airline-image>
                        </view>
                    </view>
                </view>
                <view class="details-body fleetATA">
                    <view class="details-body-content ataCont">
                        <text>ATA章节：{{ details.ata }}</text>
                        <view class="fleetDescribe">故障描述：</view>
                        <view class="describeCont">{{ details.faultDescribe || '无' }}</view>
                    </view>
                </view>
                <view class="details-footer">
                    <view class="fleetDescribe">处理措施：</view>
                    <view class="describeCont">{{ details.handle || '无' }}</view>
                    <view class="footerData occurrenceData">发生日期：{{ timeStampFormat(details.sendingTime, { format: 'YYYY-MM-DD' }) }}</view>
                    <view class="footerData occurrenceData">填报时间：{{ timeStampFormat(details.creationTime, { format: 'YYYY-MM-DD' }) }}</view>
                </view>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import useFleetStore from 'mocp/store/fleet'
import { storeToRefs } from 'pinia'
import { timeStampFormat } from 'mocp/utils/tool'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'

const fleetStore = useFleetStore()
const { details } = storeToRefs(fleetStore)
</script>
<style lang="scss" scoped>
@import '../work-assignment/constants/details.scss';
@import './constants/inforDisclosure.scss';
</style>
