<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>
      <!--下拉框數(shù)據(jù)-->
      <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 // 區(qū)分頁面
  keyboardOption?: any // 鍵盤參數(shù)
  isInput?: boolean // 是否只是input
  inputType?: string // input 類型
  selectList?: Array<any> // 下拉框數(shù)據(jù)
  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數(shù)字  decimal小數(shù)  decimal_2兩位小數(shù) forbidChinese禁止輸入中文 customize任意（默認）
  dataRule?: any // 自定義規(guī)則
  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
})
// 下拉框選擇數(shù)據(jù)后觸發(fā)
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) // 按下鼠標
  // 一直顯示鍵盤，不用區(qū)分鍵盤和觸屏模式
  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綁定數(shù)據(jù)
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時也會觸發(fā)，這時需要收起下拉框
      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)
}
// 下拉框元素滾動到可視區(qū)
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++
  }
  // 使元素滾動到可視區(qū)
  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() // 先關閉，只出現(xiàn)一個提示
    } catch (e) {
      console.log(e)
    }
    Notice.error({
      title: '提示',
      desc: '輸入框已禁用'
    })
    return // 輸入框禁用時荣刑，不出現(xiàn)鍵盤
  }
  let showAllKeyboardEle = document.querySelector('.showAll_keyboard') // 全鍵盤
  let keyboardNumEle = document.querySelector('.keyboard-num') // 數(shù)字鍵盤
  if (props.needShowAllKeyboard) {
    if (!showAllKeyboardEle) {
      // 顯示的數(shù)字鍵盤---點擊后顯示全鍵盤
      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(() => {
    // 先讓點擊執(zhí)行
    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()
      }
      // 顯示數(shù)字鍵盤
      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) // 是否是刪除事件
// 數(shù)字鍵盤
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) // 是否能顯示鍵盤，有些頁面隱藏后需要再次點擊才出現(xiàn)恬试，獲取到焦點不出現(xiàn)
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>