<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">
          <!-- <img src="static/images/login_adpic.png">
          <span>广告语</span> -->
        </div>

        <div class="login_input">
          <el-form
            class="login-form"
            autocomplete="on"
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
            label-position="left"
          >
            <div class="form-box-login">

<div class="title-container">忘记密码</div>

              <el-form-item prop="tel" class="login_tel">
                  <span class="label">+86</span>
                  <el-input class="input_tel"
                            clearable
                            name="tel"
                            type="text"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            v-model="loginForm.tel"
                            autocomplete="off"
                            placeholder="请输入手机号"
                  />
              </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" oninput="value=value.replace(/[^\d]/g,'')" autoComplete="off" :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-button
                type="primary"
                style="width:100%; font-size: 16px; padding:15px 20px; margin-bottom:20px;"
                :loading="loading"
                :disabled="next_disabled"
                @click.native.prevent="forgetPwdNextStep"
              >{{$t('login.forgetPwdNextStep')}}
              </el-button>

              <div style="overflow:hidden;">
                <el-button type="text" @click="$router.push({name:'login'})" style="float:left">
                  {{$t('login.password_login')}}
                </el-button>
                <!-- <el-button type="text" @click="$router.push({name:'reg'})" style="float:right">{{$t('login.toregister')}}
                </el-button> -->
              </div>

              <div style="padding:8px;"></div>
            </div>
          </el-form>

        <el-dialog :title="$t('login.dialogVisible')" :visible.sync="dialogVisible" append-to-body width="400">
          <el-button
            style="margin:5px 0; width:100%;"
            @click="loginBySite(item.id)"
            v-for="(item,index) in site_list"
            :key="index"
            size="medium"
          >{{item.name}}
          </el-button>
        </el-dialog>
        </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
  export default {
    data() {
      const validateTel = (rule, value, callback) => {
        const validValue = value
          ? value.replace(/\s/g, '').replace(/&nbsp;/gi, '')
          : 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 validatePassword = (rule, value, callback) => {
        if (value.length < 5) {
          callback(new Error(this.$t('login.validatePassword')))
        } else {
          callback()
        }
      }
      return {
        bools:true,
        sendBtnText: this.$t('login.verify_code_get'),
        // isSendCode:false,
        // mobile: "",
        // verifyCode: "",
        dialogVisible: false,
        sendcodeloading: false,
        username5: '',
        site_list: [],
        loginForm: {
          username: '',
          verify: '',
          site_id: 0,
          tel: ''
        },
        loginRules: {
          username: [{required: true, trigger: 'blur', validator: validateTel}],
          code: [{required: true, trigger: 'blur', message: this.$t('login.verify_code_input')}]
        },
        passwordType: 'text',
        loading: false,
        showDialog: false,
        sended: true,
        next_disabled: true,
        sendInt: 60,
      }
    },
    watch:{
      'loginForm':{
        handler(val){
          if(!(/^1[123456789]\d{9}$/.test(val.tel))){
            this.sended = true
          }else{
            this.sended = false
          }
          if (val.test != '' && val.verify != '') {
            this.next_disabled = false
          }else{
            this.next_disabled = true
          }
        },
        immediate: true,
        deep:true,
      }
    },
    methods: {
      sendedCount() {
        const self = this
        if (this.sendInt == 0) {
          this.sendBtnText = this.$t('login.sendedCount')
          this.bools = true
          this.sended = false
        } else {
          this.sended = true
          this.sendBtnText = this.sendInt + this.$t('login.sendedCount_befor')
          this.sendInt--
          setTimeout(function () {
            self.sendedCount()
          }, 1000)
        }
      },
      sendCode() {
        if(this.bools){
          const self = this
          if (this.loginForm.tel === '') {
            this.$message.error(this.$t('login.sendCode'))
            return false
          }
          this.$http('post','/api/send-sms',{mobile: this.loginForm.tel, type: 2},).then(res => {
            if (res.data.code == 1) {
              this.sendInt = 60
              this.sendedCount()
              this.$message.success(this.$t('login.sendCode_over'))
            } else {
              this.$message.error(res.data.msg)
            }
          }).finally(()=>{
            setTimeout(()=>{
              this.bools = true
            },5000)
          })
          this.bools = false
        }
      },
      forgetPwdNextStep() {
        if (this.loginForm.tel === '') {
          this.$message.error(this.$t('login.sendCode'))
          return false
        } else if (this.loginForm.verify === '') {
          this.$message.error(this.$t('login.verify_code_input'))
          return false
        }
        this.$http('post','api/verify/check', {
          type:2,
          tel:this.loginForm.tel,
          verify: this.loginForm.verify,
        }).then(res=>{
          if(res.data.code == 1){
            this.$router.push({//跳转
              name: 'resetPwd',
              query: {
                mobile: this.loginForm.tel,
                verifyCode: this.loginForm.verify
              }
            })
          }
        }).catch(err=>{
          console.log(err)
        })
      }
    },
    created() {
      document.title = this.$t('login.title_gongdaoyun')
      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-form{
    width: 320px;
    margin: 0 auto;
    margin-top: 95px;
  }
  .login-container .login_box .login-form .title-container{
    font-size: 22px;
    font-weight: bold;
    padding: 30px 0;
    text-align: left;
  }
  .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 /deep/ .el-input__suffix{
    top:-6px;
    right:0px;
  }
  .login-container .login_box .login-form .login_pwd{
    border:none;
    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 /deep/ .el-input__suffix{
    right:20px;
  }
  /*.login-container .login_box .login-form:hover .login_tel{*/
  /*border-bottom: 1px solid #409EFF;*/
  /*}*/
  /*.login-container .login_box .login-form:active .login_tel{*/
  /*border-bottom: 1px solid #409EFF;*/
  /*}*/
  .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 .login_keeppwd{
    float:left;
  }
  .login-container .login_box .login_keeppwd .el-checkbox__inner{
    width:20px;
    height:20px;
    background:#fff;
  }
  .login-container .login_box .login_keeppwd .el-checkbox__inner::after{
    height: 12px;
    left: 6px;
    border: 2px solid #409EFF;
    border-top: none;
    border-left: none;
  }
  .login-container .login_box .login_keeppwd .el-checkbox__label{
    padding-left:8px;
    font-size:16px;
    color:#909399;
  }
  .login-container .login_box .login_forgepwd{
    float:right;
  }
  .login-container .login_box .login_forgepwd span{
    font-size:16px;
    color:#909399;
  }
  .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{
    width:106px;
    height:36px;
    padding:0 !important;
    margin:0;
    line-height: 34px;
    color: #8cc5ff;
    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_code_box{
    position:relative;
    display:inline-block;
    text-align: center;
    width:582px;
    height:614px;
    float:right;
    overflow:hidden;
  }
  .login-container .login_box .login_code_box .title{
    display: block;
    font-size: 24px;
    color: #1a1a1a;
    line-height: 33px;
    margin:100px auto 30px;
  }
  .login-container .login_box .login_code_box span{
    display:block;
    font-size:16px;
    line-height: 32px;
  }
  .login-container .login_box .login_code_box .code{
    display:inline-block;
    width:200px;
    height:200px;
    margin-bottom: 20px;
    overflow:hidden;
  }
  .login-container .login_box .login_code_box .code img{
    width:100%;
    height:auto;
  }
  .login-container .login_box .login_code_box .social_soft{
    display:inline-block;
    width:260px;
    margin:30px auto;
    padding:16px 0;
    border-top:1px #efefef dashed;
  }
  .login-container .login_box .login_code_box .social_soft .title{
    display:inline-block;
    vertical-align: top;
    text-align: left;
    width:80%;
    margin:0 auto;
    font-size:16px;
  }
  .login-container .login_box .login_code_box .social_soft .svg-icon{
    display: inline-block;
    vertical-align: top;
    width:18%;
    font-size:36px;
  }
  .login-container .login_box .login_code_box .social_soft .download_app{
    width:260px;
    margin:30px auto;
    padding:16px 0;
    border:1px red solid;
    background:red;
    border-radius:8px;
  }
  .login-container .login_box .login_code_box .social_soft .download_app img{
    width:40px;
  }
  .login-container .login_box button {
    margin:0 auto 32px;
    padding: 0;
  }
  .login-container .login_box .login_reg{
    display:inline-block;
    overflow:hidden;
  }
  .login-container .login_box .login_reg span{
    font-size:16px;
    color:#909399;
    letter-spacing:1px;
  }
  .footer_copyright{
    margin:20px 0;
    /* display: block;
    text-align: center;
    width:auto;
    margin:80px 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;
  }
  .footer_copyright .copyright{
    /* margin-top:14px; */
  }
  .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>
