<template>
  <div
    :class="
      isInput ? ['selectInput', 'select' + pageType] : 'select' + pageType
    "
  >
    <div
      class="select"
      :class="{ noPadding: noPadding }"
      v-if="!onlyShowKeyboard"
    >
      <Input
        :type="inputType ? inputType : 'text'"
        v-bind="$attrs"
        v-input:[precision]="inputValue"
        :data-rule="dataRule"
        :password="showPasswordIcon"
        v-model="inputValue"
        :maxlength="maxlength"
        :icon="
          selectList.length > 0 || showIcon
            ? showSelectList
              ? 'ios-arrow-up'
              : 'ios-arrow-down'
            : ''
        "
        class="select-input"
        ref="selectInput"
        :id="id"
        autocomplete="off"
        @click="handleSelect"
        @on-click="clickIcon"
        @on-blur="inputBlur"
        @on-change="getCursorIndex"
        @on-focus="inputFocus"
        :style="{
          width: pageType == 'login' ? '' : $px2rem(width),
          height: pageType == 'login' ? '' : $px2rem(height),
          fontSize: pageType == 'login' ? '' : $px2rem(fontSize)
        }"
      />
      <div
        class="handle-item"
        :style="{
          right: pageType == 'login' ? '' : $px2rem(handleBtnRight)
        }"
      >
        <!--会员支付和销售类别不需要显示-->
        <template v-if="pageType != 'memberPay' && pageType != 'category'">
          <!--删除按钮-->
          <div
            v-if="inputValue && showDelIcon && !$attrs.disabled"
            @click="delKeyword"
            class="select-del"
          >
            <em class="iconfont icon-guanbi"></em>
          </div>
          <!--快捷键-->
          <div v-if="!inputValue && hotkey" class="select-hotkey">
            {{ hotkey }}
          </div>
        </template>
        <!--键盘图标-->
        <div
          class="showkeyboard"
          @mousedown="handleTouchstart"
          @touchstart="handleTouchstart"
          v-if="isshowKeyboard"
        >
          <em
            @click="handleshowKeyboard"
            @touchstart="handleshowKeyboard"
            class="iconfont icon-ic_keyboard_expand"
            :class="{ xuanzhuan: showkeyboard }"
          ></em>
        </div>
      </div>
      <!--下拉框数据-->
      <div
        class="select-list scrollbar animate__animated animate__fadeIn"
        v-if="showSelectList && selectList.length > 0"
        :style="{
          width: $px2rem(width),
          maxHeight: $px2rem(selectListMaxHeight),
          top: $px2rem(height)
        }"
        @mousedown="handleTouchstart"
        @touchstart="handleTouchstart"
      >
        <div
          v-for="(item, index) in filterSelectList"
          :key="index"
          :id="'selectItem' + index"
          class="select-list-option"
          :title="item"
          :class="{ selectActiveItem: selectCurrent == index }"
          @click="confirmOption(item, index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <!--键盘-->
    <Teleport
      :to="teleportDisabled ? '#app' : '.setting-content-right'"
      :disabled="teleportDisabled"
    >
      <div
        class="search-keyboard animate__animated"
        :style="{ zIndex: zIndex }"
        v-if="showkeyboard"
      >
        <Keyboard
          v-bind="keyboardOption"
          ref="keyboard"
          @numkeycodeHandle="numkeycodeHandle"
          @englishkeycodeHandle="englishkeycodeHandle"
          @handleLongPress="handleLongPress"
          @toggleKeyCode="toggleKeyCode"
        ></Keyboard>
      </div>
    </Teleport>
  </div>
</template>
<script lang="ts" setup>
import {
  computed,
  ref,
  defineExpose,
  onMounted,
  onUnmounted,
  nextTick,
  useAttrs,
  watch
} from 'vue'
import Keyboard from '@/components/Keyboard.vue'
import { KeyboardOptionObj } from '@/types/software'
import { filterInputValueNum, isTextSelected } from '@/utils'
import { useSoftwareStore } from '@/store/software'
import { useBaseStore } from '@/store/base'
import { Notice } from 'view-ui-plus'

