<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>
                        <u-line-progress
                            :percentage="item.value"
                            activeColor="#5783FE"
                            shape="square"
                        ></u-line-progress>
                    </view>
                </view>
            </template>
        </card>
    </view>
</template>

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

interface ICluseStatus {
    label: string
    value: number
}
const data = ref<ICluseStatus[]>([])
const loading = ref(false)
const fetchData = () => {
    loading.value = true
    setTimeout(() => {
        data.value = [
            { label: '待领取', value: 28 },
            { label: '转化中', value: 12 },
            { label: '已添加', value: 53 },
            { label: '异常待处理', value: 56 },
            { label: '已成交', value: 12 },
            { label: '已战败', value: 100 }
        ]
        loading.value = false
    })
}
defineExpose({
    fetchData
})
</script>
<style scoped></style>
