<template>
    <div :style="height" style="overflow-y: auto" class="pd10">
        <!-- <MyEChart :options="options" /> -->
        <div v-for="(item, index) in List">
            <div class="box" @mouseenter="item.flag = false" @mouseleave="item.flag = true">
                <div class="div">{{ item.name }} <span>({{ item.count }}台)</span></div>
                <!-- <el-progress style="flex: 1" :percentage="(item.count / total).toFixed(2) * 100">
                <span>{{ item.count }}台</span>
            </el-progress> -->
                <el-progress style="flex: 1" :percentage="item.score" :color="ratingColor(item.score)">
                    <span v-if="item.flag" :style="`color:${ratingColor(item.score)}`">
                        {{ ratingName(item.score) }}
                    </span>
                    <span v-else :style="`color:${ratingColor(item.score)}`">{{ item.score }}分</span>
                </el-progress>
            </div>
            <el-divider />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { areaTerminalStatistic } from '@/api/device-boot/runEvaluate'
const height = mainHeight(220, 1.5)
const props = defineProps({
    params: {
        type: Object,
        default: () => {}
    }
})
const List: any = ref([])
const total: any = ref(0)
const options = ref({})
const format = percentage => percentage + '分'
const info = () => {
    areaTerminalStatistic(props.params).then(res => {
        total.value = res.data.reduce((sum, item) => sum + Number(item.count), 0)
        List.value = res.data
        List.value.forEach(item => {
            item.flag = true
        })
    })
    //     let dataSource = [
    //         { value: '90', name: '张家口' },
    //         { value: '80', name: '廊坊' },
    //         { value: '70', name: '秦皇岛' },
    //         { value: '60', name: '唐山' },
    //         { value: '50', name: '承德' }
    //     ]
    //     options.value = {
    //         grid: {
    //             top: '10'
    //         },
    //         toolbox: {
    //             show: false
    //         },
    //         options: {
    //             yAxis: {
    //                 type: 'category',
    //                 data: dataSource.map(item => item.name),
    //                 // axisLabel: {
    //                 //     color: '#fff'
    //                 // },
    //                 splitLine: {
    //                     show: false
    //                 }
    //             },
    //             xAxis: {
    //                 type: 'value',
    //                 data: [1, 2, 3, 4],
    //                 axisLabel: {
    //                     show: true
    //                     // textStyle: {
    //                     //     color: '#FFF'
    //                     // },
    //                     //  formatter: function (value) {

    //                     //  }
    //                 },
    //                 splitLine: {
    //                     show: false
    //                 },
    //                 axisTick: {
    //                     show: false
    //                 },
    //                 axisLine: {
    //                     show: true
    //                 }
    //             },
    //             dataZoom: null,
    //             series: [
    //                 {
    //                     type: 'bar',
    //                     itemStyle: {
    //                         color: function (params) {
    //                             return params.value >= 90
    //                                 ? '#00b07d'
    //                                 : params.value >= 80
    //                                 ? '#2b7fd3'
    //                                 : params.value >= 70
    //                                 ? '#ffcc33'
    //                                 : '#c00'
    //                         }
    //                     },
    //                     markLine: {
    //                         silent: false,
    //                         symbol: 'circle',
    //                         data: [
    //                             {
    //                                 name: '',
    //                                 yAxis: 100,
    //                                 lineStyle: {
    //                                     color: '#2E8B57'
    //                                 },
    //                                 label: {
    //                                     show: true,
    //                                     formatter: '优质',
    //                                     color: '#2E8B57'
    //                                 }
    //                             },
    //                             {
    //                                 name: '',
    //                                 yAxis: 90,
    //                                 lineStyle: {
    //                                     color: '#77DA63'
    //                                 },
    //                                 label: {
    //                                     show: true,
    //                                     color: '#77DA63',
    //                                     formatter: '良好'
    //                                 }
    //                             },
    //                             {
    //                                 name: '',
    //                                 yAxis: 60,
    //                                 lineStyle: {
    //                                     color: '#DAA520'
    //                                 },
    //                                 label: {
    //                                     show: true,
    //                                     color: '#DAA520',
    //                                     formatter: '合格'
    //                                 }
    //                             }
    //                         ]
    //                     },
    //                     data: dataSource.map(item => item.value)
    //                 }
    //             ]
    //         }
    //     }
}
const ratingColor = (num: number) => {
    if (num >= 90) {
        return '#00b07d'
    } else if (num >= 80) {
        return '#2b7fd3'
    } else if (num >= 70) {
        return '#ff8c00'
    } else {
        return '#c00'
    }
}
const ratingName = (num: number) => {
    if (num >= 90) {
        return '优秀'
    } else if (num >= 80) {
        return '良好'
    } else if (num >= 70) {
        return '一般'
    } else {
        return '较差'
    }
}
onMounted(() => {
    // info()
})
defineExpose({
    info
})
</script>
<style lang="scss" scoped>
.btnsBox {
    display: flex;
    justify-content: flex-end;
}
::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;
    }
}
.box {
    cursor: pointer;
    // display: flex;
    .div {
        // width: 100px;
        font-size: 16px;
        span{
            font-size: 14px;
        }
    }
}
:deep(.el-divider--horizontal) {
    margin: 5px 0;
}
</style>
