<script setup lang='ts'>
import { sceneBookingApi } from '@/api/api/sceneBooking';
import { useStore } from '@/stores';
import { showToast } from 'vant';
import router from '@/router';

const store = useStore()
const personList = ref([
  {
    bookDate: store.selectDate,
    bookId:store.selectId,
    // name: 'xxxx',
    // num: '421083199504071212',
    // phone: '18702025050',
    name: '',
    num: '',
    phone: '',
    time: store.selectTime,
    type: '身份证'
  }
])

onMounted(()=>{
  if(!store.selectId) router.replace('/booking/selectTime')
})

const deleteFu = (index: number) => {
  personList.value.splice(index, 1)
}

const addPerson = () => {
  personList.value.push({
    bookDate: store.selectDate,
    bookId:'',
    // name: 'xxxx',
    // num: '421083199504071212',
    // phone: '18702025050',
    name: '',
    num: '',
    phone: '',
    time: store.selectTime,
    type: '身份证'
  })
}

const submit = async() => {

  
  let flag1 =false
  let flag2 =false
  let flag3 =false
  let flag4 =false

  const data =personList.value.map(v=>({
    ...v,
    name:v.name.trim()
  }))

  data.forEach((v:any)=>{
    
    console.log('ppp',v.bookDate.split(' '));
    

    if(v.bookDate) v.bookDate=v.bookDate.split(' ')[0]

    const {name,phone,num}=v

    if(name==='') return  flag1=true 
    if(name.length>10 )  return  flag4=true 

    if(!/^1[3456789]\d{9}$/.test(phone)) return flag2=true

    const numTest =/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    if(!numTest.test(num)) return flag3=true
    
  },[])

  if(flag1) return showToast('参观人姓名不能为空')
  if(flag4) return showToast('参观人姓名不能超过10个字')
  if(flag2) return showToast('参观人电话格式错误')
  if(flag3) return showToast('身份证或社保卡格式错误')
  

  const res:any =await sceneBookingApi.submitBookingAPI(data)
  if(res.code === 0){
    showToast('预约成功')
    router.back()
  }else {
    showToast('预约失败')
  }
}

</script>

<template>
  <div class='input-box'>
    <div class="input-card" v-for="(item, index) in personList" :key="index">
      <div class="top">
        <div>{{ '参观日期：' + item.bookDate.slice(0, 10) + ' ' + item.time }}</div>
        <img v-if="index!==0" @click="deleteFu(index)" src="@/assets/images/delect.png" alt="">
      </div>
      <div class="content">
        <div>
          <div class="label">参观人姓名：</div><input type="text" v-model="item.name" placeholder="请输入内容，不超过10个字">
        </div>
        <div>
          <div class="label">参观人电话：</div><input type="text" v-model="item.phone" placeholder="请输入11个数字">
        </div>
        <div>
          <div class="label">证件号：</div><van-radio-group v-model="item.type" direction="horizontal" shape="dot">
            <van-radio name="身份证" checked-color="#9D4F0B">身份证</van-radio>
            <van-radio name="社保卡" checked-color="#9D4F0B">社保卡</van-radio>
          </van-radio-group>
        </div>
        <div>
          <div class="label"></div><input type="text" v-model="item.num" placeholder="请输入18位证件编码">
        </div>


      </div>
    </div>
    <div class="btns">
      <div class="add" @click="addPerson()">添加参观人</div>
      <div class="submit" @click="submit()">提交</div>
    </div>
  </div>

</template>

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

.input-box {
  width: 100%;
  min-height: 100%;
  background: #F7F3E8;
  padding: 20px 10px;
  position: relative;
  max-width: 500px;
  overflow: auto;
  padding-bottom: 120px;


  .input-card {
    width: 100%;
    padding: 20px 10px;
    background: #9D4F0B;
    border-radius: 15px;
    font-family: 'SourceHanSansCN-Regular';
    margin-bottom: 20px;

    .top {
      display: flex;
      width: 100%;
      justify-content: space-between;
      color: #F7F3E8;
      margin-bottom: 15px;

      img {
        width: 25px;
      }
    }

    .content {
      padding: 20px 15px;
      background: url(@/assets/images/booking-card.png);
      background-size: 100% 100%;

      div {
        display: flex;
        height: 50px;
        align-items: center;
        color: #88866F;

        .label {
          width: 30%;
          text-align: center;
          color: #333333;
          font-family: 0.9em;
        }

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

    }

  }


  .btns {
    width: 90%;
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);

    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .add {
      width: 35%;
      height: 42px;
      background: #FFFDF6;
      border: 1px solid #9D4F0B;
      border-radius: 50px;
      color: #88866F;
    }

    .submit {
      width: 60%;
      height: 42px;
      background: url(@/assets/images/onlineBg.png);
      background-size: 100% 100%;
      // border: 1px solid #9D4F0B;
      border-radius: 50px;
      color: #F7F3E8;
    }
  }

}

@media only screen and (max-width: 400px) {
  .input-box .input-card .content div .label{
    font-size: 14px;
  }
}
@media only screen and (max-width: 350px) {
  .input-box .input-card .content div .label{
    font-size: 12px;
  }
  /deep/.van-radio__label{
    font-size: 12px;
  }
}
</style>