<template>
  <div class="login-container">
    <div class="all">
      <div class="login_logo">
        <a href="#" target="_self" title="功道云-积分系统用户登录"><img src="static/images/login-logo_20200603.png"></a>
      </div>

      <div class="login_box">

        <div class="login_ad fl">
        </div>

        <div class="login_input">

          <div class="reg_title">
            <div class="title">欢迎注册功道云</div>
            <!-- <span>公司统一开设账号，员工无需注册</span> -->
          </div>

          <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">

            <el-form-item prop="tel" class="login_tel">
              <span class="label">+86</span>
              <el-input
                class="input_tel"
                clearable
                name="username"
                type="text"
                v-model="loginForm.tel"
                autocomplete="off"
                placeholder="请输入手机号"
                oninput="value=value.replace(/[^\d]/g,'')"
              />
            </el-form-item>

            <el-row :gutter="15">
              <el-col :span="14">
                <el-form-item prop="code" class="login_message">
                  <el-input style="width:80%;" name="code" v-model="loginForm.verify" autoComplete="off" oninput="value=value.replace(/[^\d]/g,'')" :placeholder="$t('login.verify_code_input')" />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-button class="login_message_code" :loading="sendcodeloading" :disabled="sended" type="primary" plain style="width:100%; padding:17px;" @click="sendCode">{{sendBtnText}}
                </el-button>
              </el-col>
            </el-row>

            <el-form-item prop="user_name" class="login_user_name">
              <el-input
                class="input_user"
                clearable
                name="name"
                type="text"
                v-model="loginForm.name"
                autocomplete="off"
                placeholder="请填写真实姓名"
              />
            </el-form-item>

            <el-form-item prop="password" class="login_pwd">
              <el-input
                clearable
                name="password"
                :type="passwordType"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.password"
                autocomplete="new-password"
                placeholder="请设置登录密码"
              />
            </el-form-item>

            <!--<el-form-item prop="password">-->
          <!--<span class="svg-container">-->
            <!--<svg-icon icon-class="password" />-->
          <!--</span>-->
              <!--<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"-->
                        <!--:placeholder="$t('login.password')" />-->

            <!--</el-form-item>-->

            <!--<el-form-item prop="password_confirmation">-->
          <!--<span class="svg-container">-->
            <!--<svg-icon icon-class="password" />-->
          <!--</span>-->
              <!--<el-input name="password" :type="passwordType" v-model="loginForm.password_confirmation" autoComplete="on"-->
                        <!--:placeholder="$t('login.password_check')" />-->

            <!--</el-form-item>-->

            <el-button type="primary" style="width:100%; font-size: 16px; padding:15px 20px; margin-bottom:24px;" :disabled="sub_disabled" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.registers')}}</el-button>
          </el-form>
          <div style="overflow: hidden; text-align: center;">
            <el-button type="text" @click="$router.push({name:'login'})" style="font-size: 16px; margin-bottom: 0;">
              <span style="color:#909399">已注册账号！</span>
              <span>请登录</span>
            </el-button>
          </div>

        </div>

      </div>
      <div class="footer_copyright">
        <!-- <span class=""><img src="static/images/little_line.png">积分制管理 · 员工精细化管理<img src="static/images/little_line.png"></span> -->
        <span class="copyright">Copyright © 2020 广东功道云数字科技有限公司 All Rights Reserved</span>
      </div>

  </div>
  </div>
</template>

