<template>
  <div class="home">
    <div class="title">
      <div class="logo">
        <img src="../../assets/image/title.png" alt="">
      </div>
      <div class="yyInfo" @click="$router.push('/subscribe-info')">预约信息</div>
    </div>
    <div class="sh">第20届上海国际社会</div>
    <div class="gg">公共安全展览会</div>
    <div class="ggEl">The 20th Shanghai CPSE Expo</div>
    <div class="blh">暨上海国际警用及安防无人系统博览会</div>
    <div class="yqh">邀请函</div>
    <div class="yqhEl">INVITATION</div>
    <div class="ghgl">永天科技诚挚地恭候您的光临!</div>
    <van-divider dashed class="yyfs"><span>预约方式</span></van-divider>
    <div class="yyfsEl">the appointment mode</div>
    <div class="formBox">
      <van-form @submit="onSubmit" validate-trigger="onSubmit" :submit-on-enter="false" ref="formT">
        <van-field v-model="form.name" name="姓名" label="姓名*" type="text" placeholder="请输入你的姓名" :rules="[{ required:true, pattern: /^.{1,10}$/, message: '请输入姓名，不得超过10字' }]"/>
        <span class="infoT">*请留真实信息，以便商务验证和联系您</span>
        <van-field v-model="form.phone" name="手机*" label="手机" type="tel" placeholder="请输入你的手机号" :rules="[{ required:true, pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号' }]"/>
        <van-field v-model="form.smsCode" name="验证码*" label="验证码" type="tel" placeholder="请输入验证码" :rules="[{ required:true, pattern: /^\d{6}$/, message: '请输入正确的验证码' }]">
          <template #button> 
            <van-loading v-if="smsCodeLoading"  color="#1989fa" />
            <span class="hqyzm" v-else @click="getsmsCode">{{showsmsCode?'获取验证码':timesmsCode + 's'}}</span> 
          </template>
        </van-field>
        <van-field v-model="form.companyName" name="单位名称*" label="单位名称" type="text" placeholder="请输入单位名称" :rules="[{ required:true, pattern: /^.{0,50}$/, message: '内容不得超过50字' }]"/>
        <van-field v-model="form.post" name="职务" label="职务" type="text" placeholder="请输入单位职务" :rules="[{ required:false, pattern: /^.{0,30}$/, message: '内容不得超过30字' }]"/>
        <van-field readonly clickable label="省份" :value="form.sf" placeholder="选择省份" @click="showPicker = true"/>
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>

        <van-field readonly clickable name="dateOfVisit" :value="form.dateOfVisit" label="到访日期" placeholder="点击选择到访日期" @click="showTimePicker = true" :rules="[{ required:true, message: '请选择到访日期' }]"/>
        <van-popup v-model="showTimePicker" position="bottom">
          <van-datetime-picker type="datetime" @confirm="onConfirmTime" @cancel="showTimePicker = false" :min-date="minDate" :max-date="maxDate" />
        </van-popup>

        <van-field readonly clickable label="随行人数" :value="form.accompanys" placeholder="选择随行人数" validate-trigger="onSubmit" @click="showacCompany = true"/>
        <van-popup v-model="showacCompany" round position="bottom">
          <van-picker show-toolbar :columns="columns2" @cancel="showacCompany = false" @confirm="onConfirmCompany" />
        </van-popup>

        <div style="margin: 16px;">
          <van-button  plain round block type="info" native-type="submit">立即预约</van-button>
        </div>
      </van-form>
    </div>
    <van-divider dashed class="yyfs" style="margin-top:50px;"><span>活动信息</span></van-divider>
    <div class="yyfsEl">the Activity information</div>
    <div class="hdxxInfo">
      <div class="hdxxInfoLable"><span></span>时间：2021.8.11-8.13</div>
      <div class="hdxxInfoLable"><span></span>上海·世博馆<i class="boldColor">1</i> 号馆 展位号<i class="boldColor">E10</i></div>
      <div class="hdxxInfoLable"><span></span>上海浦东新区国展路1099号</div>
    </div>
    <div class="bottomBox">
      <div class="bottomBoxL">
        <div class="title1">入场须知：</div>
        <div class="title2">* 预约成功后将通过手机短信及电话回访的方式确认，请保持通话顺畅</div>
        <div class="title3">* 如有疑问请咨询 ：<br/> 电话：021-65376655<br/> 邮箱：yujia.chi@chinausky.com</div>
      </div>
      <div class="bottomBoxR">
        <div class="bottomBoxRT">FOLLOW US<br> <span>关注我们获取更多咨询</span></div>
        <img src="../../assets/image/ewm.png" alt="">
      </div>
    </div>
    <van-overlay :show="showSuccessBox">
      <div class="successBox">
        <div class="iconSuccess">
          <img src="../../assets/image/icon.png" alt="">预约成功！
        </div>
        <div class="tzxx">我们会在24小时内联系您， 请保持手机通畅。</div>
        <van-button plain round type="info" @click="showSuccessBoxC">知道了</van-button>
      </div>
    </van-overlay>
  </div>
