<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'
import { convertedSuccessApi } from '@/api/admin'

interface IConvertedData {
    name: string
    children: Array<{ label: string; value: string }>
}
const data = ref<IConvertedData[]>([])
const loading = ref(false)
const fetchData = async (payload: IForm) => {
    loading.value = true
    try {
        const result = await convertedSuccessApi(payload)
        console.log(result)
        data.value = result.map(item => {
            const { clientCount, clueCount, percentConversion } = item.leadToCustomerStatisticsVo
            return {
                name: item.organizationName,
                children: [
                    { label: '线索', value: clueCount ?? 0 + '个' },
                    { label: '成交客户', value: clientCount ?? 0 + '个' },
                    { label: '转化率', value: percentConversion }
                ]
            }
        })
    } catch (error) {}
    loading.value = false
}
defineExpose({
    fetchData
})
</script>
<style scoped></style>
