<template>
    <view class="client-device-info">
        <view class="device-list">
            <DeviceCard v-for="item in deviceList" :key="item.id" :item="item" />
        </view>
        <view class="btn" @click="handleAddClientDevice">
            <view>
                <TIcon name="icon-add-device" color="#0E66FB" :size="18" />
                <text>添加设备</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DeviceCard from './device-card.vue'
import { useClientCommon } from '@/pages/salesman/client/hooks'

const { handleAddClientDevice } = useClientCommon()
const deviceList = ref([
    { id: 1, status: 1 },
    { id: 2, status: 2 },
    { id: 3, status: 3 },
    { id: 4, status: 4 }
])
</script>

<style lang="scss" scoped>
.client-device-info {
    @include flex-direction;
    height: 100%;
    .device-list {
        flex: 1;
        overflow-y: scroll;
    }
    .btn {
        @include flex-center;
        height: 120rpx;
        margin-top: 32rpx;
        border-top: 1px solid $gray-3;
        background-color: $white-1;
        > view {
            @include flex-align;
            gap: 8rpx;
            color: $blue-1;
        }
    }
}
</style>
