<template>
    <uni-card title="我的工作" margin="0px" padding="0px">
        <view style="height: 300px;">
        <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 { getWorkStat } from '@/api/project-center/work';
// #ifdef MP
const echarts = require('./static/echarts.min')
// #endif


const { mobile } = uni.getStorageSync('info_status')
const proxy = getCurrentInstance()?.proxy
const { $onLaunched } = proxy as any
const chartRef = ref()
const workStat = ref<{
    units: string[]
    name: string[]
    values: number[]
}>({
    units: [],
    name: [],
    values: []
})
const initData = async (data: any) => {
    await nextTick()
    if (chartRef.value) {
        const myChart = await chartRef.value?.init(echarts)
        myChart.setOption(data)
    }
}




const { chartOption } = useChartOption(() => {
    if (workStat.value.name.length === 0) {
        return {}
    }
    return {
        animation: false,
        grid: {
            left: 80,
            right: 20,
            top: 0,
            bottom: 30
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                formatter(value: number, idx: number) {
                    if (idx === 0) return String(value)
                    return `${Number(value)}`
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#E5E8EF'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: workStat.value.name,
            axisLabel: {
                show: true,
                color: '#4E5969'
            },
            axisTick: {
                show: true,
                length: 2,
                lineStyle: {
                    color: '#A9AEB8'
                },
                alignWithLabel: true
            },
            axisLine: {
                lineStyle: {
                    color: '#A9AEB8'
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            confine: true
        },
        // tooltip: {
        //   trigger: 'axis',
        //   formatter(params) {
        //     const [firstElement] = params as ToolTipFormatterParams[]
        //     return `<div>
        //           <p class="tooltip-title">${firstElement.axisValueLabel}</p>
        //           ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
        //         </div>`
        //   },
        //   className: 'echarts-tooltip-diy'
        // },
        series: [
            {
                data: workStat.value.values,
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    color: '#4086FF',
                    borderRadius: 4
                }
            }
        ]
    }
})

const getDataStat = async () => {
    await $onLaunched;
    if(!mobile){
        return
    }
    const { list } = await getWorkStat()
    list.map(item => {
        workStat.value.values.push(item.value)
        workStat.value.name.push(item.name)
        workStat.value.units.push(item.unit)
        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>

<style lang="scss" scoped></style>