<template>
  <div ref="selectRef" class="select-container">
    <div class="common-select" @click="handleShow">{{ modelValue ? modelValue : placeholder }}</div>
    <div v-show="showOptions" class="options-group">
      <div v-for="item in options" :key="item[valueName]" class="option" @click="handleClick(item[valueName])">{{ item[labelName] }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {onClickOutside} from "@vueuse/core";

defineProps({
  modelValue: String,
  placeholder: String,
  options: Object,
  labelName: {
    type: String,
    default: 'label'
  },
  valueName: {
    type: String,
    default: 'value'
  }
});

const emits = defineEmits(['update:modelValue']);
const showOptions = ref(false);
const selectRef = ref(null)

onClickOutside(selectRef, (event) => {
  showOptions.value = false;
})
const handleShow = () => {
  showOptions.value = true;
}
const handleClick = (value: string) => {
  showOptions.value = false;
  emits('update:modelValue', value);
}
</script>

<style lang="scss" scoped>
.select-container {
  position: relative;
  .common-select {
    padding: 0 32px;
    width: 161px;
    height: 30px;
    line-height: 30px;
    background: #FFFFFF;
    border: 1px solid #DCE0EE;
    border-radius: 2px;
    position: relative;
    text-align: center;
    cursor: pointer;
  }
  .options-group {
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 999;
    width: 100%;
    border: 1px solid #DCE0EE;
    border-radius: 2px;
    background-color: #ffffff;
    padding: 0 32px;
    .option {
      width: 100%;
      min-height: 34px;
      line-height: 34px;
    }
  }
}

</style>
