<template>
  <div class="search-group">
    <el-autocomplete
      v-model="searchValue"
      :placeholder="placeholder"
      class="input-with-select"
      :value-key="valueKey"
      :fetch-suggestions="querySearchAsync"
      @select="handleSelect"
      @change="handleChange"
    >
      <template #prefix>
        <el-select v-model="selectValue" placeholder="">
          <el-option
            v-for="(item, index) in selectOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template #suffix>
        <el-icon size="25" style="cursor: pointer" @click="handleChange"><i-ep-Search /></el-icon>
      </template>
    </el-autocomplete>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  valueKey: {
    type: String,
    default: 'JobName'
  },
  placeholder: {
    type: String,
    default: '请输入搜索关键字'
  },
  selectOptions: {
    type: Array,
    default: () => [
      { label: '找工作', value: 1 },
      { label: '找企业', value: 2 }
    ]
  } as any,
  list: {
    type: Array,
    default: () => []
  } as any
})

let timeout: ReturnType<typeof setTimeout>
const searchValue = ref()
const selectValue = ref(1)

const emits = defineEmits(['searchChange', 'querySearchAsync'])

const querySearchAsync = async (queryString: string, cb: (arg: any) => void) => {
  emits('querySearchAsync', searchValue.value)
  clearTimeout(timeout)
  timeout = setTimeout(() => {
    cb(props.list)
  }, 100)
}

const handleSelect = (item: Record<string, any>) => {
  emits('searchChange', item.JobName)
}
const handleChange = () => {
  emits('searchChange', searchValue.value)
}

defineExpose({ searchValue })
</script>

<style lang="scss" scoped>
.search-group {
  width: 920px;
  height: 62px;

  :deep(.el-autocomplete) {
    height: 100%;
    width: 100%;
    .el-input {
      height: 100%;
      .el-input__wrapper {
        border-radius: 29px;
        padding: 0 46px 0 35px;
        .el-select {
          width: 86px;
          .el-input__wrapper {
            border-radius: 0;
            padding: 0;
          }
        }
      }
    }
  }

  :deep(.input-with-select .el-input-group__prepend) {
    width: 70px;
    height: 100%;
    padding-left: 40px;
    border: none;
    border-bottom-left-radius: 29px;
    border-top-left-radius: 29px;
    background-color: #fff;
    font-weight: 500;
    font-size: 16px;
    line-height: 60px;
    font-family: Source Han Sans CN;
    color: #666;

    .el-input__wrapper {
      box-shadow: none;

      &.is-focus {
        box-shadow: none !important;
      }

      &:hover {
        box-shadow: none !important;
      }
    }

    .el-select {
      border: 0;
    }
  }

  :deep(.input-with-select > .el-input__wrapper) {
    height: 59px;
  }

  :deep(.el-input.is-focus .el-input__wrapper) {
    box-shadow: none !important;
    outline: 0;
  }

  :deep(.el-input__wrapper) {
    box-shadow: none;
    padding: 0 11px;
    margin-top: 1px;

    &.is-focus {
      box-shadow: none !important;
      outline: 0;
    }

    &:hover {
      box-shadow: none !important;
    }
  }

  :deep(.el-input-group__append) {
    padding-right: 45px;
    border: none;
    border-bottom-right-radius: 29px;
    border-top-right-radius: 29px;
    background-color: #fff;
  }
}
</style>
