<template>
    <div class="lc-container">
        <div class="left-panel box-bg-color">
            <div class="title">OEE {{ tLang('message', '综合设备效率') }}</div>
            <div class="content">
                <div class="oee-chart">
                    <v-chart autoresize :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">{{ props.oeeData.availability }}%</span>
                        </div>
                        <div class="progress-bar">
                            <el-progress :percentage="props.oeeData.availability" 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">{{ props.oeeData.performanceRate }}%</span>
                        </div>
                        <div class="progress-bar">
                            <el-progress :percentage="props.oeeData.performanceRate" 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="props.errorList.length" class="item"><el-icon :size="20">
                            <BellFilled />
                        </el-icon></el-badge></span>
                <span class="text2" @click="ignoreError({})">{{ tLang('message', '全部清除') }}</span>
            </div>
            <div class="right-content">
                <div class="card-box">
                    <div class="card-item" v-for="(item, index) of props.errorList" :key="item.key">
                        <div class="message-mine">
                            <div class="message-title">{{ item.msg }}</div>
                            <div class="message-desc">
                                <span>{{ tLang('message', '机架号') }}: </span>
                                <span>{{ item.devCode }}</span>
                                <span>{{ item.ts }}</span>

                            </div>
                        </div>
                        <div class="option">
                            <!-- <el-button color="#DC2626" size="small">{{ tLang('message','处理') }}</el-button> -->
                            <el-button color="#e7e7e7" size="small" @click="ignoreError(item)">{{ tLang('message', '忽略')
                                }}</el-button>
                        </div>
                    </div>
                    <div v-if="props.errorList == 0"
                        style="width: 100%;height: 50px;display: flex;justify-content: center;align-items: center;color: #65656D;">
                        {{ tLang('message','暂无报警') }}</div>

                </div>
                <div class="error-chart">

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

<script setup>
const props = defineProps({
    oeeData:{
        type: Object,
        default: () => {
            return {
            }
        }
    },
    abnormalData: {
        type: Object,
        default: () => {
            return {
                alarm: 0,
                check: 0,
                repair: 0
            }
        }
    },
    errorList: {
        type: Array,
        default: () => {
            return []
        }

    }
})
const { proxy } = getCurrentInstance();


const emit = defineEmits(['ignoreError'])
function ignoreError(item) {
    emit('ignoreError',item)
}
let options = computed(() => {
    return {
        title: {
            text: proxy.tLang('message', '异常停机分类统计'),
            textStyle: {
                fontSize: 12,
            }
        },
        tooltip: {
            trigger: 'item'
        },
        backgroundColor: 'transparent',
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    formatter: (params) => {
                        return params.name + ' ' +params.value+ ' ' + proxy.tLang('message','次')
                    }
                },
                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: 40,
                //         fontWeight: 'bold'
                //     }
                // },
                data: [
                    { value: props.abnormalData.repair, name: proxy.tLang('home', '维修') },
                    { value: props.abnormalData.check, name: proxy.tLang('pms', '保养') },
                    { value: props.abnormalData.alarm, 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: 100,
                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,
                },
                title: {
                    offsetCenter: [0, '-10%'],
                    fontSize: 12
                },
                detail: {
                    fontSize: 14,
                    offsetCenter: [0, '-35%'],
                    valueAnimation: true,
                    formatter: function (value) {
                        return value + '%';
                    },
                    color: 'inherit'
                },
                data: [
                    {
                        value: props.oeeData.performanceRate,
                        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-box {
                width: 100%;
                height: 50px;
                scrollbar-width: none;
                overflow: auto;

                .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;
                    margin-bottom: 5px;

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

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

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

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

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

            }


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


}
</style>