<template>
    <div class="br-container">
        <div class="card" v-for="item in 2">
            <v-chart class="chart-class" :option="pie_option"></v-chart>
            <div class="box-list">
                <div class="box-item">{{ tLang('messages', '实际产量') }}：<div></div>
                </div>
                <div class="box-item">{{ tLang('messages', '计划产量') }}：<div></div>
                </div>
                <div class="box-item">{{ tLang('messages', '设备名称') }}：<div></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { ref, getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()

let pie_option = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '10%',
        left: 'center',
        textStyle: {
            color: "#ffffff",
            fontSize: 14,
        },
    },
    series: [
        {
            name: 'Output',
            type: 'pie',
            radius: ['80%', '90%'],
            center: ['50%', '70%'],
            startAngle: 210,
            endAngle: 330,
            label: {
                show: true,
                position: 'center',
                formatter: `{d}%`,
                color: "#fff",
            },
            data: [
                { value: 28, name: proxy.tLang('messages','未完成') },
                { value: 100, name: proxy.tLang('messages','已完成') },

            ]
        }
    ]
})

</script>

<style lang="scss" scoped>
.br-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .card {
        width: 50%;
        height: 100%;
        .chart-class {
            width: 100%;
            height: 50%;
        }

        .box-list {
            width: 100%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .box-item {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 10px;
            box-sizing: border-box;

            div {
                margin-left: 20px;
            }
        }
        }
    }

}
</style>
