<template>
    <div class="person_box">
        <div class="flex_person">
            <div ref="chartAccessLeft" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="flex_person">
            <div ref="chartAccessRight" style="width: 100%;height: 100%;"></div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const chartAccessLeft = ref(null);
const chartAccessRight = ref(null);
let chartLeft = null;
let chartRight = null;
const initAccess = (value, type) => {
    // const datas = {
    //     value: 63.5,
    //     text: "出人员"
    // }
    const datas = value
    if (!chartLeft) {
        chartLeft = echarts.init(chartAccessLeft.value);
    }
    if (!chartRight) {
        chartRight = echarts.init(chartAccessRight.value);
    }
    let option = {
        series: [
            /*仪表盘图，做中间刻度线*/
            {
                type: 'gauge',
                name: '',
                radius: '86%',
                startAngle: '0',
                endAngle: '-359.99',
                center: ['50%', '50%'],
                splitNumber: '80',
                pointer: {
                    show: false
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 20,
                        opacity: 0
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    length: 7,
                    lineStyle: {
                        color: {
                            type: 'linear',
                            colorStops: [{
                                offset: 0, color: 'rgba(0, 141, 255, 0.32)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(0, 141, 255, 0.32)' // 100% 处的颜色
                            }],
                        },
                        width: 2,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    show: false
                }
            },
            /*内心原型图，展示整体数据概览*/
            {
                name: 'pie',
                type: 'pie',
                roundCap: true,
                clockWise: true,
                startAngle: 260,
                labelLine: {
                    show: false
                },
                radius: ['60%', '63%'],
                hoverAnimation: false,
                center: ['50%', '50%'],
                data: [
                    {
                        value: datas.value,
                        label: {
                            normal: {
                                formatter: '{d}{cell|%}\n{text|     ' + datas.text + '}',
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'normal',
                                    color: '#6FDCFF',
                                    lineHeight: 14,
                                    rich: {
                                        cell: {
                                            fontSize: '14',
                                            fontWeight: 'normal',
                                            color: '#6FDCFF',
                                            padding: [0, 0, 0, 5]
                                        },
                                        text: {
                                            fontSize: 12,
                                            fontFamily: 'FZLanTingHeiS-L-GB',
                                            color: '#BDDCEE',
                                            padding: [5, 35, 0, 10]
                                        }
                                    }
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                    offset: 0,
                                    color: 'rgb(5, 44, 78)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(6, 202, 227)'
                                }]),
                                shadowColor: 'rgba(1,1,1,0.5)',
                                shadowBlur: 1
                            }
                        }
                    },
                    {
                        value: 100 - datas.value,
                        name: '',
                        itemStyle: {
                            normal: {
                                color: 'RGBA(5, 44, 78, 1)', // 未完成的圆环的颜色
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                            emphasis: {
                                color: 'RGBA(5, 44, 78, 1)' // 未完成的圆环的颜色
                            }
                        }
                    }]
            }
        ]
    };
    if (type == 'out' && chartLeft) {
        chartLeft.setOption(option)
    }
    if (type == 'into' && chartRight) {
        chartRight.setOption(option)
    }
};
watch(() => props.resultData, (newVal) => {
    if (newVal.Out) {
        let valueOut = {
            value: newVal.Out,
            text: "出入口(出)"
        }
        initAccess(valueOut, 'out')
    }
    if (newVal.Into) {
        let valueInto = {
            value: newVal.Into,
            text: "出入口(入)"
        }
        initAccess(valueInto, 'into')
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
    let value = {
        value: [],
        text: ""
    }
    initAccess(value, 'out')
    initAccess(value, 'into')
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartLeft?.resize();
    chartRight?.resize();
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.flex_person {
    flex: 1;
    width: 100%;
    height: 100%;
}
</style>