<template>
    <section class="kf-pub-select" ref="kfPubSelect">
        <div class="kf-select-label" v-if="props.label != ''">
            <span :class="['kf-select-label-text']">{{ props.label }}</span>
        </div>
        <div class="kf-select-body" :style="{width: props.width,height: props.height,background: props.background}">
            <input type="text" class="kf-select-input" :style="{background: props.background}" :value="getLabel" @click="selectClick"
                   readonly :placeholder="placeholder">
            <svg-icon class="kf-select-xiala" name="xiala" color="#999" :open="state.scale"></svg-icon>
            <slot></slot>
        </div>
        <div class="kf-select-dropdown"
             :style="{'transform': `scaleY(${state.scale})`,width: props.dropdownWidth ? props.dropdownWidth : props.width}">
            <div :class="['kf-select-dropdown-item',getLabel == item.label ? 'dropdown-item-active'  : '']"
                 v-for="(item, index) in props.list" :key="index" :value="item.value" @click="dropdownHandle(item.value)">{{item.label }}
            </div>
        </div>
    </section>
</template>

<script setup>
import { onMounted, reactive, ref, watch, computed, onUnmounted } from "vue";
import svgIcon from "../uiWidget/svgIcon.vue";

const kfPubSelect = ref(null);
const state = reactive({
    options: [],
    loading: false,
    currentWidgetKey: null,
    scale: 0,
});
const props = defineProps({
    placeholder: {
        type: String,
        default: () => Kf.t("PleaseChoose"),
    },
    list: {
        type: Array,
        default: () => [
            { label: "0", value: 0 },
            { label: "1", value: 1 },
        ],
    },
    label: {
        type: String,
        default: () => Kf.t("Selection"),
    },
    value: {
        type: String,
        default: () => "auto",
    },
    width: {
        type: [String, Number],
        default: () => "49%",
    },
    dropdownWidth: {
        type: [String, Number],
        default: () => 0,
    },
    height: {
        type: [String, Number],
        default: () => "30px",
    },
    background: {
        type: [String],
        default: () => "#181818",
    },
});

const emits = defineEmits(["update:value", "change"]);

onMounted(() => {
    window.addEventListener("click", windowClickHandle);
});

onUnmounted(() => {
    window.removeEventListener("click", windowClickHandle);
});

const windowClickHandle = (evt) => {
    if (kfPubSelect.value && !kfPubSelect.value.contains(evt.target)) {
        state.scale = 0;
    }
};

const changeHandler = (val) => {
    emits("update:value", val);
};

const dropdownHandle = (value) => {
    console.log('dropdownHandle', value);
    emits("change",value, props, props.value, value);
    state.scale = 0;
    emits("update:value", value);
};

const getLabel = computed(() => {
    let sel = props.list.find((item) => item.value == props.value);
    if(!sel && props.label == Kf.t('2dComponent')){
      sel = props.list.find((item) => item.value == "kfCards");
      emits("update:value", sel.value);
    }
    return sel?.label || "";
});

const selectClick = (evt) => {
    state.scale == 0 ? (state.scale = 1) : (state.scale = 0);
};
</script>

<style lang="scss" scope>
.kf-pub-select .kf-select-input .el-input {
    --el-input-height: 28px !important;
}
.kf-pub-select {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    --select-height: 20px;
    .kf-select-label {
        width: 30%;
        display: flex;
        align-items: center;
        height: 30px;
        color: #aaa;
        span {
            display: inline-block;
        }
        .kf-select-label-text {
            display: flex;
            align-items: center;
            min-width: 50px;
            border-radius: 5px;
            font-size: 12px;
            height: 100%;
            width: 90%;
            color: var(--kf-text-color-70);
        }
    }

    .kf-select-body {
        width: 50%;
        position: relative;
        display: flex;
        align-items: center;
        border-radius: 3px;
        .kf-select-input {
            width: 100%;
            height: 100%;
            padding: 0 5px;
            font-size: 12px;
            color: #ccc;
            border-radius: 3px;
            border: 1px solid #383838;
            cursor: pointer;
            &:focus {
                border: 1px solid rgba(41, 120, 236,0.5);
            }
        }
        input::placeholder {
            font-size: 12px;
        }
        .kf-select-xiala {
            position: absolute;
            right: 10px;
            transform: scale(1.2);
            transform-origin: center center;
            transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
        }
        .kf-select-xiala[open="1"] {
            transform: scale(1.2) rotate(-180deg);
        }
        .kf-select-xiala[open="0"] {
            transform: scale(1.2) rotate(0deg);
        }
    }
    .kf-select-dropdown {
        width: 50%;
        max-height: 180px;
        position: absolute;
        top: var(--select-height);
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-top: 15px;
        background-color: #121212;
        padding: 10px 0;
        z-index: 10;
        border-radius: 2px;
        transform: scaleY(0);
        transform-origin: center top;
        transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
        border: 1px solid rgba(85, 85, 85, 0.5);
        overflow-y: scroll;
        &-item {
            font-size: 12px;
            color: #999;
            border-radius: 2px;
            padding: 3px 10px;
            cursor: pointer;
        }
        &-item:hover {
            background-color: rgba(18, 126, 250, 0.6);
            color: #fff;
        }
        .dropdown-item-active {
            background-color: rgba(18, 126, 250, 0.8);
            color: #fff;
        }
    }
}
</style>