const software = useSoftwareStore()
const baseStore = useBaseStore()
const $attrs = useAttrs()

interface propsType {
  pageType?: string // 区分页面
  keyboardOption?: any // 键盘参数
  isInput?: boolean // 是否只是input
  inputType?: string // input 类型
  selectList?: Array<any> // 下拉框数据
  width?: number // 宽度
  height?: number // 高度
  selectListMaxHeight?: number // 下拉框最大高度
  fontSize?: number // 字号
  modelValue?: string | number // 绑定值
  selecttype?: string
  isshowKeyboard?: boolean // 是否显示键盘图标
  teleportDisabled?: boolean // 是否禁用Teleport
  zIndex?: number // 层级，控制键盘的显示顺序
  showPasswordIcon?: boolean // 密码框是否显示切换按钮
  showDelIcon?: boolean // 是否显示删除
  hotkey?: string // 快捷键
  id?: string //唯一值(用于设置光标位置)
  noPadding?: boolean // input是否有padding-left
  onlyShowKeyboard?: boolean // 是否只显示键盘(默认false)
  notShowIconNeedKeyboard?: boolean // 显示键盘，但是不显示键盘图标
  precision?: string // 精度：number数字  decimal小数  decimal_2两位小数 forbidChinese禁止输入中文 customize任意（默认）
  dataRule?: any // 自定义规则
  handleBtnRight?: number // 删除、键盘等图标
  maxlength?: number
  min?: number // 最小值
  max?: number // 最小值
  toSelectValue?: boolean // 是否选中input的值
  needShowAllKeyboard?: boolean // 登录页面密码，点击键盘图标需要显示全键盘
  showIcon?: boolean // 是否显示下拉框图标
  focusToShowKeyboard?: boolean // 获取到焦点是否显示键盘
  needFilter?: boolean // 下拉框是否需要过滤
}
const props = withDefaults(defineProps<propsType>(), {
  selectList: () => {
    return []
  },
  width: 594,
  height: 56,
  selectListMaxHeight: 170,
  modelValue: '',
  selecttype: '',
  isshowKeyboard: false,
  isInput: false,
  pageType: '',
  fontSize: 20,
  inputType: 'text',
  keyboardOption: {
    type: 'showAll',
    alwaysShow: false,
    showType: 'showAll',
    isHttp: false,
    isToogle: false,
    isLowercase: false // 是否默认小写
  },
  teleportDisabled: false,
  zIndex: 10,
  showPasswordIcon: false,
  showDelIcon: false,
  hotkey: '',
  id: 'view-input',
  noPadding: false,
  onlyShowKeyboard: false,
  notShowIconNeedKeyboard: false,
  precision: 'customize',
  dataRule: '',
  handleBtnRight: -110,
  toSelectValue: false,
  needShowAllKeyboard: false,
  showIcon: false,
  focusToShowKeyboard: true,
  needFilter: true
})
// 下拉框选择数据后触发
const emit = defineEmits<{
  (
    e: 'changeSelectOption',
    data: { selecttype: string; value: string; index: any }
  ): void
  (e: 'comfirmSearch', data: string): void
  (e: 'handlerKeyDown', data: string): void
  (e: 'update:modelValue', data: string): void
  (e: 'handleCanShowKeyboard', data: boolean): void
  (e: 'handleHideAllKeyBoard', data?: string): void
  (e: 'toggleKeyCode', data: string): void
  (e: 'toHideKeyboard'): void
  (e: 'toShowAllKeyboard'): void
}>()

