<template>
    <div class="lc-container">
        <div class="left-panel box-bg-color">
            <div class="title">{{ tLang('message', 'OEE综合设备效率') }}</div>
            <div class="content">
                <div class="oee-chart">
                    <v-chart :option="oeeOption" theme="dark" style="width: 100%;height: 100%;" />
                </div>
                <div class="progress">
                    <div class="progress-item">
                        <div class="progress-title">
                            <span>{{ tLang('message', '可用率') }}</span>
                            <span class="progress-value">{{ 70 }}%</span>
                        </div>
                        <div class="progress-bar">
                            <el-progress :percentage="70" status="warning" :stroke-width="16" :show-text="false" />
                        </div>
                        <div class="progress-desc">
                            <span>计划停机：{{ '45分钟' }}</span>
                            <span>故障停机：{{ '1小时' }}</span>
                        </div>
                    </div>
                    <div class="progress-item">
                        <div class="progress-title">
                            <span>{{ tLang('message', '性能率') }}</span>
                            <span class="progress-value">{{ 70 }}%</span>
                        </div>
                        <div class="progress-bar">
                            <el-progress :percentage="70" status="success" :stroke-width="16" :show-text="false" />
                        </div>
                        <div class="progress-desc">
                            <span>计划停机：{{ '45分钟' }}</span>
                            <span>故障停机：{{ '1小时' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-panel box-bg-color">
            <div class="right-title">
                <span class="text1">{{ tLang('message', '实时报警') }}<el-badge :show-zero="false" :value="1"
                        class="item"><el-icon :size="20">
                            <BellFilled />
                        </el-icon></el-badge></span>
                <span class="text2">{{ tLang('message', '全部清除') }}</span>
            </div>
            <div class="right-content">
                <div class="card-item">
                    <div class="message-mine">
                        <div class="message-title">主轴旋转异常，请检查机械部件</div>
                        <div class="message-desc">
                            <span>{{ tLang('message', '设备ID') }}: </span>
                            <span>SWM5015</span>
                            <span>2025-04-16 13:20:18</span>

                        </div>
                    </div>
                    <div class="option">
                        <el-button color="#DC2626" size="small">{{ tLang('message', '处理') }}</el-button>
                        <el-button color="#e7e7e7" size="small">{{ tLang('message', '忽略') }}</el-button>
                    </div>
                </div>
                <div class="error-chart">

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

<script setup>

const { proxy } = getCurrentInstance();
let options = computed(() => {
    return {
        title: {
            text: proxy.tLang('message', '异常停机分类统计'),
            textStyle: {
                fontSize: 12,
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '15%',
            orient: 'vertical',
            left: 'left'
        },
        backgroundColor: 'transparent',
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: 40,
                //         fontWeight: 'bold'
                //     }
                // },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: proxy.tLang('home', '维修') },
                    { value: 735, name: proxy.tLang('pms', '保养') },
                    { value: 580, name: proxy.tLang('message', '故障') },
                ]
            }
        ]
    }
})

let oeeOption = computed(() => {
    return {
        backgroundColor: 'transparent',
        series: [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                center: ['50%', '75%'],
                radius: '90%',
                min: 0,
                max: 1,
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: [
                            [0.25, '#FF6E76'],
                            [0.5, '#FDDD60'],
                            [0.75, '#58D9F9'],
                            [1, '#7CFFB2']
                        ]
                    }
                },
                pointer: {
                    icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                    length: '12%',
                    width: 10,
                    offsetCenter: [0, '-60%'],
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    length: 5,
                    distance: 3,
                    lineStyle: {
                        color: 'auto',
                        width: 1
                    }
                },
                splitLine: {
                    length: 10,
                    distance: 3,
                },
                axisLabel: {
                    color: '#f7f7f7',
                    distance: 3,
                    fontSize: 12,
                    formatter: function (value) {
                        return value * 100;
                    }
                },
                title: {
                    offsetCenter: [0, '-10%'],
                    fontSize: 12
                },
                detail: {
                    fontSize: 14,
                    offsetCenter: [0, '-35%'],
                    valueAnimation: true,
                    formatter: function (value) {
                        return Math.round(value * 100) + '%';
                    },
                    color: 'inherit'
                },
                data: [
                    {
                        value: 0.7,
                        name: 'OEE'
                    }
                ]
            }
        ]
    }
})
</script>

<style lang="scss" scoped>
.box-bg-color {
    background-color: #192124;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
}

.title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #cfcfcf;

}

.content {
    width: 100%;
    height: calc(100% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.lc-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-panel {
        width: 49%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

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

        .progress {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .progress-item {
                height: 80px;
                width: 100%;
                padding: 5px;
                box-sizing: border-box;
                background-color: #1F2937;
                border-radius: 5px;
                margin: 10px 0;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;

                .progress-title {
                    font-size: 14px;
                    color: #999898;
                }

                .progress-bar {
                    width: 100%;
                }

                .progress-desc {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 10px;
                    color: #999898;
                }
            }

        }

    }

    .right-panel {
        width: 49%;
        height: 100%;

        .right-title {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                font-size: 14px;
                color: #fff;
                margin: 0 20px;
            }

            .text1 {
                font-size: 18px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }

            .text2 {
                font-size: 12px;
                color: #cfcfcf;
                margin-right: 25px;
                cursor: pointer;
            }
        }

        .right-content {
            width: 100%;
            height: calc(100% - 40px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;

            .card-item {
                width: 100%;
                height: 50px;
                box-sizing: border-box;
                border-left: #DC2626 4px solid;
                background-color: #2D2023;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .message-mine {
                    width: 60%;
                    height: 100%;
                    padding-left: 20px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: flex-start;

                    .message-title {
                        font-size: 14px;
                        color: #fff;
                    }

                    .message-desc {
                        font-size: 10px;
                        color: #999898;

                        span {
                            margin-right: 15px;
                        }
                    }
                }

                .option {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .error-chart {
                width: 100%;
                height: calc(100% - 50px);
            }
        }
    }


}
</style>