<template>
  <div class="user">
    <img src="~static/images/bg2.png" alt="" class="pos">
    <div class="user-login">
      <div class="login-type flex">
        <!-- <div class="pos">{{message}}</div> -->
        <div @click="change" :class='[type==0?"active":""]' class="login_a">密码登录</div>
        <div @click="change" :class='[type==2?"active":""]' class="login_a">手机验证码登录</div>
      </div>
      <div class="el-form">
        <!-- 密码登录 -->
        <el-form ref="param" :model="param" :rules="rules" class="ms-content" v-if="type==0">
          <el-form-item prop="username" style="width:3rem;height: 0.45rem;">
            <el-input name="username" v-model="param.account" placeholder="请输入账号" key="param.username">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input name="password" v-model="param.password" placeholder="请输入密码" key="param.password" show-password>
            </el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button v-on:keyup.13.native="submit" type="primary" @click="submitForm1()" style="width: 100%;">登录</el-button>
          </div>
        </el-form>
        <!-- 手机验证码验证 -->
        <el-form ref="phone" :model="phone" :rules="rules" class="ms-content" v-if="type==2">
          <el-form-item prop="phone" class="item">
            <el-input v-model="phone.phone" placeholder="请输入手机号" maxlength="30"></el-input>
          </el-form-item>
          <div class="getphonecode">
            <el-form-item prop="phonecode" class="item">
              <el-input v-model="phone.phonecode" placeholder="请输入短信验证码" style="width:1.8rem" maxlength="30"></el-input>
            </el-form-item>
            <div v-show="Verification" class="phonecode handle" @click = "getPhoneCode">获取短信验证码</div>
            <div v-show="!Verification" class="phonecode"><span>{{timer}}</span>秒后重新获取</div>
          </div>
          <div class="login-btn">
            <el-button  v-on:keyup.13.native="submit" type="primary" @click="submitForm2()" style="width: 100%;">登录</el-button>
          </div>
        </el-form>
        <div class="login-font flex-between">
          <div @click="forget" class="handle">忘记密码</div>
          <div @click="examine" class="handle">我要注册</div>
        </div>
        <!-- <div class="code-login handle" @click="changephone">{{changemessage}}</div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import {powerLogin} from '~/api/bid/login';
  import {getSecond,sendSms,phoneCode1} from '@/common/list.js';
  import Cookies from 'js-cookie'
  export default {
    data() {
      return {
        Verification:true,
        timer:60,
        changemessage: "手机验证码登录",
        message: "密码登录",
        type: "0",
        yzshow: true,
        param: {
          account: "",
          password: ""
        },
        phone: {
          phone: "",
          phonecode: ""
        },
        rules: {
          account: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          phonecode: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        },
      };
    },
    mounted(){
      var _this = this;
        document.onkeydown = function(e) {
          let key = window.event.keyCode;
          if (key == 13) {
            _this.submitForm1();
          }
        };
        var _that = this;
        document.onkeydown = function(e) {
          let key = window.event.keyCode;
          if (key == 13) {
            _that.submitForm2();
          }
        };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //发送短信验证码
      async getPhoneCode(){
        let message = {}
        message.phone = this.phone.phone
        message.type = 2
        const {data,code,msg} = await sendSms(message)
        if(code ==200){
          this.Verification = false;      //点击button改变v-show的状态
            let auth_timer = setInterval(()=>{  //定时器设置每秒递减
              this.timer--;        //递减时间
              if(this.timer<=0){  
                this.Verification = true;    //60s时间结束还原v-show状态并清除定时器
                clearInterval(auth_timer)
              }
            },1000)
            this.$message.success(msg)
        }else{
          this.$message.error(msg)
        }

      },
      async submitForm1() {
        try {
          const valid = await this.$refs['param'].validate()
          if (valid) {
            const {
              msg,
              code,
              data
            } = await powerLogin(this.param)
            //将手机号和密码发送
            console.log(data,code)
            if (code == 200) {
              Cookies.set("token",data);
              this.$message({
                message: msg,
                type: 'success',
                duration:1500
              });
              setTimeout(()=>{
                this.$router.push("/")
              },1500)
            } else {
              this.$message({
                message: msg,
                type: 'error'
              });
            }
          }
        } catch (err) {
          console.log(err);
        }
      },
      async submitForm2() {
        try {
          const valid = await this.$refs['phone'].validate()
          if (valid) {
            /* const {
              msg,
              code,
              data
            } = await powerLogin(this.param) */
            //将手机号和手机验证码发送
            let mess = {}
            mess.account = this.phone.phone
            mess.password = this.phone.phonecode
            const {data,code,msg} = await phoneCode1(mess)
            console.log(data,code)
            if (code == 200) {
              Cookies.set("token",data);
              this.$message({
                message: msg,
                type: 'success',
                duration:1500
              });
              setTimeout(()=>{
                this.$router.push("/")
              },1500)
            } else {
              this.$message({
                message: msg,
                type: 'error'
              });
            }
          }
        } catch (err) {
          console.log(err);
        }
      },
      /* changephone() {
        let type = this.type;
        if (type == '0' || type == '2') {
          this.type = 2;
          this.changemessage = "手机验证码登录"
          this.message = "密码登录"
        } else if (type == '2') {
          this.type = 0;
          this.changemessage = "密码登录"
          this.message = "手机验证码登录"
        }
      }, */
      change() {
        let type = this.type;
        if (type == '0') {
          this.type = 2
        } else if (type == '2') {
          this.type = 0
        }
      },
      examine() {
        this.$router.push("/login/examine")
      },
      forget() {
        this.$router.push("/login/seek")
      }
    }
  };
</script>

<style scoped>
.handle{
  cursor: pointer;
}
.pos{
  position: absolute;
  left:25%;
}
  .getphonecode {
    position: relative;
  }

  .getphonecode>.phonecode {
    font-size: .14rem;
    font-weight: 400;
    color: rgba(51, 136, 255, 1);
    position: absolute;
    top: 0.13rem;
    left: 2.0rem;
    width: 2rem;
  }

  .code-login {
    font-size: .14rem;
    color: rgba(4, 134, 254, 1);
    text-align: center;
    margin-top: 0.3rem;
  }

  .login-font {
    margin-top: 0.14rem;
  }

  .user {
    width: 100%;
    height: 6rem;
    /* background: rgba(216, 216, 216, 1); */
    background:url("~static/images/picture.jpg") no-repeat;
    background-size: cover;
    position: relative;
    /* z-index: 999; */
  }

  .user-login {
    width: 3.80rem;
    height: 4.34rem;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
  }

  .login-type {
    width: 100%;
    height: .77rem;

  }

  .login-type .active{
    border-bottom: 2px solid rgba(4, 134, 254, 1);
    color: rgba(4, 134, 254, 1);
    
  }
  .login-type>div {
    height: 0.77rem;
    width: 1.9rem;
    text-align: center;
    line-height: 0.77rem;
    color: gray;
    font-size: .2rem;
  }

  .login-type>.active {
    border-bottom: 2px solid rgba(4, 134, 254, 1);
  }


  .el-form {
    padding: 0.2rem
  }
  /* .login-btn{
    cursor: pointer;
  } */
  .login_a{
    cursor: pointer;
  }
  .pos{
    margin-left: 0px;
  }
</style>
