<template>
    <global-page title="航材" auto :localData="getMaterialsList">
        <template #default="{ item, index }">
            <up-collapse :value="[index]">
                <up-collapse-item :title="item.name" :name="index">
                    <view class="mocp-cell">
                        <up-cell-group>
                            <up-cell title="件号" :value="item.pn"></up-cell>
                            <up-cell title="名称" :value="item.name"></up-cell>
                            <up-cell title="属性" :value="getParamNameByValue('MaterialType', item.aviationAttribute)"></up-cell>
                            <up-cell title="需求数量" :value="item.quantity"></up-cell>
                            <up-cell title="是否有效">
                                <template #value>
                                    <global-text-status :value="item.isValid" dictkey="mocMaterial_isValid"></global-text-status>
                                </template>
                            </up-cell>
                            <up-cell title="备注" :value="item.remarks"></up-cell>
                        </up-cell-group>
                    </view>
                </up-collapse-item>
            </up-collapse>
        </template>
    </global-page>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import useMcoStore from 'mocp/store/mco'
import { getParamNameByValue } from 'mocp/hooks/use-params/useParams'

const mcoStore = useMcoStore()
const { getMaterialsList } = storeToRefs(mcoStore)
</script>
<style lang="scss" scoped>
.mocp-cell {
    background: #fff;
}
:deep(.u-collapse-item) {
    background: $mocp-fill-1;
    .u-cell__body {
        padding: 24rpx !important;
    }
    .u-cell__title {
        color: $mocp-text-5;
        font-size: 34rpx;
    }
    .u-collapse-item__content__text {
        padding: 0;
    }
}
</style>