let selectCurrent = ref<number>(0) // 下拉框当前选中的项，键盘操作需要
// if (software.softwareType == 0) {
//   selectCurrent.value = 0 // 键盘模式默认为0
// }
onMounted(() => {
  localStorage.removeItem('isShowEnglishKeyboard')
  document.addEventListener('click', hideSelectView, true) // 点击页面
  document.addEventListener('blur', handleBlur, true) // 失去焦点
  document.addEventListener('keydown', handleKeydownPage) // 按下鼠标
  // 一直显示键盘，不用区分键盘和触屏模式
  if (props.keyboardOption.alwaysShow) {
    showkeyboard.value = true
  }
})
onUnmounted(() => {
  document.removeEventListener('click', hideSelectView)
  document.removeEventListener('blur', handleBlur)
  document.removeEventListener('keydown', handleKeydownPage)
})
let isKeydown = ref(false)
const handleKeydownPage = (e: any) => {
  isKeydown.value = true
}

// input绑定数据
let inputValue = computed({
  get() {
    return props.modelValue.toString()
  },
  set(newVal) {
    emit('update:modelValue', newVal)
  }
})
const clickIcon = () => {}

// 下拉框相关
let showSelectList = ref<boolean>(false) // 控制下拉框展示
let filterSelectList = ref<any>([])
watch(inputValue, (newVal: string, oldVal: string) => {
  if (props.selectList?.length && props.needFilter && isInputFocus.value) {
    if (!isSelectKeydown.value) {
      // 键盘按enter时也会触发，这时需要收起下拉框
      showSelectList.value = true
    }
    isSelectKeydown.value = false
    if (newVal !== oldVal) {
      if (newVal.trim()) {
        selectCurrent.value = 0
        filterSelectList.value = props.selectList.filter((item) =>
          item.includes(newVal)
        )
      } else {
        filterSelectList.value = props.selectList
      }
    }
  }
})
const handleSelect = (e: any) => {
  setTimeout(() => {
    cursorIndex.value = e.srcElement.selectionStart
  }, 80) // 解决input内容全选后再随意选位置删除，获取到的cursorIndex为0导致无法删除
  showSelectView('click')
}
// 下拉框确定选择 有item点击选择，没有快捷键选择
const confirmOption = (item: any, index?: any) => {
  if (props.selectList?.length) {
    if (item) {
      isSelectKeydown.value = true // 下拉框新增了点击取消默认事件，input没有失去焦点，所以这里需要改成true
    }
    let currentIndex = item ? index : selectCurrent.value
    let tempItem = filterSelectList.value[currentIndex]
    let tempIndex = 0
    if (tempItem) {
      tempIndex = props.selectList.findIndex((item) => item == tempItem)
    }
    emit('changeSelectOption', {
      selecttype: props.selecttype,
      value: item,
      index: tempIndex
    })
  }
  hideSelectView()
}
// 关闭下拉框
const hideSelectView = (e?: any) => {
  if (!e?.target?.className.includes('ivu-input')) {
    // 不是点击的输入框
    showSelectList.value = false // 隐藏下拉框
    baseStore.showSelectList = false
  }
}
// 显示下拉框
const showSelectView = (type?: string) => {
  showSelectList.value = !showSelectList.value
  baseStore.showSelectList = showSelectList.value
  if (showSelectList.value) {
    toFocus()
    inputFocus('', type)
    handleSelectViewSelected()
  }
}
const handleSelectViewSelected = () => {
  if (props.selectList && props.selectList.length) {
    filterSelectList.value = props.selectList
    let index = filterSelectList.value.findIndex(
      (item: string) => item == inputValue.value
    )
    selectCurrent.value = index
  }
  handleScroll(selectCurrent.value)
}
// 下拉框元素滚动到可视区
const handleScroll = (current: number) => {
  nextTick(() => {
    const ele: any = document.querySelector('#selectItem' + current)
    if (ele) {
      ele.scrollIntoView()
    }
  })
}
// 处理下拉框的键盘事件 e键盘事件
let isSelectKeydown = ref(false)
const handleKeydown = (e: any, closeKeyCode: number = 112) => {
  if (selecttype.value && showSelectList.value) {
    // enter
    if (e.keyCode == 13) {
      isSelectKeydown.value = true
      confirmOption('')
    }
    // 上箭头
    if (e.keyCode == 38) {
      e.preventDefault()
      handleSelectList('minus')
    }
    // 下箭头
    if (e.keyCode == 40) {
      e.preventDefault()
      handleSelectList('add')
    }
    // esc  收起下拉框
    if (e.keyCode == 27 || e.keyCode == closeKeyCode) {
      hideSelectView()
    }
    return false
  } else {
    return true
  }
}
const handleSelectList = (type: string) => {
  if (type == 'minus') {
    if (selectCurrent.value <= 0) return
    selectCurrent.value--
  }
  if (type == 'add') {
    if (selectCurrent.value >= filterSelectList.value.length - 1) return
    selectCurrent.value++
  }
  // 使元素滚动到可视区
  handleScroll(selectCurrent.value)
}

