<template>
    <uni-card title="项目分类统计" margin="0px" padding="0px">
        <view style="height: 500px;">
            <LEchart ref="chartRef" style="width: 100%;height: 100%;" 
            @touchstart="touchStart"
			@touchmove="touchMove"
			@touchend="touchEnd"
            />
        </view>
    </uni-card>
</template>

<script setup lang="ts">
import LEchart from '@/components/l-echart/l-echart.vue';
import { ref, watch, nextTick, onMounted } from 'vue'
import useChartOption from '@/hooks/chart-option'
import { getProjectCategoryStat } from '@/api/dashboard/project';
// #ifdef MP
const echarts = require('./static/echarts.min')
// #endif

// #ifndef MP
// import * as echarts from 'echarts'
// #endif



const proxy = getCurrentInstance()?.proxy
const { $onLaunched } = proxy as any
const chartRef = ref()
const { mobile } = uni.getStorageSync('info_status')

const categoryStat = ref<{
    totalCount: number
    workCount: number
    name: string[]
    count: number[]
    works: number[]
}>({
    totalCount: 0,
    workCount: 0,
    name: [],
    count: [],
    works: []
})

const initData = async (data: any) => {
    await nextTick()
    if (chartRef.value) {
        const myChart = await chartRef.value?.init(echarts)
        myChart.setOption(data)
    }
}




const { chartOption } = useChartOption(() => {
    if (categoryStat.value.name.length === 0) {
        return {}
    }
    return {
        animation: false,
        legend: {
            left: 'center',
            data: categoryStat.value.name,
            bottom: 10,
            icon: 'circle',
            itemWidth: 8,
            textStyle: {
                color: '#4E5969'
            },
            itemStyle: {
                borderWidth: 0
            }
        },
        tooltip: {
            show: true,
            trigger: 'item'
        },
        graphic: {
            elements: [
                {
                    type: 'text',
                    left: '45%',
                    top: '22%',
                    style: {
                        text: '项目数',
                        textAlign: 'center',
                        fill: '#4E5969',
                        fontSize: 14
                    }
                },
                {
                    type: 'text',
                    left: '45%',
                    top: '27%',
                    style: {
                        text: `${categoryStat.value.totalCount}个`,
                        textAlign: 'center',
                        fill: '#1D2129',
                        fontSize: 16,
                        fontWeight: 500
                    }
                },
                {
                    type: 'text',
                    left: '45%',
                    top: '62%',
                    style: {
                        text: '工时',
                        textAlign: 'center',
                        fill: '#4E5969',
                        fontSize: 14
                    }
                },
                {
                    type: 'text',
                    left: '45%',
                    top: '67%',
                    style: {
                        text: `${categoryStat.value.workCount}天`,
                        textAlign: 'center',
                        fill: '#1D2129',
                        fontSize: 16,
                        fontWeight: 500
                    }
                }
            ]
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '40%'],
                center: ['50%', '25%'],
                // radius: ['50%', '70%'],
                // center: ['25%', '50%'],
                // center: ['100%', '75%'],
                label: {
                    formatter: '{d}%',
                    fontSize: 14,
                    color: '#4E5969'
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                data: categoryStat.value.name.map((item, index) => {
                    console.log(item)
                    return {
                        name: item,
                        value: categoryStat.value.count[index]
                    }
                })
            },
            {
                type: 'pie',
                radius: ['50%', '40%'],
                center: ['50%', '65%'],
                // radius: ['50%', '70%'],
                // center: ['75%', '50%'],
                label: {
                    formatter: '{d}%',
                    fontSize: 14,
                    color: '#4E5969'
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                data: categoryStat.value.name.map((item, index) => {
                    return {
                        name: item,
                        value: categoryStat.value.works[index]
                    }
                })
            }
        ]
    }
})


const getDataStat = async () => {
    await $onLaunched
    console.log('mobile')
    if(!mobile){
        return
    }
    const { list } = await getProjectCategoryStat()
    list.map(item => {
        categoryStat.value.totalCount += item.project_count
        categoryStat.value.workCount += Number(item.total_work_days)
        categoryStat.value.count.push(item.project_count)
        categoryStat.value.works.push(Number(item.total_work_days))
        categoryStat.value.name.push(item.type_name)
        return item
    })
}

onMounted(() => {
    getDataStat()
})

watch(
    () => chartOption.value,
    () => {
        initData(chartOption.value)
    },
    {
        flush: 'post',
        deep: true
    }
)

const touchStart = (e: any) => {
    chartRef.value.touchStart(e)
}

const touchMove = (e: any) => {
    chartRef.value.touchMove(e)
}


const touchEnd = (e: any) => {
    chartRef.value.touchEnd(e)
}

</script>