<script setup lang='ts'>
import { useStore } from '@/stores';

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

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

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

const submit = () => {

}

</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 @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="请输入内容，不超过6个字">
        </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;


  .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: 5vh;
      background: #FFFDF6;
      border: 1px solid #9D4F0B;
      border-radius: 50px;
      color: #88866F;
    }

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

}
</style>