<template>
<div class="login-page">
  <div class="mobile-login">
    <div class="title-box">
      <img src="../../assets/images/mlogin-tit1.png" class="tit1">
      <img src="../../assets/images/mlogin-tit2.png" class="tit2">
    </div>
    <div class="logo-box">
      <img src="../../assets/images/mlogin-logo1.png" class="tit1">
      <img src="../../assets/images/mlogin-logo2.png" class="tit2">
    </div>
    <div class="text-box">
      <img src="../../assets/images/login-tit1.png" class="tit1">
      <img src="../../assets/images/login-tit2.png" class="tit2">
      <img src="../../assets/images/login-tit3.png" class="tit3">
    </div>
    <div class="form-box">
      <ul>
        <template v-for="(item, index) in form">
          <li :key="index" v-if="!item.type">
            <input v-model="item.value" :type="item.inputType ? item.inputType : 'text'" :placeholder="item.name">
            <div :class="item.isTips ? 'tips' : 'tips none'">{{ item.tips }}</div>
          </li>
          <li :key="index" class="new-w" v-else>
            <div class="yzm">
              <input v-model="item.value" type="number" placeholder="验证码">
              <div class="f-btn" @click="getVCode">{{ vCode.second == 60 ? '发送验证码' : vCode.second + 's' }}</div>
            </div>
            <div :class="item.isTips ? 'tips' : 'tips none'">输入信息不正确</div>
          </li>
        </template>
      </ul>
      <div class="reg-btn" @click="submitPost">注册</div>
      <!-- <div class="bottom-btn">
        <div class="btn">验证码登录</div>
        <div class="btn r">忘记密码</div>
      </div> -->
    </div>
  </div>
  <div class="succ-pop" v-if="popShow">
    <div class="pop">
      <div class="title">注册成功</div>
      <img src="../../assets/images/register-succ.png" alt="">
      <div class="btns" @click="goLogin">去登陆</div>
    </div>
  </div>
</div>
</template>

<script>
import cAction from '@action'
import sLanguage from '@/components/languageSwitch/index.vue'

