<template>
    <div :style="height" class="mt10" style="position: relative">
        <vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
            <vxe-column type="seq" width="70px" title="序号"></vxe-column>
            <vxe-column field="name" title="终端名称" min-width="100"></vxe-column>
            <vxe-column field="subName" title="所属电站" min-width="100"></vxe-column>
            <vxe-column field="ip" title="网络参数" width="120px"></vxe-column>
            <vxe-colgroup title="运行评价">
                <vxe-column field="integrityRate" title="完整率(%)" min-width="90"></vxe-column>
                <vxe-column field="onLineRate" title="在线率(%)" min-width="90"></vxe-column>
                <vxe-column field="passRate" title="合格率(%)" min-width="90"></vxe-column>
            </vxe-colgroup>

            <vxe-column field="evaluate" title="评价" min-width="90">
                <template v-slot="{ row }">
                    <!-- {{ Math.floor(row.evaluate * 100).toFixed(0) / 100 }} -->
                    <span :style="`color:${ratingColor(row.evaluate)}`">
                        {{ ratingName(row.evaluate) }}
                    </span>
                </template>
            </vxe-column>
        </vxe-table>
        <div class="legeng">
            <div v-for="item in legengList">
                <span :style="`background-color: ${item.color};`"></span>
                <span>{{ item.title }}</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getRunEvaluateDetail } from '@/api/device-boot/runEvaluate'
const props = defineProps({
    params: {
        type: Object,
        default: () => {}
    }
})
const tableData = ref([])
const height = mainHeight(360, 3)
const legengList = [
    {
        color: '#00b07d',
        title: '优秀'
    },
    {
        color: '#2b7fd3',
        title: '良好'
    },
    {
        color: '#ff8c00',
        title: '一般'
    },
    {
        color: '#c00',
        title: '较差'
    }
]
const info = () => {
    getRunEvaluateDetail({ ...props.params, ids: [] }).then(res => {
        tableData.value = res.data.slice(0, 10)
    })
}
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 '较差'
    }
}
defineExpose({
    info
})
</script>
<style lang="scss" scoped>
// :deep(.vxe-header--row) {
//     background: #071de2 !important;
//     color: #fff !important;
// }

/*调整表格 单元格背景颜色*/
:deep(.vxe-table .vxe-table--body-wrapper, .vxe-table .vxe-table--footer-wrapper) {
    background: #ffffff00 !important;
}
:deep(.vxe-table--render-wrapper) {
    background-color: #ffffff00 !important;
}
:deep(.vxe-table--body .vxe-body--row) {
    background-color: #ffffff2e !important;
}

:deep(.vxe-table--render-default .vxe-table--body-wrapper table) {
    background-color: #00000000 !important;
    color: #000;
}
:deep(
        .vxe-table--render-default.border--full .vxe-body--column,
        .vxe-table--render-default.border--full .vxe-footer--column,
        .vxe-table--render-default.border--full .vxe-header--column,

    ) {
    background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4);
}
:deep(.vxe-table--render-default.border--full .vxe-header--column) {
    background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4) !important;
}
:deep(.vxe-table--render-default .vxe-table--border-line) {
    border: var(--vxe-table-border-width) solid #00fff4;
}
:deep(.vxe-header--row) {
    background: var(--el-color-primary);
    color: #fff;
}
:dppe(.el-select__wrapper) {
    width: 26px !important;
}

.legeng {
    position: absolute;
    padding: 5px;
    top: -168px;
    left: -7px;
    width: 70px;
    font-size: 12px;
    height: 100px;
    background: #fff;
    border-radius: 5px;
    display: grid;
    line-height: 22px;
    grid-template-rows: auto;

    div {
        display: flex;
        align-items: center;
        justify-content: center;

        span:nth-child(1) {
            display: inline-block;
            height: 10px;
            border-radius: 2px;
            width: 15px;
            margin-right: 5px;
        }
    }
}
</style>
