<script setup lang="ts">
import { ref, computed, watchEffect, watch } from 'vue';
import Empty from '../Empty/Empty.vue';
import Scrollbar from '../Scrollbar/Scrollbar.vue';
interface Option {
  label?: string // 选项名
  value?: string | number // 选项值
  disabled?: boolean // 是否禁用选项，默认 false
  [propName: string]: any // 添加一个字符串索引签名，用于包含带有任意数量的其他属性
}
interface Props {
  options?: Option[] // 选项数据
  label?: string // 字典项的文本字段名
  value?: string // 字典项的值字段名
  placeholder?: string // 默认占位文本
  disabled?: boolean // 是否禁用
  allowClear?: boolean // 是否支持清除
  search?: boolean // 是否支持搜索，使用搜索时请设置 width
  /*
    根据输入项进行筛选，默认为 true 时，筛选每个选项的文本字段 label 是否包含输入项，包含返回 true，反之返回 false
    当其为函数 Function 时，接受 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false
  */
  filter?: any | true // 过滤条件函数，仅当支持搜索时生效
  width?: string | number // 选择器宽度，单位 px
  height?: number // 选择器高度，单位 px
  maxDisplay?: number // 下拉面板最多能展示的下拉项数，超过后滚动显示
  scrollbarProps?: object // 下拉面板滚动条 scrollbar 组件属性配置
  modelValue?: number | string // (v-model) 当前选中的 option 条目值
}
const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  label: 'label',
  value: 'value',
  placeholder: '请选择',
  disabled: false,
  search: false,
  allowClear: false,
  filter: true,
  width: 'auto',
  height: 32,
  maxDisplay: 6,
  scrollbarProps: () => ({}),
  modelValue: undefined
});
const filterOptions = ref<Option[]>(); // 过滤后的选项数组
const selectedName = ref(); // 当前选中选项的 label
const inputRef = ref(); // 输入框 DOM 引用
const inputValue = ref(); // 支持搜索时，用户输入内容
const disabledBlur = ref(false); // 是否禁用 input 标签的 blur 事件
const hideSelectName = ref(false); // 用户输入时，隐藏 selectName 的展示
const hoverValue = ref(); // 鼠标悬浮项的 value 值
const showOptions = ref(false); // options 面板
const showArrow = ref(true); // 剪头图标显隐
const showClear = ref(false); // 清除图标显隐
const showCaret = ref(false); // 支持搜索时，输入光标的显隐
const showSearch = ref(false); // 搜索图标显隐
const selectFocused = ref(false); /// select 是否聚焦
const emits = defineEmits(['update:modelValue', 'change', 'openChange']);
const selectWidth = computed(() => {
  if (typeof props.width === 'number') {
    return `${props.width}px`;
  }
  return props.width;
});
const optionsStyle = computed(() => {
  return {
    maxHeight: `${props.maxDisplay * props.height + 8}px`
  };
});
watchEffect(() => {
  if (props.search) {
    if (inputValue.value) {
      showOptions.value = true;
      filterOptions.value = props.options.filter((option) => {
        if (typeof props.filter === 'function') {
          return props.filter(inputValue.value, option);
        } else {
          return option[props.label].includes(inputValue.value);
        }
      });
    } else {
      filterOptions.value = [...props.options];
    }
    if (filterOptions.value.length && inputValue.value) {
      hoverValue.value = filterOptions.value[0][props.value];
    } else {
      hoverValue.value = null;
    }
  } else {
    filterOptions.value = props.options;
  }
});
watchEffect(() => {
  // 回调立即执行一次，同时会自动跟踪回调中所依赖的所有响应式依赖
  initSelector();
});
watch(showOptions, (to) => {
  emits('openChange', to);
  if (props.search && !to) {
    inputValue.value = undefined;
    hideSelectName.value = false;
  }
});
function initSelector() {
  if (props.modelValue) {
    const target = props.options.find((option) => option[props.value] === props.modelValue);
    if (target) {
      selectedName.value = target[props.label];
      hoverValue.value = target[props.value];
    } else {
      selectedName.value = props.modelValue;
      hoverValue.value = null;
    }
  } else {
    selectedName.value = null;
    hoverValue.value = null;
  }
}
function onBlur() {
  selectFocused.value = false;
  if (showOptions.value) {
    showOptions.value = false;
  }
  if (props.search) {
    showSearch.value = false;
    showArrow.value = true;
    hideSelectName.value = false;
  }
}
function onEnter() {
  disabledBlur.value = true;
  if (props.allowClear) {
    if (selectedName.value || (props.search && inputValue.value)) {
      showArrow.value = false;
      showClear.value = true;
      if (props.search) {
        showSearch.value = false;
      }
    }
  }
}
function onLeave() {
  disabledBlur.value = false;
  if (props.allowClear && showClear.value) {
    showClear.value = false;
    if (!props.search) {
      showArrow.value = true;
    }
  }
  if (props.search) {
    if (showOptions.value) {
      showSearch.value = true;
      showArrow.value = false;
    } else {
      showSearch.value = false;
      showArrow.value = true;
    }
  }
}
function onHover(value: string | number, disabled: boolean | undefined) {
  disabledBlur.value = Boolean(disabled);
  hoverValue.value = value;
}
function openSelect() {
  selectFocus();
  if (!props.search) {
    inputRef.value.style.opacity = 0;
  }
  showOptions.value = !showOptions.value;
  if (!hoverValue.value && selectedName.value) {
    const target = props.options.find((option) => option[props.label] === selectedName.value);
    hoverValue.value = target ? target[props.value] : null;
  }
  if (props.search) {
    if (!showClear.value) {
      showArrow.value = !showOptions.value;
      showSearch.value = showOptions.value;
    }
  }
}
function onSearchInput(e: InputEvent) {
  hideSelectName.value = Boolean((e.target as HTMLInputElement)?.value);
}
function onClear() {
  if (selectFocused.value) {
    selectFocus();
    showCaret.value = true;
  }
  showClear.value = false;
  selectedName.value = null;
  hoverValue.value = null;
  showOptions.value = false;
  showSearch.value = false;
  showArrow.value = true;
  emits('update:modelValue');
  emits('change');
}
function selectFocus() {
  inputRef.value.focus(); // 通过 input 标签聚焦来模拟 select 整体聚焦效果
  selectFocused.value = true;
}
function onChange(value: string | number, label: string, index: number) {
  // 选中下拉项后的回调
  if (props.modelValue !== value) {
    selectedName.value = label;
    hoverValue.value = value;
    emits('update:modelValue', value);
    emits('change', value, label, index);
  }
  showCaret.value = false;
}
</script>
<template>
  <div
      class="m-select"
      :class="{ 'select-focused': selectFocused, 'search-select': search, 'select-disabled': disabled }"
      :style="`width: ${selectWidth}; height: ${height}px;`"
      @click="disabled ? () => false : openSelect()"
  >
    <div class="m-select-wrap" @mouseenter="onEnter" @mouseleave="onLeave">
      <span class="m-select-search">
        <Input
            ref="inputRef"
            class="select-search"
            :class="{ 'caret-show': showOptions || showCaret }"
            type="text"
            autocomplete="off"
            :readonly="!search"
            :disabled="disabled"
            @input="onSearchInput"
            v-model="inputValue"
            @blur="!disabledBlur && showOptions && !disabled ? onBlur() : () => false"
        />
      </span>
      <span
          v-if="!hideSelectName"
          class="select-item"
          :class="{ 'select-placeholder': !selectedName || showOptions }"
          :style="`line-height: ${height - 2}px;`"
          :title="selectedName"
      >
        {{ selectedName || placeholder }}
      </span>
      <svg
          class="arrow-svg"
          :class="{ 'arrow-rotate': showOptions, 'show-svg': showArrow }"
          focusable="false"
          data-icon="down"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
          viewBox="64 64 896 896"
      >
        <path
            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
        ></path>
      </svg>
      <svg
          class="search-svg"
          :class="{ 'show-svg': showSearch }"
          focusable="false"
          data-icon="search"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
          viewBox="64 64 896 896"
      >
        <path
            d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
        ></path>
      </svg>
      <svg
          class="clear-svg"
          :class="{ 'show-svg': showClear }"
          focusable="false"
          data-icon="close-circle"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
          fill-rule="evenodd"
          viewBox="64 64 896 896"
          @click.stop="onClear"
      >
        <path
            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
        ></path>
      </svg>
    </div>
    <Transition name="slide-up">
      <div
          v-if="showOptions && filterOptions && filterOptions.length"
          class="m-options-panel"
          :style="`top: ${height + 4}px;`"
          @mouseleave="disabledBlur = false"
      >
        <Scrollbar :content-style="{ padding: '4px' }" :style="optionsStyle" v-bind="scrollbarProps">
          <p
              v-for="(option, index) in filterOptions"
              :key="index"
              :class="[
              'select-option',
              {
                'option-hover': !option.disabled && option[value] === hoverValue,
                'option-selected': option[label] === selectedName,
                'option-disabled': option.disabled
              }
            ]"
              :title="option[label]"
              @mouseenter="onHover(option[value], option.disabled)"
              @click.stop="option.disabled ? selectFocus() : onChange(option[value], option[label], index)"
          >
            {{ option[label] }}
          </p>
        </Scrollbar>
      </div>
      <div
          v-else-if="showOptions && filterOptions && !filterOptions.length"
          class="options-empty"
          :style="`top: ${height + 4}px; width: ${width}px;`"
      >
        <Empty image="outlined" />
      </div>
    </Transition>
  </div>
