<template>
    <global-page :padding="24" title="AOG详情">
        <template v-if="details">
            <view class="details">
                <view class="details-header">
                    <view class="details-header-top">
                        <view class="left">
                            <custom-state :value="useGetDictByValue('aog_state', details.state)" :size="32"></custom-state>
                        </view>
                        <view class="right">
                            <text class="txt mocp-color-text-5">{{ details.aogNum }}</text>
                        </view>
                    </view>
                    <view class="details-header-footer">
                        <view class="left">
                            <text class="txt u-line-1" v-if="details.machineNumber">{{ details.machineNumber }}</text>
                            <text class="txt u-line-1" v-if="details.model">{{ details.model }}</text>
                            <text class="txt u-line-1" v-if="details.aviation">
                                {{ useGetDictByValue('', details.aviation, { data: getAirlineSelect() }) }}
                            </text>
                        </view>
                        <view class="right">
                            <text class="txt u-line-1" v-if="details.terminal">{{ details.terminal }}</text>
                        </view>
                    </view>
                </view>
                <view class="details-body">
                    <global-field label="发动机型号：" :value="workBench?.apuModel || '-'"></global-field>
                    <global-field label="APU型号：" :value="workBench?.engineModel || '-'"></global-field>
                </view>
                <view class="details-footer">
                    <global-icon icon="calendar" color="#1D2129"></global-icon>
                    <view class="txt">{{ timeStampFormat(workBench?.createdTime, { format: 'YYYY/MM/DD' }) }}</view>
                </view>
            </view>
            <global-card :showTitle="false">
                <view class="card-details">
                    <view class="card-details-item">
                        <view class="title">故障描述：</view>
                        <view class="msg">
                            {{ details.faultDesc || '无' }}
                        </view>
                    </view>
                    <view class="card-details-item" v-for="(item, index) in disposalPlan" :key="item.id">
                        <view class="title">{{ `处置方案${index + 1}` }}</view>
                        <view class="msg">
                            {{ item.planDesc || '无' }}
                        </view>
                    </view>
                </view>
            </global-card>
            <global-card title="航材" titleSuffix="查看物流" @handleTitleClick="goTo('/panel/aog/material-list', { materialType: 1 })">
                <global-text-status :value="aogStore.getAvStatus" dictkey="aog_status"></global-text-status>
            </global-card>
            <global-card title="工具" titleSuffix="查看物流" @handleTitleClick="goTo('/panel/aog/material-list', { materialType: 2 })">
                <global-text-status :value="aogStore.getToolStatus" dictkey="aog_status"></global-text-status>
            </global-card>
            <global-card title="人员" titleSuffix="查看行程" @handleTitleClick="goTo('/panel/aog/personal-list')">
                <global-text-status :value="aogStore.getPersonnelStatus" dictkey="aog_status"></global-text-status>
            </global-card>
            <global-card title="施工情况" @handleTitleClick="goTo('/panel/aog/construction-list')">
                <global-text-status :value="aogStore.getBbStatus" dictkey="aog_bBstatus"></global-text-status>
            </global-card>
            <global-card title="其他特殊保障" @handleTitleClick="goTo('/panel/aog/other-list')">
                <global-text-status :value="aogStore.getOtherStatus" dictkey="aog_status"></global-text-status>
            </global-card>
        </template>
    </global-page>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { timeStampFormat } from 'mocp/utils/tool'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import useAogStore from 'mocp/store/aog'
import { onLoad } from '@dcloudio/uni-app'
import { nextTick } from 'vue'
import { getAirlineSelect } from 'mocp/utils/permission'

const aogStore = useAogStore()
const { getWorkBenchList, getAogDisposalPlan, getAogMaterialList, getAogSupBase, getAogConstruction, getAogOtherSup } = aogStore
const { details, disposalPlan, workBench, materialType } = storeToRefs(aogStore)
const query = defineProps(['workbenchId'])
const workbenchId = query.workbenchId
onLoad(() => {
    nextTick(async () => {
        uni.showLoading({
            title: '加载中',
            mask: true
        })
        await Promise.all([
            getWorkBenchList(workbenchId),
            getAogDisposalPlan(workbenchId),
            getAogMaterialList(workbenchId, 1),
            getAogMaterialList(workbenchId, 2),
            getAogSupBase(workbenchId),
            getAogConstruction(workbenchId),
            getAogOtherSup(workbenchId)
        ])
        uni.hideLoading()
    })
})
const goTo = (url, params) => {
    if (params) {
        aogStore.setState('materialType', params.materialType)
        uni.$mocpJump.navigateTo(url, params)
    } else {
        uni.$mocpJump.navigateTo(url)
    }
}
uni.$on('updateMaterialData', () => {
    getAogMaterialList(workbenchId, materialType.value)
})
uni.$on('updateBbData', () => {
    getAogConstruction(workbenchId)
})
</script>
<style lang="scss" scoped>
@import './constants/details.scss';
</style>
