<template>
    <view class="list" :style="wrapperStyle">
        <view class="part" v-for="item in list" :key="item.id">
            <view class="brand">
                <view class="left">
                    <text class="brand-name">品牌</text>
                    <text>设备名称</text>
                </view>
                <text class="right">* 1</text>
            </view>
            <view class="extract">
                <view>
                    <text class="label">规格型号</text>
                    <text>xxx</text>
                </view>
                <view>
                    <text class="label">功率</text>
                    <text>xxx</text>
                </view>
            </view>
        </view>
    </view>
    <view v-if="showExpanded" class="expand" @click="handleExpanded">
        <text>{{ parseText }}</text>
        <TIcon :name="parseIcon" color="#7C7E82" />
    </view>
</template>

<script setup lang="ts">
import { useExpanded } from '@/hooks/useLockFn'
import { PropType, computed } from 'vue'

interface IQuoteCard {
    id: number
}
const props = defineProps({
    list: {
        type: Array as PropType<IQuoteCard[]>,
        default: () => []
    }
})
const { expanded, parseText, parseIcon, wrapperStyle } = useExpanded(210)

const showExpanded = computed(() => props.list.length > 3)

const handleExpanded = () => {
    expanded.value = !expanded.value
}
</script>

<style lang="scss" scoped>
.list {
    @include flex-direction;
    gap: 12rpx;
    margin-top: 16rpx;
    .part {
        @include flex-direction;
        gap: 20rpx;
        padding: 24rpx 20rpx;
        background-color: $gray-1;
        border-radius: 12rpx;
        .brand {
            @include flex-justify(space-between);
            font-size: 28rpx;
            .left {
                @include flex-align;
                gap: 16rpx;

                .brand-name {
                    padding: 4rpx 20rpx;
                    border: 1px solid $blue-1;
                    color: $blue-1;
                    border-radius: 8rpx;
                    font-size: 28rpx;
                }
            }
            .right {
                color: $gray-2;
                color: 28rpx;
            }
        }
        .extract {
            @include flex-direction;
            gap: 12rpx;
            color: $gray-2;
            font-size: 28rpx;
            > view {
                display: flex;
                .label {
                    width: 160rpx;
                }
            }
        }
    }
}
.expand {
    @include flex-center;
    gap: 8rpx;
    margin-top: 16rpx;
    color: $gray-2;
    font-size: 28rpx;
}
</style>
