<template>
    <div>
        <div class="btnsBox">
            <!-- <el-radio-group v-model="radio2" @change="info">
                <el-radio-button label="电压"  value="Voltage_Level" />
                <el-radio-button label="厂家" value="Manufacturer" />
            </el-radio-group> -->
            <el-segmented v-model="radio2" size="default" @change="info" :options="segmentedList" block>
                <template #default="scope">
                    <div>{{ scope.item.label }}</div>
                </template>
            </el-segmented>
        </div>
        <div class="appraiseTop">
            <div style="flex: 1" class="title">{{ radio2 == 'Voltage_Level' ? '电压等级' : '终端厂家' }}</div>
            <div style="width: 150px">在运终端数</div>
            <div style="width: 50px">评价</div>
        </div>
        <div class="boxBG" :style="height">
            <div
                class="appraise"
                v-for="(item, i) in List"
                @click="clickRow(item, i)"
                :class="rowColor == i ? 'hoverBox' : ''"
            >
                <!-- <div class="iconfont icon-wanzhengshuaifenxi2"></div> -->

                <div style="flex: 1" class="title">{{ item.name }}</div>
                <!-- <div style="color: #0fff04; width: 150px">{{ Math.floor(item.evaluate * 100).toFixed(0) / 100 }}分</div> -->
                <div style="color: #0fff04; width: 150px">{{ item.devIds.length }}台</div>
                <div style="width: 50px" :style="`color:${ratingColor(item.evaluate)}`">
                    {{ rating(item.evaluate) }}
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { getRunEvaluate } from '@/api/device-boot/runEvaluate'
import { mainHeight } from '@/utils/layout'
const emit = defineEmits(['reviewDetails'])
const props = defineProps({
    params: {
        type: Object,
        default: () => {}
    }
})
const segmentedList = ref([
    {
        label: '电压',
        value: 'Voltage_Level'
    },
    {
        label: '厂家',
        value: 'Manufacturer'
    }
])
const rowColor = ref(0)
const List: any = ref([])
const dictData = useDictData()
const radio2 = ref('Voltage_Level')
const height = mainHeight(560, 1.5)
const timer: any = ref(null)
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const info = () => {
    getRunEvaluate({
        ...props.params,
        statisticalType: classificationData.filter(item => item.code == radio2.value)[0]
    }).then(res => {
        clearInterval(timer.value)
        List.value = res.data
        clickRow(List.value[0], 0)
        setTime()
    })
   
}
const setTime = () => {
    timer.value = setInterval(() => {
        if (rowColor.value == List.value.length - 1) {
            rowColor.value = 0
        } else {
            rowColor.value += 1
        }
        clickRow(List.value[rowColor.value], rowColor.value)
    }, 1000 * 5)
}
const rating = (num: number) => {
    if (num >= 90) {
        return '优秀'
    } else if (num >= 80) {
        return '良好'
    } else if (num >= 70) {
        return '一般'
    } else {
        return '较差'
    }
}
const ratingColor = (num: number) => {
    if (num >= 90) {
        return '#00b07d'
    } else if (num >= 80) {
        return '#2b7fd3'
    } else if (num >= 70) {
        return '#ff8c00'
    } else {
        return '#ff0000'
    }
}
const clickRow = (item: any, i: number) => {
    rowColor.value = i
    emit('reviewDetails', item)
}

onBeforeUnmount(() => {
    clearInterval(timer.value)
})
defineExpose({
    info
})
</script>
<style lang="scss" scoped>
.btnsBox {
    position: absolute;
    right: 5px;
    // right: 40%;
    top: 1px;
}
// ::v-deep .el-radio-button__inner {
//     padding: 8px 18px;
//     background: var(--el-color-primary);
//     border: 1px solid #00fff4;
//     border-radius: 0;
//     font-weight: normal;
//     color: #ffffff;
//     text-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.73);
//     opacity: 0.52;
// }
// ::v-deep .el-radio-button:last-child .el-radio-button__inner {
//     border-radius: 0;
// }
// ::v-deep .el-radio-button:first-child .el-radio-button__inner {
//     border-radius: 0;
//     border-left: 1px solid #00fff4;
// }
// ::v-deep .is-active {
//     border: 1px solid #00fff4;
//     opacity: 1 !important;
//     color: #ffffff;
//     background: var(--el-color-primary);

//     .el-radio-button__inner {
//         opacity: 1 !important;
//         border-left: 1px solid #00fff4 !important;
//     }
// }
.boxBG {
    display: flex;
    flex-direction: column;
    
    overflow-y: auto;
    width: 100%;
    .appraise {
        // height: 30px;
        width: 98%;
        margin: 0 auto;
        // background-image: url('@/assets/imgs/bg02.png');
        // background-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-3);
        box-shadow: 2px 4px 4px 2px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        background-size: 100% 100%;
        display: inline-block;
        padding: 8px 30px 8px 10px;
      
        margin-bottom: 10px;
        color: #fff;
        display: flex;
        // justify-content: space-around;
        align-items: center;
        font-size: 16px;
        div {
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .iconfont {
            display: flex;
            height: 60%;
            aspect-ratio: 1 / 1;
            background-color: var(--el-color-primary);
            font-size: 24px;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }
    }
}
.appraiseTop {
    width: 98%;
    margin: 0 auto;
    margin: 5px 0;
    padding: 2px 30px 2px 10px;
    font-size: 16px;
    font-weight: 650;
    display: flex;
    div {
        text-align: center;
    }
}
.hoverBox {
    background-color: var(--el-color-primary) !important;
    // background-image: none !important;
}
:deep(.el-segmented__item-selected, ) {
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
    position: relative;
}
:deep(.el-segmented) {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
</style>
