<script setup lang='ts'>
import { VolunteerApi } from '@/api/api/volunteerHome';
import { showToast } from 'vant';

const route = useRoute()
const router = useRouter()


export type infoDetailType = {
  name: string,
  phone: string,
  identity: string,
  description: string,
  type: string
}

const infoDetail = ref({
  name: '',
  phone: '',
  identity: '',
  description: '',
  type: 'activity',
  title: route.params.title
} as infoDetailType)

const submit = async () => {
  if (infoDetail.value.name.length == 0) {
    showToast('预约姓名不能为空！')
    return
  }

  if (infoDetail.value.phone.length == 0) {
    showToast('预约联系电话不能为空！')
    return
  }

  if (!/^((1[3-9]\d{9})|(09\d{8}))$/.test(infoDetail.value.phone)) {
    showToast('请输入正确的联系电话！')
    return
  }


  if (infoDetail.value.identity.length == 0) {
    showToast('预约身份证号不能为空！')
    return
  }

  if (!/^(^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x))$/.test(infoDetail.value.identity)) {
    showToast('请输入正确的身份证号！')
    return
  }

  const res: any = await VolunteerApi.saveApplyAPI(infoDetail.value)
  if (res.code == 0) {
    showToast('预约成功')
    router.back()
  } else {
    showToast(res.msg)
  }


}

</script>

<template>
  <div class='info-box'>
    <div class="page-title">
      <img src="@/assets/images/cicle.png" alt="">
      <div class="title-content">活动预约</div>
    </div>
    <div class="title">{{ route.params.title }}</div>
    <div class="form">

      <div class="input-item">
        <span style="color: red;">*</span>
        <div class="label">姓名：</div><input type="text" v-model="infoDetail.name" placeholder="请输入内容">
      </div>
      <div class="input-item">
        <span style="color: red;">*</span>
        <div class="label">联系电话：</div><input type="text" v-model="infoDetail.phone" placeholder="请输入内容">
      </div>
      <div class="input-item">
        <span style="color: red;">*</span>
        <div class="label">身份证号：</div><input type="text" v-model="infoDetail.identity" placeholder="请输入内容">
      </div>
      <div class="input-item">
        <!-- <span style="color: red;">*</span> -->
        <div class="label">预约说明：</div><textarea cols="30" rows="10" v-model="infoDetail.description"
          placeholder="请输入您想参加的活动或其他需求"></textarea>
      </div>
    </div>
    <div class="commit-box">
      <div class="tips"> 提交后，请等待工作人员与您取得联系</div>
      <div class="commit-btn" @click="submit()">提交</div>
    </div>
  </div>
</template>

<style lang='less' scoped>
* {
  box-sizing: border-box;
}

.info-box {
  width: 100%;
  height: 100vh;
  padding: 20px;
  background: #F7F3E8;
  overflow: auto;


  .page-title {
    font-size: 1.4em;
    color: #333333;
    font-weight: bold;
    position: relative;
    // line-height: 1.6em;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;

    img {
      position: absolute;
      left: 0;
      top: 0;
      height: 1.6em;
    }

    .title-content {
      // position: absolute;
      position: relative;
      left: 0;
      top: 0;
      height: 1.4em;
      z-index: 2;
      line-height: 1.6em;
      color: #333333;
      margin-top: 1%;
      font-family: SourceHanSansCN-Bold;

    }

  }

  .title {
    color: #9D4F0B;
    font-family: 'SourceHanSansCN-Medium';
    margin-top: 8%;
    margin-bottom: 5%;
    font-size: 1.1em;
  }

  .form {
    width: 100%;

    .input-item {
      width: 100%;
      display: flex;
      margin: 10px auto;
      height: 50px;

      span {
        margin-right: 10px;
      }

      .label {
        width: 30%;
        text-align: left;
        color: #333333;
      }

      input {
        width: 80%;
        height: 70%;
        border: 1px solid #9D4F0B;
        border-radius: 5px;
        padding: 0 10px;
        background: #FFFDF6;
        color: #88866F;
        font-size: 0.9em;
      }

      textarea {
        width: 80%;
        height: 30vh;
        border: 1px solid #9D4F0B;
        border-radius: 5px;
        padding: 10px;
        background: #FFFDF6;
        color: #88866F;
        font-size: 0.9em;
      }
    }

  }

  .commit-box {
    position: fixed;
    bottom: 0;
    width: calc(100% - 40px);
    max-width: calc(500px - 40px);

    .tips {
      color: #88866F;
      width: 100%;
      text-align: center;
    }

    .commit-btn {
      width: 100%;
      height: 60px;
      background: url(@/assets/images/onlineBg.png);
      background-size: 100% 100%;
      border-radius: 50px;
      color: white;
      font-weight: bold;
      font-size: 1.2em;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30px 0 40px 0;
    }
  }
}
</style>