<template>
    <div class="container" :style="{ width: w, height: h }">
        <div class="card" :style="{scale: cardScale, left: cardL, top: cardT}">
            <div :id="domId" class="chart"></div>
            <div class="info">
                <div class="label" v-for="(item, index) in infoLabelDataArray" :key="item" @click="onClick(index, item.title, item.value)">
                    <span class="color" :style="{backgroundColor: item.color}">{{ item.item }}</span>
                    <span class="title">{{ item.title }}</span>
                    <span class="percent">{{ item.percent }}%</span>
                    <span class="count">
                        <span :style="{color: item.color}">{{ item.value }}</span>{{ props.unit }}
                    </span>
                </div>
            </div>
            <div class="divider"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, inject, reactive } from 'vue';
import { onMounted } from 'vue';
import { listColorArray } from '../../utils/utils'
const props = defineProps({
    id: String,
    w: {
        type: Number,
        default: 200
    },  
    title: {
        type: String,
        default: '极坐标-半圆'
    },
    data: {
        type: Array,
        default: []
    },
    unit: {
        type: String,
        default: ''
    }
});
const emits = defineEmits(['click']);
const echarts = inject('echarts');
const domId = ref(props.id);
const cardScale = ref(props.w / 600);
const w = ref(`${props.w}px`);
const h = ref(`${300 * cardScale.value}px`);
const cardL = ref(`${ (props.w - 600) / 4 }px`);
const cardT = ref(`${ (props.w - 600) / 4 }px`);
const colors = listColorArray();
const bgColor = '#0C1B32';
const infoLabelDataArray = reactive([]);

const onClick = (index, name, value) => {
    emits('click', {
        index: index,
        name: name,
        value: value
    });
}

const init = () => {
    // 标签
    let labelArray = [];
    // 背景
    let seriesBgArray = [];
    let dataArray = [];
    let totalValue = 0;
    props.data.forEach((item, index) => {
        totalValue += item.value
    });
    props.data.forEach((item, index) => {
        labelArray.push(item.name);
        seriesBgArray.push({
            value: 180, 
            itemStyle: { 
                color: bgColor
            }
        });
        dataArray.push({
            value: (item.value / totalValue).toFixed(2) * 180,
            itemStyle: {
                color: colors[index],
            }
        })
        infoLabelDataArray.push({
            color: colors[index],
            title: item.name,
            percent: (item.value / totalValue * 100).toFixed(2),
            value: item.value
        })
    })

    var chart = echarts.init(document.getElementById(domId.value));
    chart.setOption({
        title: {
            text: props.title
        },
        polar: {
            radius: [30, '80%'],
        },
        angleAxis: {
            max: 360,
            startAngle: 90,
            clockwise: false,
            axisLine: false,
            splitLine: false,
        },
        radiusAxis: {
            type: 'category',
            axisLine: false,
            data: labelArray,
        },
        series: [
            {
                type: 'bar',
                barWidth: 9,
                z: 1,
                animationDuration: 1500, // 动画时间
                coordinateSystem: 'polar',
                barGap: '-100%',
                showBackground: false,
                backgroundStyle: {
                    color: {
                        type: 'linear',
                        x: 1,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [
                            { offset: 1, color: bgColor },
                            { offset: 1, color: bgColor },
                            { offset: 1, color: bgColor },
                            { offset: 1, color: bgColor },
                            { offset: 1, color: bgColor },
                        ],
                        global: false,
                    },
                },
                data: seriesBgArray,
            },
            {
                type: 'bar',
                barWidth: 10,
                z: 2,
                coordinateSystem: 'polar',
                showBackground: true,
                backgroundStyle: {
                    color: 'transparent',
                },
                data: dataArray
            },
        ],
    })
    chart.on('click', (params) => {
        emits('click', {
            index: params.dataIndex,
            name: labelArray[params.dataIndex],
            value: props.data[params.dataIndex].value
        })
    })
}

onMounted(() => {
    init();
});

</script>

<style lang="stylus" scoped>
.container
    position relative
    .card
        position absolute
        top 0
        left 0
        .chart
            width 300px
            height: 300px
        .info
            position absolute
            top 25px
            left 155px
            width 350px
            height 250px
            padding 0 20px
            box-sizing border-box
            display flex
            flex-direction column
            justify-content space-around
            .label
                font-size 14px
                cursor pointer
                padding 3px 0
                span
                    display inline-block
                    height 30px
                    line-height 30px
                    vertical-align middle
                    color #FFFFFF
                    font-weight bold
                    margin 0 5px
                .color
                    width 30px
                    height 15px
                    background-color yellow
                .title
                    width 100px
                .percent
                    width 60px
                    text-align right
                .count
                    width 80px
                    text-align right
                &:hover
                    background linear-gradient(90deg, transparent, rgba(0, 255, 255, 1))
                    position relative
                    &::after
                        content ' '
                        width 19px
                        height 30px
                        display block
                        box-sizing border-box
                        border-style solid
                        border-color transparent transparent transparent rgba(0, 255, 255, 1)
                        border-top-width 18px
                        border-left-width 9px
                        border-right-width 9px
                        border-bottom-width 18px
                        position absolute
                        top 0px
                        right -18px
        .divider
            width 5px
            height 105px
            top 32px
            left 158px
            background-color #EEEEEE
            position absolute
            
</style>