<script>

  import { isvalidUsername } from '@/utils/validate'
  import { getToken, setToken } from '@/utils/auth' // getToken from cookie
  import requests from '@/utils/request-user'
  var bool = true// 五秒执行一次变量
  export default {
    data() {
      const validateUsername = (rule, value, callback) => {
        if ((value) == '') {
          callback(new Error(this.$t('login.validateUsername')))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error(this.$t('login.validatePassword')))
        } else {
          callback()
        }
      }
      const validateTel = (rule, value, callback) => {
        const validValue = value ? value.replace(/\s/g, '').replace(/&nbsp;/ig, '') : value
        if (!validValue) {
          return callback(new Error(this.$t('login.validateTel')))
        }
        const pattern = /^1\d{10}$/
        if (pattern.test(value)) {
          callback()
        } else {
          return callback(new Error(this.$t('login.validateTelerr')))
        }
      }

      const validatePasswordCheck = (rule, value, callback) => {
        if (!value) {
          return callback(new Error(this.$t('login.password_check')))
        }
        if (value.length < 5) {
          return callback(new Error(this.$t('login.validatePassword')))
        }
        if (value != this.loginForm.password) {
          return callback(new Error(this.$t('login.validatePasswordCheck')))
        }
        callback()
      }
      return {
        username5: '',
        sendBtnText: this.$t('login.verify_code_get'),
        sended: false,
        sendcodeloading: false,
        sendInt: 90,
        loginForm: {
          tel: '',
          password: '',
          password_confirmation: '',
          verify: '',
          name: ''
        },

        loginRules: {
          tel: [{ required: true, trigger: 'blur', validator: validateTel }],
          password: [{ required: true, trigger: 'blur', validator: validatePassword }],
          verify: [{ required: true, trigger: 'blur', message: this.$t('login.verify_code_input') }],
          password_confirmation: [{ required: true, trigger: 'blur', validator: validatePassword }]
        },
        passwordType: 'password',
        loading: false,
        showDialog: false,
        sub_disabled: true
      }
    },
    watch:{
      'loginForm':{
        handler(val){
          if(val.tel == '' || val.password == '' || val.verify == '' || val.name == ''){
            this.sub_disabled = true
          }else{
            this.sub_disabled = false
          }
        },
        immediate: true,
        deep:true,
      }
    },
    methods: {

      sendCode() {
        const self = this

        if (self.loginForm.tel == '') {
          // 五秒内只执行一次
          if (bool) {
            self.$message.error(this.$t('login.sendCode'))
            bool = false
            setTimeout(() => {
              bool = true
            }, 5000)
          } else {
            console.log('不执行')
          }
          return false
        }
        self.sendcodeloading = true
        this.$http('post','/api/send-sms',{mobile: self.loginForm.tel,type: 1},).then((ret) => {
          self.sendcodeloading = false
          if (ret.data.code == 1) {
            self.$message.success(this.$t('login.sendCode_over'))
            self.sendedCount()
          } else {
            self.$message.error(ret.data.msg)
          }
        }).finally(()=>{
          self.sendcodeloading = false
        })
      },
      sendedCount() {
        const self = this
        if (this.sendInt == 0) {
          this.sendBtnText = this.$t('login.sendedCount')
          this.sended = false
        } else {
          this.sended = true
          this.sendBtnText = this.$t('login.sendover')+'（' + this.sendInt + '）'
          this.sendInt--
          setTimeout(function() {
            self.sendedCount()
          }, 1000)
        }
      },
      handleLogin() {
        this.loginForm.password_confirmation =  this.loginForm.password
        const self = this
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.sub_disabled = true
            this.loading = true
            this.$http('post','/api/register',self.loginForm).then((ret) => {
              if (ret.data.code == 1) {
                // self.$message.success(ret.data.msg)
                self.$message.success('注册成功')
                self.$refs.loginForm.clearValidate()
                setTimeout(() => {
                  self.$store.dispatch('LoginByUsername', this.loginForm).then((res) => {
                    requests.defaults.headers.common['A-TOKEN'] = res.data.token;
                    this.loginExperience()
                  }).catch(() => {
                    self.$router.push({ path: '/login' })
                  })

                  // self.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
                  //   self.$router.push({ path: '/create_company' })
                  // }).catch((e) => {
                  //   self.$message({
                  //     message: e,
                  //     type: 'error'
                  //   })
                  // })
                }, 500)
              } else {
                // self.$message.error(ret.data.msg)
              }
            }).finally(()=>{
              setTimeout(()=>{
                this.sub_disabled = false
                self.loading = false
              },3000)
            })
          } else {
            return false
          }
        })
      },
      loginExperience() {
        let self = this
        let num = 112
        let jurisdiction = "creator"
        requests({
          url: '/api/try/employees',
          method: 'get',
          params: {site_id: num}
        }).then((res) => {
          if (res.data.code == 1) {
            let login_index = ''
            for(let i in res.data.data){
              let role_list = res.data.data[i].role_list
              for (let j in role_list) {
                if (jurisdiction == role_list[j].name) {
                  login_index = i
                }
              }
            }
            if (login_index != '') {
              setToken(res.data.data[login_index].token)
              localStorage.setItem('ExperienceOne_none',true)
              localStorage.setItem('Experience_data',JSON.stringify({if:true,name:jurisdiction}))
              self.$store.commit('SET_TOKEN', res.data.data[login_index].token)
              // localStorage.setItem('site_list_temp', JSON.stringify(data.data.account_site))
            }
            self.$router.push({path: '/'})
          } else {
            // self.$message.error(res.data.data.msg)
          }
        })
      },
    },
    created() {
      document.title = this.$t('login.title_register')
      this.$store.dispatch('setLanguage', 'zh')
    },
    destroyed() {

    }
  }
