<template>
  <div class="login-container">
    <div class="login_box">
      <!-- 头像区域 -->
      <!-- <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div> -->
      <!-- 登录表单区域 -->
      <!-- <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px"  class="login_form">
        <el-form-item prop="user_name">
          <el-input prefix-icon="el-icon-search" v-model="loginForm.user_name" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-search" v-model="loginForm.password" placeholder="密码" type="password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>  
      </el-form> -->
    </div>
    <div class="new-login">
      <div class="new-login-l">
        <img src="@/assets/images/logo.png" alt="">
      </div>
      <div class="new-login-r">
        <div class="title">用户登录：</div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login-form" auto-complete="on" label-position="left">
          <el-form-item prop="user_name">
            <!-- <span class="svg-container">
                <svg-icon icon-class="user" />  
            </span>  -->
            <i class="el-icon-user-solid"></i>
            <el-input   ref="user_name" v-model="loginForm.user_name" placeholder="用户名" name="user_name" type="text" tabindex="1" auto-complete="on" />
          </el-form-item>

          <el-form-item prop="password" class="password">
            <!-- <span class="svg-container">
               <svg-icon icon-class="password" /> 
            </span> -->
            <i class="el-icon-unlock"></i>
            <el-input  :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
            <span class="show-pwd" @click="showPwd">
              <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
            </span>
          </el-form-item>
          <!-- <el-form-item prop="password" class="rememberPassword">
            <input id="remember-password-checkbox" v-model="rememberPassword" type="checkbox" value="remember-me" @click="doRememberPassword($event)">
            <span for="remember-password-checkbox">
              记住密码
            </span>
            </input>
          </el-form-item> -->
        </el-form>
        <el-button   type="primary" :loading="loading" class="btn" @click.native.prevent="login">登录</el-button>
      </div>
    </div>
    <div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
      <p style="text-align:center;line-height:16px;">
        版权所有
        <a href="http://www.dairyinfo.com.cn" target="_blank">上海科湃腾信息科技有限公司</a>
        <!-- <a style="margin-left: 20px;" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备11008303号-3 </a> -->
      </p>

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

<script>
import { GetDataByName, PostDataByName, ajaxData } from '@/api/common'
import {md5} from '@/utils/md5'



export default {
  data() {
    return {
      loginForm:{
        user_name:"", //admin cyj
        password:""  //123456
 
      },
      //表单验证规则
      loginFormRules:{
        user_name:[
          { required:true, message:"请输入登录名称", trigger:"blur" }
        ],
        password:[
          { required:true, message:"请输入登录密码", trigger:"blur" } 
        ]
      },

      loading: false,
      passwordType: 'password',
      redirect: undefined,
      rememberPassword: ''
    }
  },


  created(){
     
  },
  methods:{
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    login(){
      var me = this 

      //validate表单预验证
      this.$refs.loginFormRef.validate( valid => {
        //如果false,就返回
        if(!valid) return;
        // var g_token = 111111
        //  sessionStorage.setItem("g_token",g_token)

     // me.$router.push("/home")
 
        //方法一：直接用axios请求
        //.post是请求方式 也可以是Get
        //这里 /test是后端的接口地址
        //loginForm请求发的参数


        


        var send_data = {
          user_name:me.loginForm.user_name,
          password: md5(me.loginForm.password) 
        }
        this.$http.post("/login",send_data ,{ headers:{  } }).then(function(res){
          //打印请求成功结果
          console.log('res',res)
          console.log('res.data',res.data) 
          if (res.data.code == 200) {
				   
           var g_token = res.data.data.token
            // 设置全局缓存token
            sessionStorage.setItem("g_token",g_token)
            console.log('g_token',g_token)
            
            var g_pastureId = res.data.data.pastureId
            var g_employeeId = res.data.data.employeeId
            var g_userNameSee = res.data.data.userName
            var g_actualName = res.data.data.actualName
            
            
            sessionStorage.setItem("g_pastureId",g_pastureId)
            sessionStorage.setItem("g_employeeId",g_employeeId)
            sessionStorage.setItem("g_userNameSee",g_userNameSee)
            sessionStorage.setItem("g_actualName",g_actualName)
 
        
 
              //成功登录后跳转页面
              me.$router.push("/home")
    
            } else {
              me.$message({ type: 'error', message: '登陆失败！' + res.data.msg, duration: 2000 })
             
            }
        }).catch(function(error){
          //打印请求失败结果
          console.log('error',error)
          me.$message({ type: 'error', message: '请求错误！' +error.response.data.errors, duration: 2000 })
        })

        

        // //方法二：用封装xios请求 、 路径写死
        // PostDataByName(this.loginForm).then(response => {
        //   //打印请求成功结果
        //   console.log('response',response)
        // })

    
  

        //方法二：用封装axios请求、路径不写死
        // ajaxData("/login"  ,this.loginForm).then(res => {
        //   //打印请求成功结果
        //   console.log('response',res)
        //   this.$message({ type: 'error', message: '请求成功', duration: 2000 })
        //   //本地存储数据
        //   window.sessionStorage.setItem("token",res.data)
        //   //跳转路由到Home页面
        //  this.$router.push("/home")
        // })
            //跳转路由到Home页面
         //this.$router.push("/home")
       })

      
      
      
    },

   
    
    //重置登录表单
    resetLoginForm(){
      //this.$refs.loginFormRef直接绑定  resetFields()重置
      this.$refs.loginFormRef.resetFields();
    }
  }
}
</script>
<!-- 加了scoped，则是仅在此组件里生效 -->
<style scoped>
 
