<template>
    <view class="px-[32rpx]">
        <template v-if="loading && !data.length">
            <view class="min-h-[200rpx] flex justify-center items-center">
                <u-loading-icon></u-loading-icon>
            </view>
        </template>
        <card v-for="(item, index) in data" :key="`unique_${index}`" :title="item.name">
            <template v-if="!loading && data.length > 0">
                <view class="flex bg-gray3 mx-[24rpx] mb-[24rpx]">
                    <view
                        v-for="(itemy, indey) in item.children"
                        :key="indey"
                        class="flex-1 flex flex-col gap-[12rpx] justify-center items-center py-[12rpx]"
                    >
                        <text class="text-muted">{{ itemy.label }}</text>
                        <text class="font-bold">{{ itemy.value }}</text>
                    </view>
                </view>
            </template>
        </card>
    </view>
</template>

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

interface IConvertedData {
    name: string
    children: Array<{ label: string; value: string }>
}
const data = ref<IConvertedData[]>([])
const loading = ref(false)
const fetchData = (payload: IForm) => {
    loading.value = true
    setTimeout(() => {
        data.value = [
            {
                name: '湛江团队',
                children: [
                    { label: '线索', value: '52个' },
                    { label: '成交客户', value: '52个' },
                    { label: '转化率', value: '15%' }
                ]
            },
            {
                name: '广州团队',
                children: [
                    { label: '线索', value: '52个' },
                    { label: '成交客户', value: '52个' },
                    { label: '转化率', value: '15%' }
                ]
            }
        ]
        loading.value = false
    }, 300)
}
defineExpose({
    fetchData
})
</script>
<style scoped></style>
