<template>
    <div class="lc-container box-bg-color">
        <div class="title">{{ tLang('message', '异常停机分类统计') }}</div>
        <div class="content">
            <div class="left-panel">
                <v-chart autoresize :option="options" theme="dark" style="width: 100%;height: 100%;" />
            </div>
            <div class="right-panel">
                <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-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: 100%;display: flex;justify-content: center;align-items: center;color: #65656D;">{{ tLang('message','暂无报警') }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

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

    }
})

const emit = defineEmits(['ignoreError'])
const { proxy } = getCurrentInstance();
let options = computed(() => {
    return {
        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', '报警') },
                ]
            }
        ]
    }
})


function ignoreError(item) {
    emit('ignoreError',item)
}
</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;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .content {

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

        }

        .right-panel {
            width: 50%;
            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);
                overflow: auto;
                /* 隐藏Y轴滚动条 */
                scrollbar-width: none;
                .card-item {
                    width: 95%;
                    height: 50px;
                    box-sizing: border-box;
                    border-left: #DC2626 4px solid;
                    margin-bottom: 6px;
                    background-color: #2D2023;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .message-mine {
                        width: 75%;
                        height: 100%;
                        padding-left: 20px;
                        box-sizing: border-box;
                        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: #d5d5d5;
                            span {
                                margin-right: 15px;
                            }
                        }
                    }
                    .option {
                        width: 25%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }

}
</style>