<template>
  <div class="mianBox">
    <img src="../../assets/image/title.png" alt="" class="title" />
    <template v-if="isLogin">
      <div class="gjsh">第20届上海国际社会</div>
      <div class="ggaq">公共安全展览会</div>
      <div class="ggaqEl">The 20th Shanghai CPSE Expo</div>
      <div class="infoBox">
        <div class="titleInfo"><span></span>预约信息</div>
        <van-steps
          direction="vertical"
          :active="3"
          active-color="#FFFFFF"
          inactive-color="#FFFFFF"
          active-icon="stop"
          inactive-icon="stop"
        >
          <van-step> 预约人：{{infoForm.name || ''}} </van-step>
          <van-step> 预约人联系方式：{{infoForm.phone || ''}} </van-step>
          <van-step> 访问日期：{{infoForm.dateOfVisit || ''}} </van-step>
          <van-step> 随行人数：{{infoForm.accompany && infoForm.accompany === 1 ?'1-3人':infoForm.accompany === 2 ? '3-7人': '7人以上'  || ''}} </van-step>
          <van-step> 接待人：{{infoForm.userName || ''}} </van-step>
          <van-step> 接待人联系方式：{{infoForm.userPhone || ''}} </van-step>
          <van-step>
            展会地址：上海世博会1号馆 展位号E10
            <span>(上海浦东新区国展路1099号)</span>
          </van-step>
        </van-steps>
      </div>
      <van-button
        plain
        round
        class="infoBtn"
        type="info"
        @click="callPhone()"
        >联系接待人</van-button
      >
    </template>
    <template v-else>
      <div class="ckyyxx">查看预约信息</div>
      <div class="kjdl">手机快捷登陆查看预约信息</div>
      <div class="formBox">
        <van-form @submit="onSubmit" validate-trigger="onSubmit" :submit-on-enter="false" ref="formT" :show-error="false">
            <van-field v-model="form.phone" name="手机" type="tel" placeholder="请输入你的手机号" :rules="[{ required:true, pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号' }]"/>
            <van-field v-model="form.code" name="验证码" type="tel" placeholder="请输入验证码" :rules="[{ required:true, pattern: /^\d{6}$/, message: '请输入正确的验证码' }]">
            <template #button> 
                <van-loading v-if="codeLoading"  color="#1989fa" />
                <span class="hqyzm" v-else @click="getcode">{{showcode?'获取验证码':timecode + 's'}}</span> 
            </template>
            </van-field>
            <div style="margin: 16px;">
            <van-button plain round block type="info" native-type="submit">立即查看</van-button>
            </div>
        </van-form>
        </div>
    </template>
  </div>
</template>

<script>
import { Notify } from 'vant';
export default {
  data() {
    return {
      showSuccessBox: false,
      isLogin: false,
      showcode:true,
      timecode:60,
      codeInter:null,
      codeLoading:false,
      form:{
          phone:'',
          code:''
      },
      infoForm:{

      }
    };
  },
  mounted(){
    if(this.$route.query.name){
      this.infoForm = this.$route.query
      this.isLogin = true
    }
  },
  destroyed(){
    this.isLogin = false;
  },
  methods: {
    async onSubmit(values) {
      console.log('submit', values);
      let res = await this.$axios.post('/AF/listRegisterInfo' + '?' + this.$qs.stringify({
        ...this.form
      }))
      if(res.data.success){
          console.log(res.data)
        this.infoForm = res.data.data[0] || {}
        for (const key in this.form) {
          this.form[key] = "";
        }
        this.$refs.formT.resetValidation()
        this.isLogin = true;
      }
    },
    async getcode(){
      if(!this.form.phone || !/^1[345678]\d{9}$/.test(this.form.phone)) return  Notify({ type: 'primary', message: '请输入正确的手机号' });
      this.codeLoading = true
      let res = await this.$axios.get('/AF/msgTest' + '?' + this.$qs.stringify({
        phone:this.form.phone
      }))
      if(res.data.success){
        Notify({ type: 'success', message: '验证码已发送' })
        this.showcode = !this.showcode
        this.codeInter = setInterval(()=>{
          --this.timecode
          if(this.timecode <= 0 ){
             clearInterval(this.codeInter)
             this.showcode = !this.showcode
          }
        },1000)
      } else{
        Notify({ type: 'primary', message: res.message });
      }
      this.codeLoading = false
    },
    callPhone() {
        if(!this.infoForm.userPhone) return
        window.location.href = "tel://" + this.infoForm.userPhone;
    },
  },
};
</script>

