<template>
  <div class="search-group">
    <el-input
      v-model="searchValue"
      :placeholder="placeholder"
      class="input-with-select"
      @change="handleSearch"
    >
      <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="handleSearch"><i-ep-Search /></el-icon>
      </template>
    </el-input>
  </div>
</template>

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

const searchValue = ref()
const selectValue = ref(1)

const emits = defineEmits(['searchChange'])
const handleSearch = () => {
  // console.log(searchValue.value)
  emits('searchChange', searchValue.value)
}

defineExpose({ searchValue })
</script>

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

    :deep(.el-input__wrapper) {
      border-radius: 29px;
      padding: 0 46px 0 35px;
    }
  }
  .el-select {
    width: 86px;
    :deep(.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__wrapper) {
    box-shadow: none;
    padding: 0 11px;
    margin-top: 1px;

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

    &: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>
