<template>
  <div id="Sweepcode">
    <h2 class="header">应聘登记表</h2>
    <div class="sweepcode_content">
      <Form :label-width="120" :model="formInline" :rules="ruleInline"  ref="formInline" class="fontsize">
        <FormItem label="邀约人" prop="Inviter" style="margin-top:1rem;font-size:15px">
          <Input placeholder="请输入" style="width:250px;" v-model="formInline.Inviter" @on-focus='a' size="large"/>
        </FormItem>
        <FormItem label="邀约手机号" style="" >
          <Input placeholder="请输入" style="width:250px;" v-model="formInline.InviterPhoneNumber" @on-focus='a' size="large"/>
        </FormItem> 
        <FormItem label="面试时间" prop="time">
          <Input placeholder="请输入" style="width:120px;" 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: 127px" 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:250px;" v-model="formInline.position" @on-focus='a' size="large"/>
        </FormItem>
        <FormItem label="应聘来源" prop="model1">
          <Select v-model="formInline.model1" style="width:250px;" 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:250px;" v-model="formInline.name" @on-focus='a' size="large"/>
        </FormItem>
        <FormItem label="手机号码"  prop="phoneNUmber">
          <Input placeholder="请输入" style="width:250px;" v-model="formInline.phoneNUmber" @on-focus='a' size="large"/>
        </FormItem>
        <FormItem label="是否携带简历"   prop="model2">
          <Select v-model="formInline.model2" style="width:250px;" size="large">
            <Option v-for="item in isGET" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>     
      </Form>
      <div class="submission">
        <Button type='primary' @click="confirmSubmission" class="utbuton" >提交</Button>
      </div>
    </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:'',
      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:'',
      },
      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
      }
      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
   },
  //  阻止弹出键盘
  defaultRRRR(){
    document.activeElement.blur()
  },
  a(){
    var h = document.body.scrollHeight;
    window.onresize = function(){
        if (document.body.scrollHeight < h) {
            document.getElementsByClassName("utbuton").style.display = "none";
        }else{
            document.getElementsByClassName("utbuton").style.display = "block";
        }
    };
  }
  },
  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
    window.onresize = ()=>{  
      return(()=>{ 
        if (!this.isResize) {    
           this.docmHeight=document.documentElement.clientHeight                               
            this.isResize = true                      
        }                        
           this.showHeight = document.body.clientHeight         
           })()   
    }
  },
  watch :{
    showHeight:function() { 
      if(this.docmHeight > this.showHeight){           
         this.hidshow=false       
      }else{
         this.hidshow=true    
      }    
    }
  }
}
</script>

<style scoped>
  .header{
    font-size: 19px;
    text-align: center;
    margin-top:10px
  }
  .utbuton{
    /* position: fixed;
    bottom: 1rem; */
    margin-top: 1rem;
    margin-left: 31%;
    width:45%;
    height: 2.2rem;
    font-size: 1.4rem;
    line-height: 1.4rem;
  }
  
  .sweepcode_content{
    margin-top:0.2rem;
    font-size: 15px;
    border-top: 1px solid rgba(241,241,241,1);
  }
  
</style>
<style >
.sweepcode_content input.ivu-input.ivu-input-large{
  background: rgba(241,241,241,1)
}
.sweepcode_content .ivu-select-placeholder{
  background: rgba(241,241,241,1)
}
.fontsize .ivu-form-item-label{
    font-size: 15px
  }
</style>