</script>

<style rel="stylesheet/css" type="text/css" scoped>
  .all {
    width: 1000px;
    /* height: 675px; */
    margin: 0 auto;
    position: relative;
    top: 50%;
    margin-top: -325px;
  }
  .login-container{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:auto;
    cursor: default;
  }
  .login-container .login_logo {
    position: relative;
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
  }
  .login-container .login_logo a{
    display: inline-block;
  }
  .login-container .login_logo img {
    width: 100%;
    vertical-align: middle;
  }
  .login-container .login_box{
    position: relative;
    display: block;
    top: 0;
    width: 100%;
    /* height: 530px; */
    max-width: 1000px;
    box-shadow: 0px 4px 22px #efefef;
    background: #fff;
  }

  .login-container .login_box .login_ad {
    width: 482px;
    height: 552px;
    background: url(/images/login_bg_20200603.png) no-repeat;
    background-size: cover;
  }

  .login-container .login_box .login_ad img {
    width: 360px;
    margin: auto;
    height: 200px;
  }

  .login-container .login_box .login_ad span {
    font-family: "Microsoft YaHei";
    display: block;
    text-align: center;
    font-size: 28px;
    letter-spacing: 2px;
    font-weight: bold;
    color: #fff;
  }
  .login-container .login_box .login_type_icon{
    position:absolute;
    top:0;
    right:0;
    width:94px;
    height:94px;
    overflow:hidden;
    z-index: 10;
  }
  .login-container .login_box .login_type_icon .login_default{
    width:96px;
    height:96px;
    background:url(/images/login_default.jpg) no-repeat;
    background-size:cover;
  }
  .login-container .login_box .login_type_icon .login_code{
    width:96px;
    height:96px;
    background:url(/images/login_code.jpg) no-repeat;
    background-size:cover;
  }
  .login-container .login_box .login_input{
    position: relative;
    display: inline-block;
    text-align: center;
    width: 508px;
    height: 552px;
    background: #FFF;
  }
  .login-container .login_box .login_input .reg_title{
    margin-top:48px;
    text-align: center;
  }
  .login-container .login_box .login_input .reg_title .title{
    color:#303133;
    font-size:24px;
    line-height: 38px;
  }
  .login-container .login_box .login_input .reg_title span{
    color:#909399;
    font-size:16px;
    line-height: 22px;
  }
  .login-container .login_box .login-form{
    width:360px;
    margin:0 auto;
    margin-top: 30px;
    /* height:440px; */
  }
  .login-container .login_box .login-form /deep/ input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px white inset !important;
  }

  .login-container .login_box .login-form .title-container{
    display: inline-block;
    width:120px;
    height:120px;
    margin-top:106px;
    border-radius:120px;
    background:#26A2FF;
    overflow:hidden;
  }
  .login-container .login_box .login-form .title-container img{
    margin-top:40px;
    width:100%;
    height:auto;
  }
  .login-container .login_box .login-form .login_tel{
    display:block;
    margin-bottom: 24px;
    border:none;
    border-bottom:1px solid #C0C4CC;
  }
  .login-container .login_box .login-form .login_tel .label{
    display: inline-block;
    text-align: left;
    width:12%;
    font-size:18px;
    color:#303133;
    line-height:26px;
    padding:0;
    margin:12px 0;
    float:left;
  }
  .login-container .login_box .login-form .login_tel .input_tel{
    display: inline-block;
    width:88%;
    margin:12px auto;
    height:24px;
    line-height: 24px;
    border-left:1px #efefef solid;
    float:right;
  }
  .login-container .login_box .login-form .login_tel .input_tel /deep/ input{
    padding:0 0% 0 4% ;
    margin:0;
    font-size:18px;
    height:24px;
    line-height: 24px;
    border:none !important;
  }
  .login-container .login_box .login-form .login_tel .el-input__suffix{
    top:-6px;
    right:0px;
  }
  .login-container .login_box .login-form .login_pwd{
    border:none;
    margin:0 auto 32px !important;
    border-bottom:1px solid #C0C4CC;
  }
  .login-container .login_box .login-form .login_pwd .el-input /deep/ input{
    padding:0;
    margin:0;
    font-size:18px;
    height:24px;
    line-height: 24px;
    border:none;
  }
  .login-container .login_box .login-form .login_pwd .show-pwd{
    position: absolute;
    right: 0;
  }
  .login-container .login_box .login-form .login_pwd .el-input__suffix{
    right:20px;
  }
  .login-container .login_box .login-form .login_message{
    text-align: left;
    margin-bottom:24px !important;
    border:none;
    border-bottom:1px solid #C0C4CC;
  }
  .login-container .login_box .login-form .login_message .el-input /deep/ input{
    padding:0;
    margin:0;
    font-size:18px;
    height:24px;
    line-height: 24px;
    border:none;
  }
  .login-container .login_box .login-form .login_message_code{
    color: #409EFF;
    width:106px;
    height:36px;
    padding:0 !important;
    margin:0;
    line-height: 34px;
    border:1px #409EFF solid;
    background:transparent;
    transition:0.35s ease-in-out;
  }
  .login-container .login_box .login-form .login_message_code:hover{
    color:#FFF;
    background:#409EFF;
    transition:0.35s ease-in-out;
  }
  .login-container .login_box .login-form .login_message_code:active{
    color:#FFF;
    background:#409EFF;
    transition:0.35s ease-in-out;
  }
  .login-container .login_box .login-form .login_user_name{
    display:block;
    margin:0px auto 24px;
    border:none;
    border-bottom:1px solid #C0C4CC;
  }
  .login-container .login_box .login-form .login_user_name .input_tel{
    display: inline-block;
    text-align: left;
    width:88%;
    margin:12px auto;
    height:24px;
    line-height: 24px;
    border-left:1px #efefef solid;
    float:right;
  }
  .login-container .login_box .login-form .login_user_name .input_user /deep/ input{
    padding:0 0% 0 0% ;
    margin:0;
    font-size:18px;
    height:24px;
    line-height: 24px;
    border:none !important;
  }
  .login-container .login_box .login-form .login_user_name .el-input__suffix{
    top:-6px;
    right:0px;
  }

  .login-container .login_box .login-form /deep/ input::-webkit-input-placeholder{
    color:#909399;
    letter-spacing: 1px;
  }
  .login-container .login_box .login-form /deep/ input:focus::-webkit-input-placeholder{
    color:#409EFF;
  }
  .login-container .login_box .login-form .el-form-item__error{
    margin:2px auto;
  }
  .login-container .login_box button {
    margin:0 auto 32px;
    padding: 0;
  }
  .footer_copyright{
    display: block;
    text-align: center;
    margin:20px auto;
    overflow:hidden;
  }
  .footer_copyright span{
    display:block;
    text-align: center;
    font-size:14px;
    line-height: 20px;
    color:#606266;
  }
  .footer_copyright span img{
    display: inline-block;
    vertical-align: top;
    margin-top:8px;
    padding:0 20px;
  }
  .login-container::-webkit-scrollbar{
    width : 4px;
    height: 1px;
  }
  .login-container::-webkit-scrollbar-thumb {
    border-radius:10px;
    box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2);
    background:#535353;
  }
  .login-container::-webkit-scrollbar-track {
    box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius:10px;
    background:transparent;
  }
</style>
