<template>
  <div id="Sweepcode">
    <div class="header">
      <h3 style="margin-top:10px;font-size:0.35rem">应聘登记表</h3>
    </div>
    <div class="sweepcode_content">
      <Form :label-width="120" :model="formInline" :rules="ruleInline"  ref="formInline" class="fontsize" label-position=left style="margin-left:3%">
        <FormItem label="邀约人" prop="Inviter" style="margin-top:0.4rem;font-size:15px">
          <Input placeholder="请输入" style="width:85%;" v-model="formInline.Inviter" size="large"/>
        </FormItem>
        <FormItem label="邀约人手机" style="" class="phone">
          <Input placeholder="请输入" style="width:85%;" v-model="formInline.InviterPhoneNumber"  size="large" @on-blur='jedugePhone' /><br>
          <span style="position: absolute;top: 100%;left: 0;line-height: 1;padding-top: 6px;color:#ed4014;" v-show="isV==true">请输入正确的手机号码</span>
        </FormItem> 
        <FormItem label="面试时间" prop="time" style="margin-top:10px">
          <Input placeholder="请输入" style="width:40%;" v-model="formInline.date"  :readonly="true" size="large" />
          <!-- <DatePicker type="date" placeholder="请选择日期" style="width: 120px;margin-left:20px" v-model="formInline.date"  @on-change="selectDate" :options="options3" ></DatePicker> -->
          <TimePicker type="time" placeholder="请选择时间" style="width: 43%" v-model="formInline.time" format="HH:mm"  @on-change="selectTime" @on-focus="defaultRRRR" :editable="false" size="large"></TimePicker>
        </FormItem>
        <FormItem label="应聘职位"   prop="position">
          <Input placeholder="请输入" style="width:85%;" v-model="formInline.position"  size="large"/>
        </FormItem>
        <FormItem label="应聘来源" prop="model1">
          <Select v-model="formInline.model1" style="width:85%;" size="large">
            <Option v-for="item in origen" :value="item.value" :key="item.value">{{ item.label}}</Option>
          </Select>
        </FormItem> 
        <FormItem label="姓名" prop="name">
          <Input placeholder="请与简历保持一致" style="width:85%;" v-model="formInline.name"  size="large"/>
        </FormItem>
        <FormItem label="手机号码"  prop="phoneNUmber">
          <Input placeholder="请输入" style="width:85%;" v-model="formInline.phoneNUmber"  size="large"/>
        </FormItem>
        <FormItem label="是否携带简历"   prop="model2">
          <Select v-model="formInline.model2" style="width:85%;" size="large">
            <Option v-for="item in isGET" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>     
      </Form>
    </div>
    <div class="submission">
      <Button type='primary' @click="confirmSubmission" >提交</Button>
    </div>
    <Modal
      v-model="modal3"
        width='200px'
        :closable='false'>
      <div >
          <h2 style="text-align: center;color:black">欢迎来到量星球</h2>
          <p style="font-size:15px">您好，为了更好的面试体验，请仔细填写以下信息，预计用时1-2分钟</p>
      </div>
      <div  slot='footer' style="text-align:center">
          <Button type='primary' @click='modal3=false'>确定</Button>
      </div>
    </Modal>
     <Modal
      v-model="modal4"
        width='200px'
        :closable='false'>
      <div >
          <p style="text-align:center;font-size:16px">HR已知晓您的到来，请稍等片刻</p>
      </div>
      <div  slot='footer' style="text-align:center">
          <Button type='primary' @click='modal4=false'>好的</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import moment from 'moment'
