<template>
    <card className="mb-3">
        <view class="flex flex-col mb-[24rpx]" @click="handleCardClick">
            <view class="flex items-center p-[24rpx] gap-[24rpx]">
                <view
                    class="bg-primary rounded-full text-white w-[120rpx] h-[120rpx] flex items-center justify-center"
                >
                    张三
                </view>
                <view class="flex-1 flex flex-col gap-[12rpx]">
                    <text>张三</text>
                    <text class="text-muted">湛江团队-A组 . 招生老师</text>
                </view>
            </view>
            <view class="flex gap-[12rpx] flex-wrap">
                <view
                    class="w-[30%] flex justify-center items-center flex-col gap-[12rpx]"
                    v-for="(item, index) in data"
                    :key="`unique_${index}`"
                >
                    <text class="text-muted">{{ item.label }}</text>
                    <text class="font-bold text-[40rpx]">{{ item.value }}</text>
                </view>
            </view>
        </view>
    </card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import card from '../../card.vue'

const props = defineProps({
    item: {
        type: Object,
        default: () => {}
    }
})
const emit = defineEmits(['handleCardClick'])

const data = ref([
    { label: '转化中', value: 368 },
    { label: '已添加', value: 100 },
    { label: '异常待处理', value: 368 },
    { label: '成交客户', value: 368 },
    { label: '战败客户', value: 368 }
])
const handleCardClick = () => {
    emit('handleCardClick', 'recruitsale', props.item)
}
</script>
<style scoped></style>
