<template>
  <div class="conditional-select" @mouseover="mouseover" @mouseleave="mouseleave">
    <div style="padding-bottom: 10px">
      <div ref="selectRef" class="current-select">
        {{ name }}
        <el-icon :color="iconColor">
          <i-ep-CaretBottom
            v-show="iconColor === '#C0C4CC'"
            :style="{ color: modelValue ? '#177CFA' : '' }"
          />
          <i-ep-CaretTop v-show="iconColor !== '#C0C4CC'" />
        </el-icon>
      </div>
    </div>
    <div ref="dropdownRef" class="filter-select-dropdown">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="dropdown-item flx-justify-between"
        @click="handleChange(item)"
      >
        <span :style="{ color: item.value === modelValue ? '#177CFA' : '' }">{{ item.label }}</span>
        <el-icon color="#177CFA"><i-ep-Check v-show="item.value === modelValue" /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: Number || String,
    default: ''
  },
  name: {
    type: String,
    default: '工作经验'
  },
  list: {
    type: Array,
    default: () => []
  } as any
})

const emits = defineEmits(['change', 'update:modelValue'])

const iconColor = ref('#C0C4CC')
const selectRef = ref()
const dropdownRef = ref()

watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      selectRef.value.style.backgroundColor = '#DCECFF'
      selectRef.value.style.color = '#177CFA'
    } else {
      selectRef.value.style.backgroundColor = '#f8f8f8'
      selectRef.value.style.color = '#222222'
    }
  }
)

const mouseover = () => {
  selectRef.value.style.backgroundColor = '#DCECFF'
  selectRef.value.style.color = '#177CFA'
  dropdownRef.value.style.display = 'block'
  iconColor.value = '#177CFA'
}

const mouseleave = () => {
  if (!props.modelValue) {
    selectRef.value.style.backgroundColor = '#f8f8f8'
    selectRef.value.style.color = '#222222'
  }
  iconColor.value = '#C0C4CC'
  dropdownRef.value.style.display = 'none'
}

const handleChange = (item: any) => {
  dropdownRef.value.style.display = 'none'
  if (item.value === props.modelValue) return emits('update:modelValue', '')
  emits('update:modelValue', item.value)
  emits('change', item.value)
}
</script>

<style lang="scss" scoped>
.conditional-select {
  position: relative;
  margin-right: 20px;
  .current-select {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    color: #222222;
    cursor: pointer;
  }

  .filter-select-dropdown {
    display: none;
    position: absolute;
    cursor: pointer;
    top: 40px;
    padding: 6px 10px;
    border-radius: 8px;
    min-width: 92px;
    min-height: 50px;
    border: 1px solid #ededed;
    background-color: #ffffff;
    transition: opacity 10 linear;
    z-index: 99;

    .dropdown-item {
      box-sizing: border-box;
      width: 168px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #222222;

      &:hover {
        background-color: #f8f8f8;
        color: #177cfa;
      }

      span {
        display: block;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .el-icon {
        display: flex;
        justify-content: flex-end;
        width: 40px;
      }
    }
  }
}
</style>
