<template>
    <global-page :padding="24" title="MCO详情">
        <template v-if="details">
            <view class="details">
                <view class="details-header">
                    <view class="details-header-top">
                        <view class="top">
                            <global-tag type="primary" class="txt">{{ getParamNameByValue('GuaranteeStage', details.guaranteeStage) }}</global-tag>
                            <global-tag type="success" class="txt">{{ getParamNameByValue('MajorCategory', details.majorCategory) }}</global-tag>
                            <global-tag type="info" class="txt">{{ getParamNameByValue('McoCurrentState', details.state) }}</global-tag>
                        </view>
                        <view class="center">
                            <text class="txt mocp-color-text-5">{{ details.mcoNumber || '-' }}</text>
                        </view>
                        <view class="bottom">
                            <text class="txt" v-if="details.isRsc == '1'">涉及RSC串件</text>
                            <text class="txt" v-if="details.testRun == '1'">试车</text>
                            <text class="txt" v-if="details.airStop == '1'">防空停</text>
                            <text class="txt" v-if="details.inspect == '1'">必检</text>
                        </view>
                    </view>
                    <view class="details-header-footer">
                        <view class="left">
                            <global-airline-image :code="details.aviation" :width="30" :height="30"></global-airline-image>
                            <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">
                    <view class="details-body-row">
                        <global-field label="发动机型号" :value="details.engineModel || '-'"></global-field>
                        <global-field label="工作等级：" :value="getParamNameByValue('WorkGrade', details.workGrade) || '-'"></global-field>
                    </view>
                    <view class="details-body-row">
                        <global-field label="ATA章节：" :value="details.ata || '-'"></global-field>
                        <global-field label="故障代码：" :value="details.faultCode || '-'"></global-field>
                    </view>
                    <view class="details-body-row">
                        <global-field label="故障现象标签：" :value="details.faultLabel || '-'"></global-field>
                    </view>
                </view>
                <view class="details-footer">
                    <global-icon icon="calendar" color="#1D2129"></global-icon>
                    <view class="txt">{{ timeStampFormat(details.executionDate, { 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.faultDescription || '无' }}
                        </view>
                    </view>
                </view>
            </global-card>
            <global-card :title="`步骤${index + 1}`" v-for="(item, index) in getStepList" :key="item.id" @handleTitleClick="goStepDetails(index)">
                {{ item.stepContent || '无' }}
            </global-card>
            <global-card
                title="整体反馈"
                :showContent="false"
                v-if="!['1', '2'].includes(details.state)"
                @handleTitleClick="goFeedBack(1)"
            ></global-card>
            <global-card
                title="额外反馈"
                :showContent="false"
                v-if="!['1', '2'].includes(details.state)"
                @handleTitleClick="goFeedBack(2)"
            ></global-card>
            <global-card title="航材" titleSuffix="查看详情" :showContent="false" @handleTitleClick="goTo('/panel/mco/materials-list')"></global-card>
            <global-card title="工具" titleSuffix="查看详情" :showContent="false" @handleTitleClick="goTo('/panel/mco/tools-list')"></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 useMcoStore from 'mocp/store/mco'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { getParamNameByValue } from 'mocp/hooks/use-params/useParams'
import { getAirlineSelect } from 'mocp/utils/permission'

const query = defineProps(['id'])
const mcoStore = useMcoStore()
const { details, getStepList } = storeToRefs(mcoStore)
onLoad(() => {
    mcoStore.setState('id', query.id)
    mcoStore.getMcoDetails()
})
//步骤反馈详情
const goStepDetails = (index) => {
    uni.$mocpJump.navigateTo('/panel/mco/step-back').then(() => {
        mcoStore.setState('stepIndex', index)
    })
}
const goTo = (url, params) => {
    uni.$mocpJump.navigateTo(url, params)
}
//反馈详情
const goFeedBack = (feedBackType) => {
    uni.$mocpJump.navigateTo('/panel/mco/feed-back').then(() => {
        mcoStore.setState('feedBackType', feedBackType)
    })
}
uni.$on('updateDetails', () => {
    mcoStore.getMcoDetails()
})
onUnload(() => {
    uni.$off('updateDetails')
})
</script>
<style lang="scss" scoped>
@import './constants/details.scss';
</style>
