<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>
                        <template v-if="details?.relevantFile">
                            <view class="fleetDescribe">相关参考文档：</view>
                            <view class="describeCont">
                                <global-upload
                                    :fileList="details.relevantFile"
                                    :showUpload="false" />
                            </view>
                        </template>
                    </view>
                </view>

                <view class="details-body fleetATA">
                    <view class="details-body-content ataCont">
                        <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>

                <view class="details-footer">
                    <view class="fleetDescribe">处理措施：</view>
                    <view class="describeCont">{{ details.handle || '无' }}</view>
                    <template v-if="details?.handleFile">
                        <view class="fleetDescribe">附件：</view>
                        <view class="describeCont">
                            <global-upload
                                :fileList="details.handleFile"
                                :showUpload="false" />
                        </view>
                    </template>

                    <view class="fleetDescribe">备注：</view>
                    <view class="describeCont">{{ details.remarks || '无' }}</view>
                    <template v-if="details?.remarksFile">
                        <view class="fleetDescribe">备注附件：</view>
                        <view class="describeCont">
                            <global-upload
                                :fileList="details.remarksFile"
                                :showUpload="false" />
                        </view>
                    </template>
                </view>

                <view class="details-footer">
                    <view class="fleetDescribe">空地支援：</view>
                    <view class="describeCont">{{ details.groundSupport || '无' }}</view>
                    <template v-if="details?.supportFile">
                        <view class="fleetDescribe">空地支援附件：</view>
                        <view class="describeCont">
                            <global-upload
                                :fileList="details.supportFile"
                                :showUpload="false" />
                        </view>
                    </template>
                </view>

                <view class="details-footer">
                    <view class="fleetDescribe">运行限制：</view>
                    <view class="describeCont">{{ details.runLimitValue || '无' }}</view>
                    <view class="fleetDescribe">限制类型：</view>
                    <view class="describeCont">{{ details.limitSectionValue || '无' }}</view>
                    <view class="fleetDescribe">时间范围：</view>
                    <view class="describeCont">
                        {{ timeStampFormat(details.startTime, {format: 'YYYY-MM-DD'}) }}
                        至
                        {{ timeStampFormat(details.endTime, {format: 'YYYY-MM-DD'}) }}
                    </view>
                    <view class="fleetDescribe">限制类型备注：</view>
                    <view class="describeCont">{{ details.limitRemarks || '无' }}</view>
                </view>


            </view>
        </template>
    </global-page>
</template>

<script setup>
import { ref } from 'vue'
import useFleetStore from 'mocp/store/fleet'
import { storeToRefs } from 'pinia'
import { timeStampFormat } from 'mocp/utils/tool'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { getFleetDetailApi } from 'mocp/api/fleet'
import { onLoad } from '@dcloudio/uni-app'
import { fleetMapper, limitSectionList } from 'mocp/utils/getFlightList'


const fleetStore = useFleetStore()
const {detailsId} = storeToRefs(fleetStore)

const details = ref({})
onLoad(() => {
    getFleetDetailList()
})

const getFleetDetailList = async () => {
    let res = await getFleetDetailApi({id: detailsId.value})
    if (res.code == '200') {
        details.value = res?.data
        if (details.value.runLimit != '') details.value.runLimitValue = fleetMapper[details.value.runLimit]
        if (details.value.limitSection != '') details.value.limitSectionValue = limitSectionList[details.value.limitSection]
    }
    console.log('details.value', details.value)
}
</script>
<style lang="scss" scoped>
@import '../work-assignment/constants/details.scss';
@import './constants/fleet.scss';
</style>
