<template>
    <div id="rose-chart">
        <div class="rose-chart-title">
            {{ props.roseZyjc.reportName }}
            {{ props.roseZyjc.overview }}
            {{ props.roseZyjc.unit }}
        </div>
        <dv-charts :option="config" />
    </div>
</template>
  
<script setup name='roseChart' lang="ts">
import { watch, nextTick, Ref, ref } from 'vue'

const props = defineProps({
    roseZyjc: {
        type: Object,
        default: {}
    }
})

interface dataInfo {
    x: string,
    y: number
}

interface configType {
    name: string,
    value: number
}

let config: Ref<object> = ref({})

watch(() => props.roseZyjc, () => {
    let sum = Number(props.roseZyjc.overview)

    if (props.roseZyjc.dataList) {
        let dd: Array<configType> = []
        let qt: configType = {} as any
        nextTick(() => {
            let qthj: number = 0
            props.roseZyjc.dataList.forEach((e: dataInfo, index: number) => {
                if (index > 10) {
                    qthj = qthj + e.y
                } else {
                    let de: configType = {} as any
                    de.name = e.x
                    de.value = e.y
                    dd.push(de)
                }
            })

            qt.name = '其他项目'
            qt.value = qthj
            dd.push(qt)

            let showData: Array<configType> = []
            let max = 0

            dd.forEach(item => {
                if (item.value >= max) {
                    max = item.value
                }
            })

            // 放大规则
            var number = Math.round(max * 0.5)

            showData = dd.map(item => {
                return {
                    value: number + item.value,
                    name: item.name
                }
            })

            let d = {
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        roseSort: false,
                        data: showData,
                        insideLabel: {
                            show: false
                        },
                        labelLine: {
                            normal: {
                                length: 5
                            }
                        },
                        outsideLabel: {
                            // formatter: '{name} {value} ({percent}%)',
                            formatter: function (param: configType) {
                                if(param.name === qt.name){
                                    return qt.name + ': ' + qt.value + props.roseZyjc.unit + ' 占' + ((qt.value / sum) * 100).toFixed(2) + '%'
                                } else {
                                    return param.name + ': ' + (param.value - number) + props.roseZyjc.unit + ' 占' + (((param.value - number) / sum) * 100).toFixed(2) + '%'
                                }
                            },
                            labelLineEndLength: 20,
                            style: {
                                fill: '#fff'
                            },
                            labelLineStyle: {
                                stroke: '#fff'
                            }
                        },
                        roseType: true
                    }
                ],
            }

            config.value = d
        })

    }

}, { deep: true, immediate: true })

</script>
  
<style lang="scss">
#rose-chart {
    width: 54%;
    height: 100%;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;

    .rose-chart-title {
        height: 50px;
        font-weight: bold;
        text-indent: 20px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    .dv-charts-container {
        height: calc(100% - 50px);
    }
}
</style>