</template>

<script>
// @ is an alias to /src
import { Notify } from 'vant';
export default {
  data() {
    return {
      form:{
        name: '',//客户姓名
        phone: '',//手机号
        smsCode: '',//短信验证码
        companyName: '',//单位名称
        post: '',//职位
        sf: '',//省份
        dateOfVisit: '',//到访日期
        accompany: '',//随行人数
        remark: '',//备注
        userId: '',//接待人ID
        userName: '',//接待人姓名
      },
      minDate: new Date(2021, 7, 11 , 0,0,0),
      maxDate: new Date(2021, 7, 13 , 23,59,59),
      showTimePicker: false,
      showacCompany: false,
      showPicker: false,
      showsmsCode:true,
      timesmsCode:60,
      showSuccessBox:false,
      smsCodeLoading:false,
      smsCodeInter:null,
      columns: [
        "北京市",
        "天津市",
        "河北省",
        "山西省",
        "内蒙古自治区",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "上海市",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "江西省",
        "山东省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "广西省",
        "海南省",
        "重庆市",
        "四川省",
        "贵州省",
        "云南省",
        "西藏自治区",
        "陕西省",
        "甘肃省",
        "青海省",
        "宁夏回族自治区",
        "新疆维吾尔自治区",
        "台湾省",
        "香港特别行政区",
        "澳门特别行政区",
      ],
      columns2: ['1-3人', '3-7人', '7人以上'],
      infoForm:{

      }
    };
  },
  // components: {
  // },
  methods:{
    showSuccessBoxC(){
      this.$router.push({
        path:'/subscribe-info',
        query:{
          ...this.form
        }
      })
      this.showSuccessBox = false
      for (const key in this.form) {
        this.form[key] = "";
      }
      this.$refs.formT.resetValidation()
    },
    async onSubmit(values) {
      console.log('submit', values);
      let res = await this.$axios.post('/AF/addRegister' + '?' +this.$qs.stringify({
        ...this.form
      }))
      if(res.data.success){
        this.showSuccessBox = true;
        this.infoForm = res.data.data
      }
    },
    async getsmsCode(){
      if(!this.form.phone || !/^1[345678]\d{9}$/.test(this.form.phone)) return  Notify({ type: 'primary', message: '请输入正确的手机号' });
      this.smsCodeLoading = 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.showsmsCode = !this.showsmsCode
        this.smsCodeInter = setInterval(()=>{
          --this.timesmsCode
          if(this.timesmsCode <= 0 ){
             clearInterval(this.smsCodeInter)
             this.showsmsCode = !this.showsmsCode
          }
        },1000)
      } else{
        Notify({ type: 'primary', message: res.message });
      }
      this.smsCodeLoading = false
    },
    onConfirm(value) {
      this.showPicker = false;
      this.form.sf = value
    },
    onConfirmCompany(value,ind) {
      this.showacCompany = false;
      this.form.accompanys = value
      this.form.accompany = ind === 1 ? 0 : ind + 1
    },
    onConfirmTime(value) {
      this.showTimePicker = false;
      this.form.dateOfVisit = new Date(value).Format("yyyy-MM-dd hh:mm:ss")
    },
  }
}
</script>

<style lang="scss" scoped>
@import  './index';
</style>
