<!--
 * @Author: micky
 * @Date: 2024-09-08 18:35:57
 * @LastEditors: micky
 * @LastEditTime: 2024-10-27 18:59:17
 * @FilePath: \chargingpile-uniapp\src\components\widgets\spareParts-info\spareParts-info.vue
-->
<template>
    <view class="spareParts-info">
        <view class="title">
            <text class="sub-title" :class="titleClass">部件明细</text>
            <slot name="right"></slot>
        </view>
        <view class="list" v-if="sparePartList.length > 0">
            <view class="item" v-for="(item, index) in sparePartList" :key="item.id">
                <view class="field">
                    <view class="field-item">
                        <text class="label">部件编码：</text>
                        <text>{{ item.partCode }}</text>
                    </view>
                    <template v-if="showIcon">
                        <view v-if="iconName === 'icon-clear'" @click.stop="iconClick(index)">
                            <TIcon :name="iconName" :color="iconColor" />
                        </view>
                        <view v-if="iconName === 'icon-selected' && item.selected">
                            <TIcon :name="iconName" :color="iconColor" />
                        </view>
                    </template>
                </view>
                <view class="field border-t border-[#f1f1f1]">
                    <view class="field-item flex items-center">
                        <text class="label">部件名称：</text>
                        <u-input
                            border="none"
                            placeholder="请输入部件名称"
                            v-model="item.partName"
                            v-if="nameInput"
                        ></u-input>
                        <text v-else>{{ item.partName || '无' }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="empty" v-else>
            <TIcon name="icon-empty" :size="24" color="#7C7E82" />
            <text>暂无数据</text>
        </view>
    </view>
</template>

<script setup lang="ts">
interface ISparePart {
    id: number
    partCode: string
    selected?: boolean
    partName: string
}
const props = withDefaults(
    defineProps<{
        sparePartList: ISparePart[]
        showIcon?: boolean
        iconName?: string
        iconColor?: string
        titleClass?: string
        nameInput?: boolean
    }>(),
    {
        sparePartList: () => [],
        showIcon: false,
        iconName: 'icon-clear',
        iconColor: '#D8D8D8',
        nameInput: false
    }
)

const emit = defineEmits(['iconClick'])
const iconClick = (index: number) => {
    const { showIcon, iconName } = props
    if (showIcon && iconName === 'icon-clear') {
        emit('iconClick', index)
    }
}
</script>

<style lang="scss" scoped>
.spareParts-info {
    padding: 24rpx;
    border-radius: 16rpx;
    background: $white-1;
    .title {
        @apply flex justify-between items-center;
    }
    .list {
        @apply pt-[24rpx] flex flex-col gap-[20rpx];
        .item {
            @apply px-[16rpx];
            background-color: $gray-1;
            border-radius: 12rpx;
            .field {
                @apply flex items-center h-[72rpx];
                .field-item {
                    @apply flex-1;
                    font-size: 30rpx;
                    .label {
                        color: $gray-2;
                    }
                }
            }
        }
    }
    .empty {
        color: $gray-2;
        text-align: center;
        margin-top: 20rpx;
        > text {
            @apply text-[28rpx];
        }
    }
}
</style>
