<template>
  <div class="login_page">
    <transition name="form-fade" mode="in-out">
      <section class="form_contianer">
        <div class='titleArea rflex'>
          <img class="logo" :src="logo" alt="甜园商户后台">
          <span class='title'>甜园<i>商户后台</i></span>
        </div>
        <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
          <el-form-item prop="username" class="login-item">
            <span class="loginTips"><svg-icon icon-class="iconuser" /></span>
            <el-input   class="area" type="text" placeholder="用户名" v-model="loginForm.username" ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="login-item">
            <span class="loginTips"><svg-icon icon-class="iconLock" /></span>
            <el-input  class="area" type="password" placeholder="密码" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  @click.native.prevent="handleLogin" class="submit_btn">SIGN IN</el-button>
          </el-form-item>
          <div class="tiparea">
            <p class="wxtip">温馨提示：</p>
            <p class="tip">用户名为：admin/editor<span>(可用于切换权限)</span></p>
            <p class="tip">密码为：123456</p>
          </div>
          <div class="sanFangArea">
            <p class="title">第三方账号登录</p>
            <ul class="rflex">
              <li @click="loginByWechat">
                <svg-icon icon-class="iconwechat" />
              </li>
              <li>
                <svg-icon icon-class="iconweibo" />
              </li>
              <li>
                <svg-icon icon-class="iconGithub" />
              </li>
            </ul>
          </div>
        </el-form>
      </section>
    </transition>
  </div>
</template>

<script>
  import logoImg from "@/assets/img/logo.png";
  import {isvalidUsername} from '@/utils/validate';
  import login_center_bg from '@/assets/images/login_center_bg.png'

  export default {
    name: 'login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!isvalidUsername(value)) {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      };
      const validatePass = (rule, value, callback) => {
        if (value.length < 3) {
          callback(new Error('密码不能小于3位'))
        } else {
          callback()
        }
      };
      return {
        logo:logoImg,
        loginForm: {
          username: 'admin',
          password: '123456'
        },
        loginRules: {
          username: [{required: true, trigger: 'blur', validator: validateUsername}],
          password: [{required: true, trigger: 'blur', validator: validatePass}]
        },
        loading: false,
        dialogVisible:true,
        pwdType: 'password',
        login_center_bg
      }
    },
    methods: {
      loginByWechat(){
      },
      showMessage(type,message){
        this.$message({
          type: type,
          message: message
        });
      },

      showPwd() {
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
      },
        handleReg() {
            this.$router.push({path: '/reg'})
        },
         handleStore() {
                    this.$router.push({path: '/acceptStore'})
                },
      handleGit() {
       window.location.href='https://gitee.com/zscat/mallplus';
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            console.log('login')
            this.loading = true;
            this.$store.dispatch('Login', this.loginForm).then((res) => {
              console.log(res)
              this.loading = false;
              this.$router.push({path: '/'})
            }).catch((e) => {
              console.log(e);
              this.loading = false
            })
          } else {
            console.log('参数验证不合法！');
            return false
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .login_page{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/assets/img/bg9.jpg) no-repeat center center;
    background-size: 100% 100%;
  }
  .form_contianer{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    width:370px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    .titleArea{
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      font-size: 22px;
      width: 100%;
      padding-bottom: 20px;
      .logo{
        width: 40px;
        margin-right: 10px;
      }
      .title{
        i{
          color: #FF6C60;
        }
      }
    }

    .loginForm{
      .submit_btn{
        width: 100%;
        padding:13px 0;
        font-size: 16px;
      }
      .loginTips{
        position: absolute;
        left: 10px;
        z-index: 20;
        // color: #FF7C1A;
        font-size: 18px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .manage_tip{
    margin-bottom:20px;
    .title{
      font-family: cursive;
      font-weight: bold;
      font-size: 26px;
      color:#fff;
    }
    .logo{
      width:60px;
      height:60px;
    }
  }

  .tiparea{
    text-align:left;
    font-size: 12px;
    color: #4cbb15;
    padding: 10px 0;
    .tip{
      margin-left: 54px;
    }
  }

  .form-fade-enter-active, .form-fade-leave-active {
    transition: all 1s;
  }
  .form-fade-enter, .form-fade-leave-active {
    transform: translate3d(0, -50px, 0);
    opacity: 0;
  }
  .loginForm{
    .el-button--primary{
      background-color:#FF7C1A;
      border:1px solid #FF7C1A;
    }
  }
  .sanFangArea{
    border-top: 1px solid #DCDFE6;
    padding: 10px 0;
    display: none;
    .title{
      font-size: 14px;
      color: #8b9196;
      margin-bottom: 10px;
    }
    ul{
      li{
        flex:1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .svg-icon{
          font-size: 24px;
        }
      }
    }
  }
</style>
