<template>
    <div class="selsct_wrap">
        <el-select :teleported="false" :modelValue="modelValue" @change="handleChange" :placeholder="placeholder">
            <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
        </el-select>
    </div>

</template>

<script setup lang="ts">
import { toRefs } from "vue"
const props = defineProps(["modelValue", "placeholder", "options"])
const emit = defineEmits(["update:modelValue"])
const { modelValue, placeholder, options } = toRefs(props)
function handleChange(value: any) {
    emit("update:modelValue", value)
}
</script>

<style lang="less" scoped>
.selsct_wrap {
    width: 100%;
    position: relative;
    z-index: 2016;
    &::after {
        content: "";
        position: absolute;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        top: -1px;
        left: -1px;
        z-index: -1;
        background-color: antiquewhite;
        background: linear-gradient(180deg, #004DE7 0%, #009BFC 100%);
    }
    :deep(.el-select__wrapper){
        min-height: 26px;
    }

    :deep(.el-select__wrapper) {
        background-color: #053b7c;
        border-radius: 0;
        box-shadow: none;

        .el-select__placeholder {
            color: #fff;
        }
    }

    :deep(.el-select-dropdown__item) {
        color: #fff !important;
        display: flex;
        align-items: center;
        padding: 0 5px;
        height: 24px;

        &>span {
            line-height: 24px !important;
            font-size: 14px;
        }
    }

    :deep(.el-popper.is-light) {
        border: none !important;
        background-color: #16286c !important;
    }

    :deep(.el-select-dropdown__list) {
        padding: 5px !important;
    }

    :deep(.el-select-dropdown__item.is-hovering) {
        background: linear-gradient(180deg, #004ee7, #0099fc);
    }

    :deep(.el-popper) {
        border-radius: 0 !important;
    }

    :deep(.el-popper__arrow) {
        display: none;
    }
}
</style>