<template>
    <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template>

<script setup>
import { computed, ref } from 'vue';
const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                xAxis: [],
                series: []
            };
        }
    }
});


const options = computed(() => {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {},
        backgroundColor: 'transparent',
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: prop.data.xAxis,
        },
        yAxis: {
            name: 'min',
            type: 'value',            
            axisLabel: {
                color: '#fff',
            },
            splitLine: {
                show: false
            }
        },
        series: prop.data.series.map((item, index) => {
            return {
                name: item.name,
                type: 'bar',
                stack: 'total',
                barWidth: '30%',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: item.data
            };
        })
    }
});
</script>

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