import {submitMassage} from '../../api/sweepCode.server.js'
export default {
  data(){
    return {
      docmHeight: '0',
      showHeight:  '0',
      hidshow:true,
      isResize:false,
      modal3:false,
      modal4:false,
      ruleInline: {
        Inviter: [
          {  required: true, message: '请输入邀约人', trigger: 'blur' }
        ],
        time: [
          {  required: true,message: '面试时间不能为空',  trigger: 'date' }
        ],
         position: [
          {  required: true,message: '请输入应聘职位',  trigger: 'blur' }
        ],
         model1: [
          {  required: true,message: '请输入应聘来源',  trigger: 'blur' }
        ],
         name: [
          {  required: true,message: '请输入姓名',  trigger: 'blur' }
        ],
         phoneNUmber: [
          {  required: true,message: '请输入正确的手机号码',  trigger: 'blur' },
          {  required: true, pattern:/^[1][3,4,5,7,8,6,9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
         model2: [
          {  required: true,message: '请选择是否携带简历',  trigger: 'blur' }
        ],
    },
      saleDate:'',
      isV:false,
      options3: {
        disabledDate (date) {
          return date && date.valueOf() <Date.now()-3600*24*1000|| date.valueOf() >Date.now();
          }
      },
      origen:[
        {
          value: '智联招聘',
          label: '智联招聘'
        },
        {
          value: '51Job',
          label: '51Job'
        },
        {
          value: 'boss直聘',
          label: 'boss直聘'
        },
        {
          value: '拉勾网',
          label: '拉勾网'
        },
        {
          value: '内部推荐',
          label: '内部推荐'
        },
        {
          value: '猎聘网',
          label: '猎聘网'
        },
        {
          value: '其他',
          label: '其他'
        },
      ],
      isGET:[
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        },
      ],
      formInline:{
        model1:'',
        model2:'',
        Inviter:'',
        InviterPhoneNumber:'',
        date:'',
        time:'',
        position:'',
        phoneNUmber:'',
        name:'',
      },
      isV:false,
      hh:['01',"02","03","04","05","06","07","08","09","10","11","12"],
      mm:['00','10','20','30','40','50','60']
    }
  },
  methods:{
    // 确认提交
    confirmSubmission(){
      if(this.formInline.model1==''||this.formInline.model2==''||this.formInline.Inviter==''||this.formInline.date==''||this.formInline.time===''||this.formInline.position==''||this.formInline.phoneNUmber==''||this.formInline.name==''){
        this.$Message.error('请填写完整的信息')
        return
      }
      if(!(/^[1][3,4,5,7,8,6,9][0-9]{9}$/.test(this.formInline.phoneNUmber))){
        this.$Message.error('请输入正确的手机号')
        return
      }
      if(this.formInline.InviterPhoneNumber!==''&&!(/^[1][3,4,5,7,8,6,9][0-9]{9}$/.test(this.formInline.InviterPhoneNumber))){
        this.$Message.error('请输入正确的手机号')
        return
      }
      let parmars={
        invitePerson:this.formInline.Inviter,
        inviterMobile:this.formInline.InviterPhoneNumber,
        dateTime:moment(this.formInline.date).format('YYYY-MM-DD') + ' ' + this.formInline.time,
        interviewTitle:this.formInline.position,
        source:this.formInline.model1,
        name:this.formInline.name,
        mobile:this.formInline.phoneNUmber,
        takeResume:this.formInline.model2
      }
      submitMassage(parmars).then(res=>{
        if(res.data.success==true){
          this.formInline.model1=''
          this.formInline.model2=''
          this.formInline.Inviter=''
          this.formInline.InviterPhoneNumber=''
          this.formInline.time=''
          this.formInline.position=''
          this.formInline.name=''
          this.formInline.phoneNUmber=''

          this.modal4=true
        }
      })
    },
    selectDate(a){
      this.formInline.date=a
    },
    selectTime(b){
      this.formInline.time=b
    },
    welconme(){
    this.modal3=true
   },
   jedugePhone(){
     if(!(/^[1][3,4,5,7,8,6,9][0-9]{9}$/.test(this.formInline.InviterPhoneNumber))){
      this.isV=true
      setTimeout(() => {
       this.isV=false
      }, 3000);
     }
   },
  //  阻止弹出键盘
  defaultRRRR(){
    document.activeElement.blur()
  },
  },
  mounted(){
    this.welconme()
    const myDate = new Date();
    const year = myDate.getFullYear(); // 获取当前年份
    const month = myDate.getMonth() + 1; // 获取当前月份(0-11,0代表1月所以要加1);
    const day = myDate.getDate(); // 获取当前日（1-31）
    this.saleDate = `${year}/${month}/${day}`;
    this.formInline.date=this.saleDate
     function getRem() {
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth / 7.5 + "px";
  }
  this.$nextTick(()=>{
    getRem()
  })
    window.onresize = ()=>{  
      return(()=>{ 
        getRem()
        if (!this.isResize) {    
           this.docmHeight=document.documentElement.clientHeight                               
            this.isResize = true                      
        }                        
           this.showHeight = document.body.clientHeight         
           })()   
    }
  },
  beforeDestroy() {
  document.getElementsByTagName("html")[0].removeAttribute("style");
  },
  watch :{
    showHeight:function() { 
      if(this.docmHeight > this.showHeight){           
         this.hidshow=false       
      }else{
         this.hidshow=true    
      }    
    }
  }
}
</script>

<style scoped>
 #Sweepcode{
   height: 100%;
   width:100%;
   overflow: hidden;
 }
 .mobile{
   width: 100%;
   height: 100%
 }
  .header{
    text-align: center;
    height: 5%;
    /* float: left; */
  }
  .submission{
    height: 20%;
  }
  .submission button{
    width: 47%;
    font-size: 0.35rem;
    margin-top: 15%;
    margin-left: 26%;
    height: 39px;
  }
  .sweepcode_content{
    margin-top:0.2rem;
    font-size: 0.15rem;
    height: 70%;
    border-top: 1px solid rgba(241,241,241,1);
  }
  
</style>
<style >
.sweepcode_content input.ivu-input.ivu-input-large{
  background: #F4F4F4
}
.sweepcode_content .ivu-select-placeholder{
  background: #F4F4F4
}
.fontsize .ivu-form-item-label{
    font-size: 0.28rem
}
.fontsize{
  height: 100%;
  width: 100%;
  /* border: 1px solid yellow */
}
.fontsize .ivu-form-item.ivu-form-item-required{
  height:30px;
}
.fontsize .phone{
  /* border:1px solid red; */
  height:26px;
} 
 .fontsize .phone{
  height:26px;
} 
.fontsize .ivu-input.ivu-input-large{
  font-size: 0.23rem
}
</style>