</template>
<style lang="less" scoped>
.slide-up-enter-active {
  transform: scaleY(1);
  transform-origin: 0% 0%;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.slide-up-leave-active {
  transform: scaleY(1);
  transform-origin: 0% 0%;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.slide-up-enter-from,
.slide-up-leave-to {
  transform: scaleY(0.8);
  transform-origin: 0% 0%;
  opacity: 0;
}
.m-select {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.88);
  outline: none;
  cursor: pointer;
  &:not(.select-disabled):hover {
    // 悬浮时样式
    .m-select-wrap {
      border-color: #4096ff;
    }
  }
  .m-select-wrap {
    position: relative;
    display: flex;
    padding: 0 11px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    outline: none;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    .m-select-search {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 11px;
      right: 11px;
      .select-search {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
        caret-color: transparent;
        background: transparent;
        border: none;
        outline: none;
        appearance: none;
        opacity: 0;
        cursor: pointer;
      }
      .caret-show {
        caret-color: auto;
      }
    }
    .select-item {
      position: relative;
      padding-right: 18px;
      flex: 1;
      user-select: none;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: all 0.3s;
    }
    .select-placeholder {
      color: rgba(0, 0, 0, 0.25);
      transition: none;
      pointer-events: none;
    }
    .icon-svg {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 11px;
      margin: auto 0;
      display: inline-block;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.25);
      fill: currentColor;
      opacity: 0;
      user-select: none;
      pointer-events: none;
    }
    .arrow-svg {
      .icon-svg();
      transition:
          transform 0.3s,
          opacity 0.3s;
    }
    .arrow-rotate {
      transform: rotate(180deg);
    }
    .search-svg {
      .icon-svg();
      transition: opacity 0.3s;
    }
    .clear-svg {
      .icon-svg();
      z-index: 1;
      background: #fff;
      cursor: pointer;
      transition:
          color 0.2s,
          opacity 0.3s;
      &:hover {
        color: rgba(0, 0, 0, 0.45);
      }
    }
    .show-svg {
      opacity: 1;
      pointer-events: auto;
    }
  }
  .m-options-panel {
    position: absolute;
    z-index: 1000;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    outline: none;
    box-shadow:
        0 6px 16px 0 rgba(0, 0, 0, 0.08),
        0 3px 6px -4px rgba(0, 0, 0, 0.12),
        0 9px 28px 8px rgba(0, 0, 0, 0.05);
    .select-option {
      // 下拉项默认样式
      min-height: 32px;
      display: block;
      padding: 5px 12px;
      border-radius: 4px;
      color: rgba(0, 0, 0, 0.88);
      font-weight: 400;
      font-size: 14px;
      line-height: 1.5714285714285714;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: background 0.3s ease;
    }
    .option-hover {
      // 悬浮时的下拉项样式
      background: rgba(0, 0, 0, 0.04);
    }
    .option-selected {
      // 被选中的下拉项样式
      font-weight: 600;
      background: #e6f4ff;
    }
    .option-disabled {
      // 禁用某个下拉选项时的样式
      color: rgba(0, 0, 0, 0.25);
      cursor: not-allowed;
    }
  }
  .options-empty {
    position: absolute;
    z-index: 1000;
    border-radius: 8px;
    padding: 9px 16px;
    background-color: #fff;
    outline: none;
    box-shadow:
        0 6px 16px 0 rgba(0, 0, 0, 0.08),
        0 3px 6px -4px rgba(0, 0, 0, 0.12),
        0 9px 28px 8px rgba(0, 0, 0, 0.05);
    .m-empty {
      margin-block: 8px;
      :deep(.m-empty-image) {
        height: 35px;
      }
    }
  }
}
.select-focused:not(.select-disabled) {
  // 激活时样式
  .m-select-wrap {
    border-color: #4096ff;
    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
  }
}
.search-select {
  .m-select-wrap {
    cursor: text;
    .m-select-search {
      .select-search {
        cursor: auto;
        color: inherit;
        opacity: 1;
      }
    }
  }
}
.select-disabled {
  .m-select-wrap {
    // 下拉禁用样式
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    user-select: none;
    cursor: not-allowed;
    .m-select-search .select-search {
      cursor: not-allowed;
    }
  }
}
</style>