export default {
  components: { sLanguage },
  props: {
    params: { type: Object, required: false, default () { return {} } },
    query: { type: Object, required: false, default () { return {} } }
  },
  data () {
    return {
      popShow: false,
      vCode: {
        time: null,
        second: 60,
        flag: true
      },
      form: [
        {
          names: 'name',
          name: '姓名',
          value: '',
          tips: '输入信息不正确',
          isTips: false
        },
        {
          names: 'organization',
          name: '机构',
          value: '',
          tips: '输入信息不正确',
          isTips: false
        },
        {
          names: 'job',
          name: '职务',
          value: '',
          tips: '输入信息不正确',
          isTips: false
        },
        {
          names: 'mobile',
          inputType: 'number',
          name: '手机',
          value: '',
          tips: '输入信息不正确',
          isTips: false
        },
        {
          names: 'code',
          type: 1,
          inputType: 'number',
          name: '验证码',
          value: '',
          tips: '输入信息不正确',
          isTips: false
        },
        {
          names: 'email',
          name: '邮箱',
          value: '',
          tips: '输入信息不正确',
          isTips: false
        },
        {
          names: 'password',
          name: '密码',
          value: '',
          tips: '输入信息不正确',
          isTips: false
        }
      ]
    }
  },
  metaInfo () {
    return {
      title: this.$t('Login.title'),
      meta: []
    }
  },
  mounted () {},
  methods: {
    goLogin() {
      this.$router.push({
        name: 'login-normal'
      })
    },
    submitPost() {
      this.form.map(item => {
        if (item.value === '') {
          item.isTips = true
        } else {
          switch (item.names) {
            case 'mobile':
              !(/^1[3456789]\d{9}$/.test(item.value))
                ? item.isTips = true
                : item.isTips = false
              break
            case 'email':
              !(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(item.value))
                ? item.isTips = true
                : item.isTips = false
              break
            case 'code':
              item.value.length !== 4
                ? item.isTips = true
                : item.isTips = false
              break
            default:
              item.isTips = false
          }
        }
      })
      this.$forceUpdate()
      if (!this.form.find(item => { return item.isTips === true })) {
        const param = {}
        this.form.map(item => {
          param[item.names] = item.value
        })
        cAction.Other.register(param).then(res => {
          if (res.code === 0) {
            this.popShow = true
          } else {
            return new Error(JSON.stringify(res))
          }
        })
      }
    },
    dialogMsg () {
      this.$message({
        type: 'success',
        message: this.$t('Login.findPwdStr')
      })
    },
    getVCode() {
      const mobile = this.form.find(item => { return item.names === 'mobile' })
      if (!(/^1[3456789]\d{9}$/.test(mobile.value))) {
        mobile.isTips = true
        return
      }
      if (this.vCode.flag) {
        mobile.isTips = false
        cAction.Other.sendCode({ account: mobile.value }).then(res => {
          if (res.code === 0) {
            this.vCode.flag = false
            this.tick()
          } else {
            return new Error(JSON.stringify(res))
          }
        })
      }
    },
    tick() {
      clearInterval(this.vCode.time)
      this.vCode.time = setInterval(() => {
        this.vCode.second--
        if (this.vCode.second === 0) {
          this.vCode.second = 60
          clearInterval(this.vCode.time)
          this.vCode.flag = true
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page{
  width: 100%;
}
.mobile-login{
  width: 100%;
  background: url('../../assets/images/mlogin-bg.png');
  background-size:100% 100%;
  .title-box{
    padding-top: 10px;
    .tit1{
      width: 40%;
    }
    .tit2{
      width: 40%;
      margin-top: 10px;
    }
    img{
      display: block;
      margin-left: 13%;
    }
  }
  .logo-box{
    width: 75%;
    margin: 0 auto;
    margin-top:10%;
    overflow: hidden;
    .tit2{
      float: right;
    }
    img{
      float: left;
      display: block;
      width: 45%;
    }
  }
  .text-box{
    padding-top: 5%;
    width: 75%;
    margin: 0 auto;
    img{
      display: block;
      width: 100%;
      margin-top: 3%;
    }
  }
  .mlogin-modules{
    width: 75%;
    margin: 0 auto;
  }
}
.login-box{
  width: 100%;
  height: 100%;
  background: url('../../assets/images/login-bg.png');
  background-size:100% 100%;
  .login-modules{
    width: 100%;
    position: absolute;
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
/* normal 登录 */
.login-modules a{ cursor: pointer; color:#186AA9;text-decoration:none;}
.mlogin-modules a{ cursor: pointer; color:#186AA9;text-decoration:none;}
@media screen and (max-width: 480px){
  .login-box{display: none;}
  .content-s{
    top: auto;
    margin-top: 8%;
  }
}
@media screen and (min-width: 1000px){
  .mobile-login{display: none;}
}
.form-box{
  padding-bottom: 50px;
  ul{
    width: 75%;
    list-style: none;
    padding: 20px 0 0 0;
    margin: 0 auto;
    li.new-w{
      width: 100%;
    }
    li{
      width: 95%;
      input{
        padding:0 0 0 5%;
        width: 100%;
        border: 1px solid #186AA9;
        height:40px;
        font-size: 16px;
        outline: none;
        border-radius: 0;
      }
      input::-webkit-input-placeholder{
        color: #186AA9;
      }
      .tips{
        padding-left: 5%;
        font-size: 14px;
        color: #F12828;
      }
      .tips.none{
        visibility:hidden;
      }
      .yzm{
        display: flex;
        input{
          width: 52%;
        }
        .f-btn{
          margin-left: auto;
          width:38%;
          height: 42px;
          line-height: 42px;
          background:rgba(0,109,191,1);
          border-radius:2px;
          color: #fff;
          font-size: 16px;
          text-align: center;
        }
      }
    }
  }
  .reg-btn{
    width: 75%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background:rgba(0,109,191,1);
    border-radius:2px;
    margin: 0px auto;
    color: #fff;
    font-size: 16px;
  }
  .bottom-btn{
    width: 75%;
    margin: 20px auto;
    display: flex;
    .btn{
      color: #006DBF;
    }
    .btn.r{
      margin-left: auto;
    }
  }
}
.succ-pop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  .pop{
    position:absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    width: 80%;
    height: 50%;
    background: #fff;
    .title{
      font-size: 20px;
      text-align: center;
      line-height: 80px;
    }
    img{
      width: 50%;
      margin: 0 auto;
      display: block;
    }
    .btns{
      border-radius:2px;
      width: 90%;
      height: 40px;
      background: #006DBF;
      margin: 40px auto 0 auto;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>
