<template>
  <div id="applyBox">
    <ul id="applyInfoBox">
      <li>
        <span>微信号</span>
        <input v-model="userName" type="text" placeholder="请输入您的微信号" maxlength="10">
      </li>
      <li>
        <span>联系电话</span>
        <input type="tel" v-model="phone" placeholder="请填写您的手机号（选填）" maxlength="11">
      </li>
      <li>
        <span>孩子姓名</span>
        <input v-model="teenageName" type="text" placeholder="请填写孩子的姓名" maxlength="10">
      </li>
      <li>
        <span>孩子性别</span>
        <div id="genderBox">
          <input type="radio" v-model="gender" value="1" id="boy">
          <label id="boyLabel" for="boy">男生</label>
          <input type="radio" v-model="gender" value="2" id="girl">
          <label for="girl">女生</label>
        </div>
      </li>
      <li>
        <span>所在门店</span>
        <input v-model="store" type="text" placeholder="请填写门店信息（例如：北京总店）" maxlength="20">
      </li>
    </ul>
    <div id="applyButtonBox">
      <span @click="submitApply">提交</span>
    </div>
    <div class="tipDialog" v-show="tipDialogShow">
      <div class="tipDialogCon">
        <p>{{tipDialogText}}</p>
        <span @click="tipDialogShow=false">知道了</span>
      </div>
    </div>
    <div class="tipDialog" v-show="overDialogShow">
      <div class="tipDialogCon">
        <p>报名成功</p>
        <span @click="overBack">返回首页</span>
      </div>
    </div>
    <loading :loadingShow="loadingShow"></loading>
  </div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
  data() {
    return{
      userName: '',
      phone: '',
      teenageName: '',
      gender: '',//孩子性别 1：男； 2：女。
      store: '',//所在门店名称
      loadingShow: false,//加载
      tipDialogShow: false,
      tipDialogText: '',
      overDialogShow: false,
    }
  },
  components: {
    loading
  },
  mounted() {
    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Users/info',
      method: 'post',
      data: {
        token: localStorage.getItem("token")
      }
    }).then(response => {
      this.loadingShow = false
      this.userName = response.data.userName
      this.phone = response.data.phone
      this.teenageName = response.data.teenageName
      this.gender = response.data.gender
      this.store = response.data.store
    })
  },
  methods: {
    submitApply() {
      if(this.userName==''){
        this.tipDialogShow = true
        this.tipDialogText = '微信号不能为空'
      }else if(this.teenageName=='') {
        this.tipDialogShow = true
        this.tipDialogText = '孩子姓名不能为空'
      }else if(this.store=='') {
        this.tipDialogShow = true
        this.tipDialogText = '所在门店名称不能为空'
      }else{
        this.loadingShow = true
        request({
          url: '/api/MarketingToolApi/Users/enrollActivity',
          method: 'post',
          data: {
            token: localStorage.getItem("token"),
            activityId: this.$route.params.id,
            userName: this.userName,
            phone: this.phone,
            teenageName: this.teenageName,
            gender: this.gender,
            store: this.store
          }
        }).then(response => {
          this.loadingShow = false

          this.overDialogShow = true
          // this.$router.go(-1)
          // this.$router.push({name: 'activityDetail',params:{id: this.$route.params.id}})
        })
      }
    },
    overBack() {
      // 首页
      this.$router.go(-2)
    }
  }
}
</script>
<style lang="scss">
#applyBox{
  height: 100%;
  padding-bottom: 70px;
}
#applyInfoBox{
  background-color: #fff;
  li{
    font-size: 14px;
    color: #282B2F;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
    >span{
      display: inline-block;
      width: 29.33%;
      padding-left: 15px;
    }
    >input{
      font-size: 14px;
      width: 70%;
      height: 38px;
      line-height: 38px;
      border : none;
    }
    input::-webkit-input-placeholder {
      font-size: 14px;
      color: #ADB0B2;
    }
    input::-moz-input-placeholder {
      font-size: 14px;
      color: #ADB0B2;
    }
    input::-ms-input-placeholder {
      font-size: 14px;
      color: #ADB0B2;
    }
  }
}


#applyButtonBox{
  background-color: #fff;
  padding: 11px 0;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  span{
    display: inline-block;
    text-align: center;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #F7B500;
    height: 38px;
    width: 250px;
    line-height: 38px;
    border-radius: 19px;
  }
}
  #genderBox{
    display: inline-flex;
    align-items: center;
    width: 70%;
    padding: 17px 0;
    label{
      font-size: 14px;
      color: #ADB0B2;
    }
    #boyLabel{
      margin-right: 25px;
    }
  }
</style>