<template>
    <view class="client-contact-info">
        <view class="contact-list">
            <ContactCard v-for="item in contactList" :key="item.id" :item="item" />
        </view>
        <view class="btn" @click="handleAddClientContact">
            <view>
                <TIcon name="icon-add-contact" color="#0E66FB" />
                <text>添加联系人</text>
            </view>
        </view>
    </view>
</template>

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

const { handleAddClientContact } = useClientCommon()

const contactList = ref([
    {
        id: 1,
        name: '李雷',
        sex: 1,
        role: '采购员',
        mobile: '18138952909',
        address: '广东省广州市增城区东进商城'
    },
    {
        id: 2,
        name: '韩梅梅',
        sex: 2,
        role: '采购员',
        mobile: '18138952909',
        address: '广东省广州市增城区东进商城'
    }
])
</script>

<style lang="scss" scoped>
.client-contact-info {
    @include flex-direction;
    height: 100%;
    .contact-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>
