<template>
    <global-page :padding="24" title="品质分析详情">
        <template v-if="details">
            <view class="mocp-cell">
                <up-cell-group>
                    <up-cell title="发起时间" :value="timeStampFormat(details.proposedTime, { format: 'YYYY/MM/DD HH:mm' }) || '-'" />
                    <up-cell title="机号" :value="details.ac || '-'" />
                    <up-cell title="机型" :value="details.acType || '-'" />
                    <up-cell title="航司" :value="details.acOwn || '-'" />
                    <up-cell title="航站" :value="baseStore.getTerminalObject[details.acTerminal] || '-'" />
                    <up-cell title="提出人" :value="details.proposer || '-'" />
                    <up-cell title="发起席位" :value="baseStore.getSeat(details.seat)" />
                    <up-cell title="调查等级" :value="useGetDictByValue('qa_surveyLevel', details.surveyLevel) || '-'" />
                    <up-cell title="标题" :label="details.title || '无'" />
                </up-cell-group>
            </view>
            <view class="mocp-cell">
                <up-collapse>
                    <up-collapse-item title="事件简述" name="1">
                        <view class="mocp-cell">
                            <up-cell-group>
                                <up-cell title="内容" :label="details.eventMsg || '-'" />
                                <up-cell title="相关附件">
                                    <template #label>
                                        <view style="margin-top: 16rpx">
                                            <global-upload :fileList="details.files" :showUpload="false"></global-upload>
                                        </view>
                                    </template>
                                </up-cell>
                                <up-cell title="事件分类" :value="getEventclass" />
                            </up-cell-group>
                        </view>
                    </up-collapse-item>
                    <view class="mocp-title">
                        故障历史
                        <global-button type="text" @tap="navigateTo('/panel/qualityAnalysis/historicalFault')">点击查看</global-button>
                    </view>
                    <up-collapse-item title="手册标准" name="2" v-if="details.manualList?.length">
                        <view class="mocp-cell">
                            <up-cell-group>
                                <template v-for="(item, index) in details.manualList" :key="index">
                                    <up-cell title="内容" :label="item.content || '-'" />
                                    <up-cell title="相关附件">
                                        <template #label>
                                            <view style="margin-top: 16rpx">
                                                <global-upload :fileList="item.files" :showUpload="false"></global-upload>
                                            </view>
                                        </template>
                                    </up-cell>
                                </template>
                            </up-cell-group>
                        </view>
                    </up-collapse-item>
                    <up-collapse-item title="处置经过" name="3">
                        <view class="mocp-cell">
                            <up-cell-group>
                                <up-cell title="内容" :label="details.dispose?.content || '-'" />
                                <up-cell title="相关附件">
                                    <template #label>
                                        <view style="margin-top: 16rpx">
                                            <global-upload :fileList="details.dispose?.files" :showUpload="false"></global-upload>
                                        </view>
                                    </template>
                                </up-cell>
                            </up-cell-group>
                        </view>
                    </up-collapse-item>
                    <up-collapse-item title="经济损失分析" name="4">
                        <view class="mocp-cell">
                            <up-cell-group>
                                <up-cell title="不正常航班费用">
                                    <template #value>{{ details.economy?.abnormal || 0 }}元</template>
                                </up-cell>
                                <up-cell title="人员AOG差旅费用">
                                    <template #value>{{ details.economy?.travel || 0 }}元</template>
                                </up-cell>
                                <up-cell title="外委费用">
                                    <template #value>{{ details.economy?.outsourcing || 0 }}元</template>
                                </up-cell>
                                <up-cell title="航材保障费用">
                                    <template #value>{{ details.economy?.material || 0 }}元</template>
                                </up-cell>
                                <up-cell title="工具设备借用费用">
                                    <template #value>{{ details.economy?.equipment || 0 }}元</template>
                                </up-cell>
                                <up-cell title="其他">
                                    <template #value>{{ details.economy?.others || 0 }}元</template>
                                </up-cell>
                                <up-cell title="合计">
                                    <template #value>
                                        {{
                                            (details.economy?.abnormal || 0) * 1 +
                                            (details.economy?.travel || 0) * 1 +
                                            (details.economy?.outsourcing || 0) * 1 +
                                            (details.economy?.material || 0) * 1 +
                                            (details.economy?.equipment || 0) * 1 +
                                            (details.economy?.others || 0) * 1
                                        }}元
                                    </template>
                                </up-cell>
                            </up-cell-group>
                        </view>
                    </up-collapse-item>
                    <template v-for="(item, index) in details.elementList" :key="index">
                        <up-collapse-item :title="item.title || '-'" :name="item.id">
                            <view class="mocp-cell">
                                <up-cell-group>
                                    <up-cell title="内容" :label="item.content || '-'" />
                                    <up-cell title="相关附件">
                                        <template #label>
                                            <view style="margin-top: 16rpx">
                                                <global-upload :fileList="item.files" :showUpload="false"></global-upload>
                                            </view>
                                        </template>
                                    </up-cell>
                                    <up-cell title="填报人" :value="item.uname || '-'" />
                                    <up-cell title="填报时间" :value="timeStampFormat(item.time) || '-'" />
                                </up-cell-group>
                            </view>
                        </up-collapse-item>
                    </template>
                    <view class="mocp-title">
                        布置工作闭环要求
                        <global-button type="text" @tap="navigateTo('/panel/qualityAnalysis/arrangeWorkList')">点击查看</global-button>
                    </view>
                    <view class="mocp-title">
                        品质跟踪闭环要求
                        <global-button type="text" @tap="navigateTo('/panel/qualityAnalysis/qualityTraceList')">点击查看</global-button>
                    </view>
                </up-collapse>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import useBaseStore from 'mocp/store/base'
import { timeStampFormat } from 'mocp/utils/tool'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { onLoad } from '@dcloudio/uni-app'
import { computed } from 'vue'
import { navigateTo } from 'mocp/utils/jump'
import useQualityAnalysisStore from 'mocp/store/qualityAnalysis'

const query = defineProps(['workbenchId'])
const baseStore = useBaseStore()
const qualityAnalysisStore = useQualityAnalysisStore()
onLoad(async () => {
    qualityAnalysisStore.setState('workbenchId', query.workbenchId)
    uni.showLoading({
        title: '加载中...',
        mask: true
    })
    await qualityAnalysisStore.getQaData2()
    await qualityAnalysisStore.getEnetOrgTree()
    uni.hideLoading()
})
const { details } = storeToRefs(qualityAnalysisStore)
//获取事件分类
const getEventclass = computed(() => {
    return (
        details.value?.eventclassList
            .map((item) => {
                return item.eventclass2 || item.eventclass1
            })
            .join(',') || '-'
    )
})
//获取默认展开项
const getCollapseValue = computed(() => {
    const value = ['1', '2', '3', '4']
    details.value?.elementList.forEach((element) => {
        value.push(element.id)
    })
    return value
})
</script>
<style lang="scss" scoped>
.mocp-cell {
    background: #fff;
    margin-bottom: 16rpx;
}
.mocp-title {
    padding: 12rpx 32rpx 12rpx 32rpx;
    background-color: $mocp-fill-1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mocp-subTitle {
    padding: 24rpx 32rpx 0 32rpx;
    font-weight: bold;
}
:deep(.u-collapse-item) {
    .u-cell {
        background: $mocp-fill-1;
    }
    .u-collapse-item__content {
        .u-cell {
            background: #fff;
        }
    }
    .u-collapse-item__content__text {
        padding: 0;
    }
    .u-cell__title {
        color: $mocp-text-5;
    }
}
</style>