// 删除input
function delKeyword() {
  emit('update:modelValue', '')
  selectInput && selectInput.value.focus()
}

// 键盘相关
// 隐藏键盘
const handleBlur = () => {
  if (!props.keyboardOption.alwaysShow) {
    showkeyboard.value = false // 隐藏键盘
  }
}
const toHideKeyboard = () => {
  showkeyboard.value = false // 隐藏键盘
  emit('toHideKeyboard')
}
// 显示键盘
const keyboard = ref<any>(null)
const selectInput = ref<any>(null)
let showkeyboard = ref<boolean>(false)
function handleshowKeyboard() {
  if ($attrs.disabled) {
    try {
      Notice.destroy() // 先关闭，只出现一个提示
    } catch (e) {
      console.log(e)
    }
    Notice.error({
      title: '提示',
      desc: '输入框已禁用'
    })
    return // 输入框禁用时，不出现键盘
  }
  let showAllKeyboardEle = document.querySelector('.showAll_keyboard') // 全键盘
  let keyboardNumEle = document.querySelector('.keyboard-num') // 数字键盘
  if (props.needShowAllKeyboard) {
    if (!showAllKeyboardEle) {
      // 显示的数字键盘---点击后显示全键盘
      showkeyboard.value = true
      emit('toShowAllKeyboard')
    } else {
      showkeyboard.value = !showkeyboard.value
    }
  } else {
    showkeyboard.value = !showkeyboard.value
  }
  emit('handleCanShowKeyboard', showkeyboard.value)
  nextTick(() => {
    if (showkeyboard.value) {
      selectInput.value?.focus()
      handleToShowKeyboard()
    } else {
      emit('handleHideAllKeyBoard')
    }
  })
}
function handleTouchstart(e: any) {
  // 阻止默认事件
  e.preventDefault()
}
// 光标位置
let cursorIndex = ref<number>(0)
const isInputFocus = ref<boolean>(false)
// 失去焦点是获取光标的位置
const getCursorIndex = (e: any, type?: string) => {
  // 删除的时候不需要获取，不然从插入光标删除时光标会到最后一位
  // if (!isDelInput.value) {
  //   if (isCustomCursorIndex.value) {
  //     return
  //   }
  // }
  if (isKeydown.value) {
    // 键盘输入的时候获取光标位置
    cursorIndex.value = e.srcElement.selectionStart
  }
  handleMaxAndMin()
}
// 失去焦点
const inputBlur = (e: any) => {
  isInputFocus.value = false
  // getCursorIndex(e, 'inputBlur')
  cursorIndex.value = e.srcElement.selectionStart
  handleMaxAndMin()
  nextTick(() => {
    showSelectList.value = false // 下拉框新增了点击取消默认事件，input没有失去焦点，所以这里失去焦点后就隐藏
    if ((props.min || props.min == 0) && Number(inputValue.value) < props.min) {
      emit('update:modelValue', props.min.toString())
    }
  })
  if (props.keyboardOption.alwaysShow) {
    // 一直显示键盘并且英文键盘显示
    let ele: any = document.querySelector('#keyboardEnglish')
    if (ele) {
      // 用于判断显示英文键盘移到下一个输入框后，也显示英文键盘
      localStorage.setItem('isShowEnglishKeyboard', 'true')
      handleToShowKeyboard('showEnglishKeyboard') // 显示英文键盘
    }
  }
}
const handleMaxAndMin = () => {
  // 判断最大值
  // 输入的值大于最大值后，自动修改为最大值
  nextTick(() => {
    if ((props.max || props.max == 0) && Number(inputValue.value) > props.max) {
      emit('update:modelValue', props.max.toString())
    }
  })
}
// 获取焦点，显示键盘---键盘模式获取焦点不显示键盘，点击显示键盘的图标才显示
let selecttype = ref<string>('') // 用于判断是否是下拉框
let isCustomCursorIndex = ref<boolean>(false) // 是否手动修改了cursorIndex
const inputFocus = (e?: any, type?: string) => {
  selecttype.value = props.selecttype
  isInputFocus.value = true
  setTimeout(() => {
    // 先让点击执行
    if (selecttype.value && type != 'click') {
      // tab键切换展开下拉框
      showSelectList.value = true
      handleSelectViewSelected()
    }
  }, 200)
  if (e) {
    nextTick(() => {
      if (props.toSelectValue) {
        e?.target?.select() // 获取到焦点选中全部内容
      }
    })
    cursorIndex.value = e.srcElement?.selectionStart
    let strLen = inputValue.value && inputValue.value.length
    isCustomCursorIndex.value = cursorIndex.value != strLen
    if (
      !props.keyboardOption.alwaysShow &&
      (props.isshowKeyboard || props.notShowIconNeedKeyboard) &&
      (software.softwareType == 1 || props.keyboardOption.showSettingPage) &&
      canShowKeyboard.value &&
      props.focusToShowKeyboard
    ) {
      showkeyboard.value = true
      handleToShowKeyboard()
    } else if (props.keyboardOption.alwaysShow) {
      // 一直显示
      // 打开的英文键盘
      nextTick(() => {
        let isShowEnglishKeyboard = localStorage.getItem(
          'isShowEnglishKeyboard'
        )
        if (isShowEnglishKeyboard == 'true') {
          // showkeyboard.value = true
          handleToShowKeyboard('showEnglishKeyboard')
          localStorage.removeItem('isShowEnglishKeyboard')
        } else if (canShowKeyboard.value) {
          // showkeyboard.value = true
          handleToShowKeyboard()
        }
      })
    }
  }
}
// 显示键盘类型
const handleToShowKeyboard = (type?: string) => {
  if (props.onlyShowKeyboard || props.keyboardOption.alwaysShow) {
    // 快捷键页面只显示键盘
    showkeyboard.value = true
  }
  nextTick(() => {
    if (!type) {
      if (props.keyboardOption.showType == 'showAll') {
        keyboard.value?.toShowAll()
      }
      // 显示数字键盘
      if (props.keyboardOption.showType == 'num') {
        keyboard.value?.toShowNumKeycode()
      }
    }
    // 显示英文键盘
    if (
      props.keyboardOption.showType == 'english' ||
      type == 'showEnglishKeyboard'
    ) {
      keyboard.value?.toShowEnglishKeycode()
      emit('handleHideAllKeyBoard', 'num')
    }
  })
}

