<template>
  <el-cascader class="custom-select" v-if="type === 'tree'" v-model="value" :options="options"
    :props="{ checkStrictly: true, emitPath: false, ...propsConfig }" clearable @change="cascaderChange" style="
      --el-fill-color-blank: #0D507A;
      --el-border-color: #0D507A;
      --el-select-border-color-hover: #1CA7C8;
      --el-input-text-color: #fff;
      --el-input-icon-color: #fff;
      --el-text-color-regular: #fff;
    " />
  <el-select v-else class="custom-select" v-model="value" placeholder="请选择" @change="selectChange" clearable style="
      min-width: 130px;
      --el-fill-color-blank: #0D507A;
      --el-border-color: #0D507A;
      --el-select-border-color-hover: #1CA7C8;
      --el-input-text-color: #fff;
      --el-input-icon-color: #fff;
      --el-text-color-regular: #fff;
    ">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>

</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
const props = defineProps({
  options: {
    type: Array,
    default: []
  },
  type: {
    type: String,
    default: ''
  },
  propsConfig: {
    type: Object,
    default: {}
  }
})
const emit = defineEmits(['change'])
const value = defineModel()

const selectChange = (value) => {
  const selectItem = props.options.find(item => item.value === value) || {}
  emit('change', selectItem)
}

const cascaderChange = (value) => {
  if (value) {
    emit('change', { value: value })
  }

}

</script>


<style lang="scss" scoped>
.custom-select {
  .el-select__wrapper {
    line-height: var(--el-input-height, 24px);
    min-height: var(--el-input-height, 32px);
  }
}

/* 下拉框整体样式 */
.custom-select .el-select-dropdown {
  background-color: #0D507A !important;
  border: 1px solid #0D507A !important;
}

/* 选项列表样式 */
.custom-select .el-select-dropdown__list {
  background-color: #0D507A !important;
}

/* 单个选项样式 */
.custom-select .el-select-dropdown__item {
  color: #D9D9D9 !important;
  background-color: #0D507A !important;
}

/* 选项hover状态 */
.custom-select .el-select-dropdown__item:hover {
  background-color: #0D507A !important;
  color: #fff !important;
}

/* 选中的选项样式 */
.custom-select .el-select-dropdown__item.selected {
  background-color: #1CA7C8 !important;
  color: #fff !important;
}

/* 选项禁用状态 */
.custom-select .el-select-dropdown__item.is-disabled {
  color: #666 !important;
}

/* 下拉框箭头图标颜色 */
.custom-select .el-select .el-input .el-select__caret {
  color: #D9D9D9 !important;
}
</style>