<template>
  <div v-if="['success'].includes(status)">
    <div>
      <!-- <Navbar title="出国劳务" /> -->
      <div class="px-15 pt-10 pb-100">
        <van-image
          :src="detailData.jobUrlsAfterConvert[0]"
          class="w-full aspect-[345/154] rounded-md overflow-hidden object-cover"
          fit="cover"
        />
        <div class="flex items-center mt-10 justify-between">
          <span class="text-base text-black-3 font-semibold">{{
            detailData.jobTitle
          }}</span>
          <span class="text-xl font-semibold text-[#FF3D00] shrink"
            >{{ detailData.salaryCap }}-{{ detailData.salaryFloor
            }}{{ detailData.salaryUnit }}</span
          >
        </div>
        <div
          class="flex items-center flex-wrap text-sm mt-5 gap-5 content-start"
        >
          <span
            v-for="item in lableList"
            :key="item"
            class="bg-[#FFF5ED] text-[#555D6C] h-18 px-3 flex items-center justify-center"
            >{{ item }}</span
          >
        </div>
        <div class="mt-15 text-xl font-semibold text-black-3">职位详情</div>
        <div
          v-html="detailData.jobContent?.content"
          class="mt-10 text-black-3 text-base"
        ></div>
      </div>
      <div>
        <div
          class="h-60 fixed bottom-0 bg-white left-0 right-0 flex items-center justify-center border-t space-x-10 px-20"
        >
          <van-button
            class="w-full"
            type="primary"
            color="#FD9A00"
            @click="handleBook"
            >立即投递
          </van-button>
        </div>
        <div class="van-safe-area-bottom"></div>
      </div>
    </div>
    <van-popup
      v-model:show="showBookModal"
      style="width: 300px; padding: 30px 20px"
      round
    >
      <div class="text-xl text-black-9 mb-15">请填写您的报名信息</div>
      <van-field
        label-width="50px"
        v-model="formValue.bookName"
        label="姓名"
        placeholder="请输入您的姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        label-width="50px"
        v-model="formValue.bookMobile"
        label="手机号"
        type="digit"
        maxlength="12"
        placeholder="请输入您的手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <div
        class="h-60 mt-10 flex items-center bg-white justify-center space-x-10"
      >
        <van-button
          class="w-full"
          type="primary"
          plain
          color="#BFC8DB"
          @click="showBookModal = false"
          >取消</van-button
        >
        <van-button
          class="w-full"
          type="primary"
          color="#FD9A00"
          @click="handleBookConfirm"
          :loading="submitBtnLoading"
          >立即报名</van-button
        >
      </div>
    </van-popup>
  </div>
  <div v-else></div>
</template>

<script setup>
const id = useRouteParam("id");

const { data: detailData, status } = await useMyFetch(
  `website/basic/jobProject/detail?id=${id.value}`
);

const lableList = computed(() => {
  const tmpList = detailData.value.jobLabel?.split("&") ?? [];
  return [
    `招聘人数：${detailData.value.jobPeople}人`,
    ...tmpList,
    `${detailData.value.jobArea}`,
  ];
});

const formValue = ref({
  bookName: "",
  bookMobile: "",
});
const showBookModal = ref(false);
function handleBook() {
  showBookModal.value = true;
}

const submitBtnLoading = ref(false);
function handleBookConfirm() {
  submitBtnLoading.value = true;
  request("website/web/saveBookInfo", {
    method: "post",
    body: {
      tourBookInfoDto: {
        ...formValue.value,
        projectId: id.value,
        type: "2",
      },
    },
  })
    .then((res) => {
      submitBtnLoading.value = false;
      if (res.errorCode === "NO-ERROR") {
        showReserveModal.value = false;
        showToast("预定成功");
      }
    })
    .finally(() => {
      submitBtnLoading.value = false;
    });
}

useSeoMeta({
  title: "出国劳务",
});
</script>

<style lang="scss" scoped></style>
