<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 label="找工作" value="1" />
          <el-option label="找企业" value="2" />
          <el-option label="找人才" value="3" />
        </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: '请输入搜索关键字'
  }
})

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

const emits = defineEmits(['searchChange'])
const handleSearch = () => {
  // console.log(searchValue.value)
  emits('searchChange', searchValue.value)
}
</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>
