<template>
    <view class="px-[32rpx]">
        <card title="线索转化情况分析">
            <template v-if="loading && !data.length">
                <view class="min-h-[200rpx] flex justify-center items-center">
                    <u-loading-icon></u-loading-icon>
                </view>
            </template>
            <template v-if="!loading && data.length > 0">
                <view class="px-[32rpx]">
                    <view
                        class="flex flex-col gap-[16rpx] mb-[24rpx]"
                        v-for="(item, index) in data"
                        :key="`unique_${index}`"
                    >
                        <text class="text-gray5">{{ item.label }}</text>
                        <view class="flex items-center gap-[12rpx]">
                            <view class="flex-1">
                                <u-line-progress
                                    :percentage="item.value"
                                    activeColor="#5783FE"
                                    shape="square"
                                    :showText="false"
                                ></u-line-progress>
                            </view>
                            <text class="min-w-[88rpx]">{{ item.value + '%' }}</text>
                        </view>
                    </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 { clueStatusApi } from '@/api/admin'

interface ICluseStatus {
    label: string
    value: number
}
const data = ref<ICluseStatus[]>([])
const loading = ref(false)
const dataMap: Record<string, string> = {
    unclaimedCount: '待领取',
    conversionCount: '转化中',
    addedCount: '已添加',
    abnormalCount: '异常待处理',
    tradedCount: '已成交',
    failCount: '已战败'
}
const fetchData = async (payload: IForm) => {
    loading.value = true
    try {
        const result = await clueStatusApi(payload)
        data.value = Object.keys(dataMap).map(item => {
            return {
                label: dataMap[item],
                value: result[item] * 100 || 0
            }
        })
        console.log(data.value)

        loading.value = false
    } catch (error) {}
}
defineExpose({
    fetchData
})
</script>
<style scoped></style>
