<template>
  <div id="select-input">
    <div class="select">
      <div class="value" @click="isShowList = !isShowList">
        <span>{{ selectedVal }}</span>
        <img src="/images/htmlEditDialog/select-icon.png" alt="" />
      </div>
      <ul v-show="isShowList">
        <li
          v-for="(item, index) of params.options"
          :key="index"
          @click="handleClickItem(item)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps, defineExpose } from "vue";
const params = defineProps({
  options: Array,
  placeholder: String,
});
const emit = defineEmits(["selectChange"]);
let isShowList = ref(false);
let selectedVal = ref(params.placeholder);
function handleClickItem(item) {
  if (!item.value) return;
  selectedVal.value = item.label;
  isShowList.value = false;
  emit("selectChange", item);
}
function reset() {
  isShowList.value = false;
  selectedVal.value = params.placeholder;
}
defineExpose({
  reset,
});
</script>

<style lang="scss" scoped>
#select-input {
  P {
    width: 130px;
    height: 35px;
    font-size: 26px;
    font-family: MicrosoftYaHei;
    color: #ffffff;
    line-height: 35px;
  }
  .select {
    position: relative;
    .value {
      width: 284px;
      height: 51px;
      border: 1px solid #0f82af;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #08b7b8;
      line-height: 51px;
      margin-top: 20px;
      padding: 0px 0px 0px 10px;
      position: relative;
      img {
        position: absolute;
        right: 20px;
        bottom: 18px;
        cursor: pointer;
      }
      img:active {
        transform: scale(0.9);
      }
    }
    ul {
      position: absolute;
      width: 284px;
      max-height: 300px;
      background: #072247;
      border-radius: 0px 0px 20px 20px;
      border: 1px solid #0f82af;
      z-index: 10000;
      overflow-y: scroll;

      li {
        // height: 37px;
        font-size: 28px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        line-height: 37px;
        padding: 10px 10px;
        cursor: pointer;
      }
      li:hover {
        color: #08b7b8;
        background: #0f82af8f;
      }
    }
    ul::-webkit-scrollbar {
      height: 20px;
      width: 20;
    }
    ul::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #53535380;
    }
  }
}
</style>