// 处理光标定位输入
function dealKeyboardValue(value: string) {
  let selected = isTextSelected(props.id, 'iview')
  if (selected) {
    // 内容全选的先清空
    inputValue.value = ''
    emit('update:modelValue', '')
  }
  nextTick(() => {
    if (!props.onlyShowKeyboard) {
      selectInput && selectInput.value.focus()
      let strLen = inputValue.value.length
      if (cursorIndex.value >= 0 && cursorIndex.value !== strLen) {
        emit(
          'update:modelValue',
          inputValue.value.slice(0, cursorIndex.value) +
            value +
            inputValue.value.slice(cursorIndex.value)
        )
      } else {
        emit('update:modelValue', inputValue.value + value)
      }
      nextTick(() => {
        cursorIndex.value += value.toString().length
        let ele: any = document.querySelector(`#${props.id}>.ivu-input`)
        if (ele) {
          ele.selectionStart = cursorIndex.value
          ele.selectionEnd = cursorIndex.value
        }
      })
    } else {
      // 快捷键输入
      emit('handlerKeyDown', value)
    }
  })
}
let isDelInput = ref(false) // 是否是删除事件
// 数字键盘
function numkeycodeHandle(item: any) {
  isDelInput.value = false
  isKeydown.value = false
  if (['del', 'comfirm', 'search', 'hide'].indexOf(item.value) == -1) {
    dealKeyboardValue(item.value)
  } else {
    switch (item.value) {
      case 'del':
        isDelInput.value = true
        delInput()
        break
      case 'comfirm':
        handleComfirmSearch('comfirm')
        break
      case 'search':
        handleComfirmSearch('search')
        break
      case 'hide': // 隐藏键盘
        toHideKeyboard()
        break
    }
  }
}
// 英文键盘
const englishkeycodeHandle = (item: any, isuppercase: string) => {
  isDelInput.value = false
  isKeydown.value = false
  let value = item[isuppercase]
  dealKeyboardValue(value)
}
function handleComfirmSearch(type: string) {
  // 一直显示的键盘不用关闭---页面控制的键盘不关闭
  if (!props.keyboardOption.alwaysShow) {
    showkeyboard.value = false
  }
  emit('comfirmSearch', type)
}
// 长按删除
const timer = ref<any>(0)
function handleLongPress(type: string, isLongPress: boolean) {
  if (isLongPress) {
    timer.value = setInterval(() => {
      delInput()
      if (!inputValue.value.trim()) {
        clearInterval(timer.value)
      }
    }, 50)
  } else {
    clearInterval(timer.value)
  }
}
// 删除
function delInput() {
  if (!props.onlyShowKeyboard) {
    let strLen = inputValue.value.length
    if (cursorIndex.value > 0 && cursorIndex.value !== strLen) {
      // 从插入光标开始删除元素
      cursorIndex.value -= 1
      let index = cursorIndex.value
      emit(
        'update:modelValue',
        inputValue.value.replace(inputValue.value[index], '')
      )
    } else {
      if (cursorIndex.value == 0) return // 删掉第一个后不需要从最后开始删除了
      emit(
        'update:modelValue',
        inputValue.value.substr(0, inputValue.value.length - 1)
      )
      cursorIndex.value -= 1
    }
    if (!strLen || cursorIndex.value === strLen) {
      // 插入光标位置重置
      emit(
        'update:modelValue',
        inputValue.value.substr(0, inputValue.value.length - 1)
      )
      cursorIndex.value = strLen - 1
    }
    nextTick(() => {
      let ele: any = document.querySelector(`#${props.id}>.ivu-input`)
      if (ele) {
        ele.selectionStart = cursorIndex.value
        ele.selectionEnd = cursorIndex.value
      }
    })
  } else {
    // 快捷键输入
    emit('handlerKeyDown', 'delete')
  }
}
// 获取焦点
const toFocus = () => {
  selectInput.value?.focus()
  isInputFocus.value = true
  // props.pageType == 'login' && inputFocus(true)
}
// 失去焦点
const toBlur = () => {
  selectInput.value?.blur()
  isInputFocus.value = false
}