<style lang="scss" scoped>
.mianBox {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/image/bg2.png");
  background-size: 100% 100%;
  font-family: PingFangSC-Medium, PingFang SC;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  .ckyyxx {
    position: absolute;
    top: 210px;
    left: 55px;
    height: 59px;
    font-size: 42px;
    font-weight: 500;
    line-height: 59px;
    letter-spacing: 1px;
  }
  .kjdl {
    position: absolute;
    left: 55px;
    top: 283px;
    height: 33px;
    font-size: 24px;
    font-weight: 400;
    line-height: 33px;
    letter-spacing: 1px;
  }
  .infoBtn {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 600px;
  }
  .van-steps {
    margin-top: 50px;
    background: transparent;
    .van-step {
      color: #fff;
      font-size: 26px;
      font-weight: 400;
      color: #ffffff;
      line-height: 37px;
      letter-spacing: 1px;
      span {
        display: block;
      }
      &::after {
        display: none;
      }
    }
  }
  .infoBox {
    position: absolute;
    top: 450px;
    left: o;
    padding: 0 50px 0 30px;
    box-sizing: border-box;
    width: 100vw;
    height: auto;
    .titleInfo {
      display: flex;
      align-items: center;
      margin-left: 27px;
      span {
        width: 10px;
        height: 40px;
        background: linear-gradient(180deg, #0016ff 0%, #c724f8 100%);
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
  .title {
    position: absolute;
    top: 54px;
    right: 58px;
    width: 110px;
    height: 55px;
  }
  .gjsh {
    position: absolute;
    top: 150px;
    left: 50px;
    height: 43px;
    font-size: 39px;
    font-weight: 400;
    line-height: 59px;
    letter-spacing: 1px;
  }
  .ggaq {
    position: absolute;
    left: 50px;
    top: 210px;
    height: 86px;
    font-size: 86px;
    font-weight: bold;
    line-height: 129px;
    letter-spacing: 1px;
  }
  .ggaqEl {
    position: absolute;
    left: 55px;
    top: 325px;
    height: 38px;
    font-size: 34px;
    font-family: ArialMT;
    line-height: 39px;
    letter-spacing: 4px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .formBox {
      position: absolute;
      top: 360px;
      left: 0;
      right: 0;
      margin: auto;
    width: 670px;
    // height: 1069px;
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 40px;
    padding: 40px;
    box-sizing: border-box;
    .van-form {
      /deep/ .van-field {
          font-size: 28px;
          padding-left: 0;
        margin-top: 25px;
        background: transparent;
        border: none;
        border-bottom: 1px solid #FFF;
        .van-field__label {
          color: #fff;
        }
        &::after {
          display: none;
        }
        input {
          color: #fff;
        }
        .van-field__button {
          border-left: 1px solid #d8d8d8;
        }
        .hqyzm {
          font-size: 24px;
          font-weight: 400;
          color: #ffc27b;
          line-height: 33px;
        }
      }
      .infoT {
        font-size: 24px;
        font-weight: 300;
        color: #ffffff;
        line-height: 33px;
        text-align: right;
        width: 100%;
        display: block;
        margin-top: 16px;
      }
      .van-button{
          margin-top: 120px;
      }
    }
  }
}
</style>