<!--
 * @Author: micky
 * @Date: 2024-10-06 10:23:58
 * @LastEditors: micky
 * @LastEditTime: 2024-10-17 11:02:10
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\repair\components\replace-parts-readonly.vue
-->
<template>
    <view class="replace-list">
        <view v-for="(item, index) in itemList" :key="index">
            <view class="title">
                <text>更换配件明细（{{ index + 1 }}）</text>
            </view>
            <view class="design-field" :style="fieldStyle">
                <text class="field">维修主板</text>
                <view class="text-[#8f8f90] text-lg">
                    <text>{{ item.repairMotherboard }}</text>
                </view>
            </view>
            <view class="design-field" :style="fieldStyle">
                <text class="field">物料位号</text>
                <view class="text-[#8f8f90] text-lg">
                    <text>{{ item.materialPositionNumber }}</text>
                </view>
            </view>
            <view class="design-field" :style="fieldStyle">
                <text class="field">配件名称</text>
                <view class="text-[#8f8f90] text-lg">
                    <text>{{ item.sparePartsName }}</text>
                </view>
            </view>
            <view class="design-field" :style="fieldStyle">
                <text class="field">配件编码</text>
                <view class="text-[#8f8f90] text-lg">
                    <text>{{ item.sparePartsCode }}</text>
                </view>
            </view>
            <view class="design-field" :style="fieldStyle">
                <text class="field">型号规格</text>
                <view class="text-[#8f8f90] text-lg">
                    <text>{{ item.specificationsModel }}</text>
                </view>
            </view>
            <view class="design-field !border-none" :style="fieldStyle">
                <text class="field">使用数量</text>
                <view class="text-[#8f8f90] text-lg">
                    <text>{{ item.useNumber }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
defineProps<{
    itemList: any[]
}>()

const fieldStyle = { background: '#fafafe', padding: '18rpx 20rpx', color: '#3D3D3D' }
</script>
<style scoped lang="scss">
.replace-list {
    .title {
        @apply bg-[#F2F3F7] px-3 py-2 flex justify-between text-gray2;
    }
}
.design-field {
    @apply flex justify-between;
    border-bottom: 1px solid $gray-3;
}
</style>
