<template>
  <div class="search d-flex align-center">
    <div style="position: relative;">
      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click.stop="drawer = !drawer">
        <span>{{ text }}</span>
        <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
      </div>
      <jobTypeCard class="jobTypeCardBox" v-if="drawer" @click.stop=""></jobTypeCard>
    </div>
    <v-text-field
      v-model="value"
      placeholder="搜索职位/公司"
      color="primary"
      variant="plain"
      density="compact"
      :hide-details="true"
      class="px-2"
      style="height: 100%; line-height: 100%;"
    ></v-text-field>
    <div class="searchBtn" @click="handleSearch">搜索</div>
  </div>
</template>

<script setup>
import { useSharedState } from '@/store/sharedState'
import jobTypeCard from '@/components/jobTypeCard'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
defineOptions({ name:'common-components-headSearch'})
const route = useRoute(); const router = useRouter()
const emits = defineEmits(['handleSearch'])// 定义一个或多个自定义事件

const text = ref('职位类型')
const value = ref('')
let drawer = ref(false)
// 点击外部关闭职位下拉
const sharedState = useSharedState()
// 监听 layoutClickCount 变化
watch(() => sharedState.layoutClickCount, () => {
  if (drawer.value) drawer.value = false
});

const handleSearch = () => {
  const path = '/recruit/position'
  if (path === route.path) emits('handleSearch', {})
  else router.push({ path: '/recruit/position',query: {} })
}

</script>

<style lang="scss" scoped>
.search {
  height: 50px;
  width: 800px;
  margin: 0 auto;
  border: 2px solid var(--v-primary-base);
  border-radius: 5px;
  .jobBox {
    cursor: pointer;
    &:hover {
      color: var(--v-primary-base);
    }
    span {
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .drawer {
    color: var(--v-primary-base);
  }
  .searchBtn {
    width: 100px;
    height: 50px; line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-color: var(--v-primary-base);
    cursor: pointer;
  }
  .jobTypeCardBox {
    position: absolute;
    top: 42px;
    left: 0;
  }
}
</style>