<template>
    <div :style="height">
        <!--  -->
        <el-popover :visible="visible" placement="left" :width="220">
            <el-select
                v-model="value"
                placeholder="请选择"
                size="small"
                value-key="id"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :multiple-limit="6"
                filterable
                style="width: 130px"
            >
                <el-option v-for="item in List" :key="item.id" :label="item.name" :value="item" />
            </el-select>
            <div style="text-align: right" class="mt10">
                <el-button size="small" text @click="visible = false">取消</el-button>
                <el-button size="small" type="primary" @click="change">确定</el-button>
            </div>
            <template #reference>
                <div class="selectBox" @click="visible = true">
                    <Tools style="width: 16px" />
                </div>
                <!-- <el-button>Delete</el-button> -->
            </template>
        </el-popover>
        <MyEChart :options="options" />
    </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 { yMethod } from '@/utils/echartMethod'
import { lastWeekTrend } from '@/api/device-boot/runEvaluate'
import { Tools } from '@element-plus/icons-vue'
const props = defineProps({
    params: {
        type: Object,
        default: () => {}
    }
})

const visible = ref(false)
const value: any = ref([])
const List: any = ref([])
const options = ref({})
const height = mainHeight(290, 3)

const info = () => {
    value.value = []
    List.value = []
    lastWeekTrend(props.params).then((res: any) => {
        res.data.name.forEach((item: any, i: number) => {
            List.value.push({
                name: item,
                score: res.data.score[i],
                date: res.data.date,
                id: i
            })
        })
        for (let i = 0; i < 6; i++) {
            if (i < List.value.length) {
                value.value.push(List.value[i])
            }
        }
        change()
    })
}
const change = () => {
    options.value = {
        xAxis: {
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true
            },
            data: value.value[0]?.date,
            axisLabel: {
                formatter: function (value) {
                    let time = ''
                    if (value.slice(-2) == '01') {
                        time = value
                    } else {
                        time = value.slice(5, 10)
                    }
                    return time
                }
            }
        },
        grid: {
            top: '30',
            left: '10',
            right: '10'
        },
        toolbox: {
            show: false
        },
        yAxis: {
            min: 0,
            max: 100,
            axisLine: {
                show: true
            },

            splitLine: {
                show: false
            }
        },
        legend: {
            top: '5',
            right: '5',
            type: 'scroll'
        },
        options: {
            series: []
        }
    }
    value.value.forEach((item: any, i: number) => {
        options.value.options.series.push({
            name: item.name,
            type: 'line',
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            data: item.score
        })
    })

    visible.value = false
}
onMounted(() => {})
defineExpose({
    info
})
</script>
<style lang="scss" scoped>
.selectBox {
    position: absolute;
    top: 2px;
    right: 10px;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    width: 60px;
    height: 28px;
    display: flex;
    line-height: 28px;
    justify-content: center;
    cursor: pointer;
    background-color: var(--el-color-primary);
    color: #fff;
}
// :deep(.el-tag) {
//     max-width: 110px !important;
// }
// :deep(.el-select) {
//     min-width: 190px;
// }
</style>
