<!--
 * @Author: micky
 * @Date: 2024-08-12 19:45:45
 * @LastEditors: micky
 * @LastEditTime: 2024-10-31 20:18:16
 * @FilePath: \chargingpile-uniapp\src\components\widgets\spareParts-list\spareParts-list.vue
-->
<template>
    <view class="spareParts-list overflow-auto">
        <view class="header">
            <text class="flex-1">配件名称</text>
            <text class="w-[23%] text-center" v-if="showPrice">单价（元）</text>
            <text class="w-[18%] text-center">数量</text>
            <text class="w-[23%] text-center" v-if="showPrice">金额（元）</text>
        </view>
        <template v-if="datas && datas?.length > 0">
            <view class="overflow-auto">
                <view class="data" v-for="(item, index) in datas" :key="index">
                    <text class="flex-1">{{ item.sparePartsName }}</text>
                    <text class="w-[23%] text-center text-error" v-if="showPrice">
                        ￥{{ item.unitPrice }}
                    </text>
                    <text class="w-[18%] text-center">{{ item.count }}</text>
                    <text class="w-[23%] text-center text-error" v-if="showPrice">
                        ￥{{ item.totalPrice }}
                    </text>
                </view>
            </view>
        </template>
        <view class="data" v-else>
            <text class="flex-1 text-center text-[#8b8d90]">暂无数据</text>
        </view>
    </view>
</template>

<script setup lang="ts">
withDefaults(
    defineProps<{
        datas: Array<any>
        showPrice: boolean
    }>(),
    {
        showPrice: true
    }
)
</script>
<style scoped lang="scss">
.spareParts-list {
    @apply border border-[#d6d6d6] rounded-md;
    .header,
    .data {
        @apply flex text-[28rpx] border-b border-[#d6d6d6];
        text {
            @apply pl-1;
        }
    }
    .data:last-of-type {
        @apply border-none;
    }
    .header text,
    .data text {
        @apply h-[80rpx] leading-[80rpx];
    }
}
</style>
