<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-icon class="left-icon" icon="Vector" size="24" color="#DD4012"></global-icon>
                            <view class="txt">
                                {{ details.aviation }} {{ details.machineNumber }} {{ details.model }}
                            </view>
                        </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/fleet.scss';
</style>
