<!-- 门墩儿猎寻服务 -->
<template>
  <div class="headhunting">
    <div class="headhunting-title">高端人才猎寻</div>
    <div class="headhunting-guidance" @click="showDialog = true">免费咨询</div>
    <!-- <div class="headhunting-content pa-8 py-12">
      <formItem ref="formRef"></formItem>
      <div class="text-center">
        <v-btn color="#474747" rounded class="buttons" @click="handleSubmit">提交</v-btn>
      </div>
    </div> -->
    <CtDialog
      :visible="showDialog"
      :widthType="2"
      titleClass="text-h6"
      title="门墩儿猎寻服务咨询"
      @submit="handleSubmit"
      @close="showDialog = false"
    >
      <formItem ref="formRef"></formItem>
    </CtDialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import formItem from './components/form.vue'
import Curtain from '@/plugins/curtain'
import { huntSubmit } from '@/api/headhunting'
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
defineOptions({ name: 'headhunting-index'})

const showDialog = ref(false)

// 提交
const formRef = ref()
const handleSubmit = async () => {
  try {
    const obj = await formRef.value.getQuery()
    if (!obj) return
    const params = JSON.parse(JSON.stringify(obj))
    await huntSubmit(params)
    showDialog.value = false
    Curtain('message', {
      message: t('headhunting.submitSuccess'),
      name: 'submit',
      iconFontSize: 300
    })
  } catch (error) {
    console.error('error', error)
  }
}

</script>

<style scoped lang="scss">
.headhunting {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://minio.citupro.com/dev/menduner/%E9%97%A8%E5%A2%A9%E7%8C%8E%E5%AF%BB%E6%9C%8D%E5%8A%A1%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87.png?Content-Disposition=attachment%3B%20filename%3D%22menduner%2F%E9%97%A8%E5%A2%A9%E7%8C%8E%E5%AF%BB%E6%9C%8D%E5%8A%A1%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87.png%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=root%2F20240807%2F%2Fs3%2Faws4_request&X-Amz-Date=20240807T073428Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=307df5b45d5c213484e24848de149d7d2eff36b044845ed7abd7fdb5444b700b');
  background-size: cover; // center // cover
  // background-position: center;
}
.headhunting-title {
  position: absolute;
  top: 45px;
  left: 100px;
  font-size: 24px;
  font-weight: bold;
}
.headhunting-guidance {
  position: absolute;
  top: 45px;
  right: 200px;
  font-size: 18px;
  // color: var(--v-error-base);
  color: #000;
  cursor: pointer;
  text-decoration: underline;
}
.headhunting-content {
  position: absolute;
  bottom: 30px;
  left: 250px;
  width: 350px;
}
</style>
