<template>
    <view class="list" :style="parseStyle">
        <view class="item" v-for="item in data" :key="item.id">
            <view class="brand">品牌</view>
            <view class="select-device">
                <view class="left">
                    <text>设备名称</text>
                    <view class="extract">
                        <text>规格型号</text>
                        <text>功率</text>
                    </view>
                </view>
                <view class="right">
                    <view class="remove">移除</view>
                    <view class="count">
                        <text>数量</text>
                        <u-number-box :buttonSize="24"></u-number-box>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    expand: {
        type: Boolean,
        default: false
    }
})
const parseStyle = computed(() => {
    return {
        height: props.expand ? 'auto' : '618rpx',
        overflow: props.expand ? 'auto' : 'hidden'
    }
})
</script>

<style lang="scss" scoped>
.list {
    .item {
        padding: 24rpx 32rpx;
        border-bottom: 1px solid $gray-3;
        &:last-child {
            border-bottom: none;
        }
        .select-device {
            @include flex-justify;
            .left {
                @include flex-direction;
                gap: 16rpx;
                margin-top: 14rpx;
                .extract {
                    display: flex;
                    gap: 24rpx;
                    font-size: 28rpx;
                    color: $gray-2;
                }
            }
            .right {
                @include flex-direction;
                gap: 16rpx;
                margin-top: 14rpx;
                .remove {
                    text-align: right;
                    color: $blue-1;
                    font-size: 28rpx;
                }
                .count {
                    @include flex-align;
                    gap: 24rpx;
                    font-size: 28rpx;
                    color: $gray-2;
                }
            }
        }
    }
}
</style>