/* .login_container{background-color:#2b4b6b;height: 100%}
.login_box{width:450px;height:300px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}
.avatar_box{height:130px;width:130px;border:1px solid #eee;border-radius:50%;padding:10px;box-shadow:0 0 10px #ddd;position:absolute;left:50%;transform:translate(-50%, -50%);}
.avatar_box img{width:100%}
.login_form{position:absolute;bottom:0;width:100%;padding:0 20px;box-sizing: border-box}
.btns{display:flex;justify-content: flex-end} */


.login-container .el-input input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #000 !important;
}

.login-container{position: relative;height: 100%;width: 100%; min-height: 500px;background:  url("../assets/images/nlogin-bg1.jpg") no-repeat; }

.new-login{   width: 50%;height: 42%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;  }
.new-login-l{background: red;float:left;height:100%;width:50%;background:  url("../assets/images/nlogin-bg2.png") no-repeat;position: relative; }
.new-login-l  img{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50%;height:23%;}
.new-login-r{ background: #fff;float:left;height:100%;width:50%;position: relative;}
.new-login-r .title{margin-top: 10%;font-size: 20px;font-weight: 600;color: #019969;text-align: center;}
.new-login-r .login-form{  position: relative;width: 520px;max-width: 100%;overflow: hidden;height: 48%;}
.login-form .svg-container{padding: 6px 5px 6px 15px; color: #999; vertical-align: middle; width: 30px; display: inline-block;} 
.login-form .el-input {  display: inline-block; width: 80%;   }
    
.new-login-r  .el-form-item {
          border: none; background: #fff; border-radius: 5px; color: #999;width: 73%; margin: 10px auto;height: 30% }
.new-login-r  .el-form-item  /deep/.el-form-item__content {
            line-height: 16%; border-bottom: 1px solid #e7e7e7;
          }
          .new-login-r  .el-form-item  .el-form-item__content .el-input  /deep/.el-input__inner{border: none !important;}
       
          .rememberPassword  /deep/.el-form-item__content {line-height:16%; border: none;padding-bottom: 10px;}
          .rememberPassword  /deep/.el-form-item__content span{padding-left: 5px;}  




        .password{margin-top: 10px;margin-bottom: 20px;}
        .btn{
          position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;  }
          .btn  span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
 





    
</style>