// 隐藏键盘
const toHideKeyBoard = (type: string) => {
  if (type == 'All') {
    keyboard.value?.toHideAll()
    showkeyboard.value = false
  } else if (type == 'num') {
    keyboard.value?.toShowEnglishKeycode()
  } else {
    keyboard.value?.toShowNumKeycode()
  }
}
// 是否能显示键盘
let canShowKeyboard = ref<boolean>(true) // 是否能显示键盘，有些页面隐藏后需要再次点击才出现，获取到焦点不出现
const handleCanShowKeyboard = (canShowKeyboardFlag: boolean) => {
  canShowKeyboard.value = canShowKeyboardFlag
}

// 键盘切换
const toggleKeyCode = (type: string) => {
  emit('toggleKeyCode', type)
}

defineExpose({
  toFocus,
  toBlur,
  isInputFocus,
  showSelectView,
  hideSelectView,
  handleToShowKeyboard,
  handleScroll,
  handleKeydown,
  toHideKeyBoard,
  handleCanShowKeyboard,
  inputFocus
})
</script>
<style lang="less" scoped>
.select {
  position: relative;
  display: flex;
  align-items: center;
  :deep(.ivu-input:focus) {
    box-shadow: none;
  }
  &-input {
    cursor: pointer;
    :deep(.ivu-input) {
      width: 100% !important;
      height: 100% !important;
      font-size: inherit;
      background: var(--selectInput-bg);
      color: var(--selectInput-textcolor);
      border: 1px solid var(--selectInput-bordercolor);
      padding-left: 20px;
      &::-webkit-input-placeholder {
        color: var(--sales-changeInfo-input-color);
      }
      &:focus {
        border: 1px solid var(--theme-color);
      }
    }
    :deep(.ivu-input-icon) {
      font-size: 24px;
      height: 56px;
      line-height: 56px;
    }
  }
  &-list {
    z-index: 99;
    position: absolute;
    left: 0;
    top: 56px;
    max-height: 168px;
    overflow-y: auto;
    border-bottom: 1px solid var(--selectInput-list-border-color);
    border-left: 1px solid var(--selectInput-list-border-color);
    border-right: 1px solid var(--selectInput-list-border-color);
    background: var(--selectInput-list-bg);
    border-radius: 0 0 4px 4px;
    box-shadow: 0px 5px 15px 0px rgba(163, 172, 191, 0.16);
    &-option {
      height: 56px;
      line-height: 56px;
      padding: 0 20px;
      font-size: 20px;
      color: var(--selectInput-list-textcolor);
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &-option:hover,
    .selectActiveItem {
      background: var(--selectInput-list-option-hoverbg);
      color: var(--selectInput-list-option-hovertextcolor);
    }
  }
  .showkeyboard {
    cursor: pointer;
    margin-left: 40px;
    .icon-ic_keyboard_expand {
      font-size: 48px;
      color: #a0a6b6;
      display: inline-block;
      transition: all 0.3s;
    }
  }
  &-del {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background: var(--sales-delicon-bg);
    border-radius: 50%;
    cursor: pointer;
    em {
      font-size: 12px;
    }
  }
  &-hotkey {
    font-size: 20px;
    width: 24px;
  }
  .handle-item {
    position: absolute;
    top: 50%;
    right: -110px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }
}

.selectInput,
.selectsearch,
.selectchangePassword,
.selectaddGood,
.selectsalesmanAuth,
.selectsalesman {
  .select-input {
    display: flex;
    align-items: center;
    :deep(.ivu-input) {
      border: none;
      box-shadow: none;
      outline: none;
      &:disabled {
        background-color: transparent;
      }
    }
    :deep(.ivu-input-suffix) {
      top: 6px;
      .ivu-icon {
        font-size: 18px;
      }
    }
  }
}

.selectlogin {
  .select-input {
    :deep(.ivu-input) {
      /*padding-left: 0;*/
    }
  }
  .search-keyboard {
    position: absolute;
    top: 24px;
    left: 475px;
    z-index: 10;
  }
}
.selectpay {
  position: relative;
  .search-keyboard {
    position: fixed;
    right: 40px;
    bottom: 46px;
    width: 522px;
  }
  // .select-input {
  //   :deep(.ivu-input) {
  //     background-color: var(--bg-scan-pay);
  //   }
  // }
}

.noPadding,
.selectsearch,
.selectsalesma,
.selectsalesIndex {
  .select-input {
    :deep(.ivu-input) {
      padding-left: 0;
    }
  }
}

.selectsearchComponent {
  position: relative;
  .showkeyboard {
    position: absolute;
    top: 50%;
    right: -224px;
    transform: translateY(-50%);
  }
}
.selectchangePassword {
  :deep(.ivu-input-suffix) {
    top: 0 !important;
    .ivu-icon {
      font-size: 22px !important;
    }
  }
}
.memberPay {
  .handle-item {
    right: -80px !important;
    .showkeyboard {
      margin-left: 0;
    }
  }
}
</style>