<template>
    <global-page
        :title="getTitle"
        showFooterBtn
        @handleFooterClick="handleFooterClick"
        :footerBtnText="getMaterialDetails?.actualArrivalTime ? '取消到位' : '到位'"
    >
        <view class="mocp-cell">
            <up-cell-group v-if="getMaterialDetails">
                <up-cell title="件号" :value="getMaterialDetails.pn"></up-cell>
                <up-cell title="名称" :value="getMaterialDetails.name"></up-cell>
                <up-cell title="需求数量" :value="getMaterialDetails.quantity"></up-cell>
                <up-cell title="属性" :value="getMaterialDetails.aviationAttribute === '0' ? '周转件' : '消耗件'"></up-cell>
                <up-cell title="备注" :value="getMaterialDetails.remake"></up-cell>
                <up-cell title="需求提出时间" :value="getMaterialDetails.proposeDate || '-'"></up-cell>
                <up-cell title="预计到位时间" :value="getMaterialDetails.arrivalTime || '-'"></up-cell>
                <up-cell title="总库存" :value="getMaterialDetails.totalInventory"></up-cell>
                <up-cell title="实际到位时间" :value="getMaterialDetails.actualArrivalTime || '-'"></up-cell>
            </up-cell-group>
        </view>
    </global-page>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import useAogStore from 'mocp/store/aog'
import { updateAogMaterialApi } from 'mocp/api/aog'
import { computed } from 'vue'

const aogStore = useAogStore()
const { getMaterialDetails, materialType } = storeToRefs(aogStore)
const handleFooterClick = async () => {
    const params = {
        id: getMaterialDetails.value.id,
        actualArrivalTime: getMaterialDetails.value.actualArrivalTime ? 0 : Date.now()
    }
    const res = await updateAogMaterialApi(params, { loading: true })
    if (res.code == 200) {
        uni.$mocpJump.navigateBack()
        uni.$mocpMessage.success(res.message)
        uni.$emit('updateMaterialData')
    } else {
        uni.$mocpMessage.error(res.message)
    }
}
const getTitle = computed(() => {
    if (materialType.value == 1) {
        return '航材进展列表详情'
    } else {
        return '工具进展列表详情'
    }
})
</script>
<style lang="scss" scoped>
.mocp-cell {
    background: #fff;
}
</style>
