<template>
  <div class="Login">
    <div class="login-con">
      <div class="left_con">
        <img src="../../assets/image/login_left_con.png" alt>
      </div>
      <div class="right_cons">
        <p slot="title" class="login-title">工作室OA管理系统</p>
        <p class="login_text">管理员登录</p>
        <Form ref="loginForm" :model="loginForm" :rules="loginRule" class="login-form">
          <FormItem prop="username" class="username fl">
            <Input v-model="loginForm.username" size="large" @on-enter="login('loginForm')" type="text" ></Input>
          </FormItem>
          <img src="../../assets/image/login_user.png" alt='' class="fl input-user-img">
          <FormItem prop="password" class="password clear fl">
            <Input v-model="loginForm.password" size="large" @on-enter="login('loginForm')" type="password"></Input>
          </FormItem>
          <img src="../../assets/image/login_password.png" alt='' class="fl input-pwd-img">
          <FormItem prop="auth" class="auth clear fl">
            <Input v-model="loginForm.auth" size="large" @on-enter="login('loginForm')" type="text"></Input>
          </FormItem>
          <div class="fl auth_img_div">
            <img :src="auth_img" alt='' @click="getVerificationCode">
          </div>
          <img src="../../assets/image/login_abc.png" alt='' class="fl input-code-img" >
        </Form>
        <Button class="clear login_btn" @click="login('loginForm')">登录</Button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import { setStore, setCookie } from "@/utils/utils";
export default {
  name: "login",
  data() {
    return {
      auth_img: this.$api.verifyImg(),
      loginForm: {
        username: "",
        password: "",
        auth: ""
      },
      title:'',
      loginRule: {
        username: { required: true, message: "账号不能为空", trigger: "blur" },
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "密码的长度为6-20", trigger: "blur" }
        ],
        auth: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
          { pattern: /^[\d,\w]{4}$/, message: "请输入正确的文字验证码！",trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["curRoute"]),
  },
  methods: {
    login(fromName) {
      this.$refs[fromName].validate(valid => {
        if (valid) {
          this.$api.login({
            no_needtoken:true,
            name:this.loginForm.username,
            password:this.loginForm.password,
            vertify:this.loginForm.auth,
          }).then(data=>{
            if(data.code===200){
              this.$Message.info('登录成功')
              let info ={...data.data}
              this.$store.commit("userInfo", info);
              setStore("userInfo", info);
              this.$router.push({ path: "index"})
              //this.getSiteInfo()
             
            }else{
              this.$Message.info(data.msg)
              this.getVerificationCode()
            }
          })
        }
      });
    },
    getSiteInfo(){
      this.$api.getSiteInfo().then(data => {
        if(data.code==200){
          setStore('logoIco',{logo:data.data.admin_logo_url,ico:data.data.admin_icon_url})
        }else{
          setStore('logoIco',{logo:'',ico:''})
        }
      })
    },
    getVerificationCode(){
      this.auth_img=''
      let i =Math.random()*100
      setTimeout(() => {
        this.auth_img=this.$api.verifyImg()+ '?rand=' +i
      }, 100);    
    },
    // 获取网站头部的title
    getWebTopTitle() {
      this.$api.getTitleInternet().then(response => {
        if(response.code == 200) {
          this.title = response.data
          document.title = this.title 
        }else {
          setStore('titleName','')
        }
      })
    }
  },
  created(){
    this.getWebTopTitle()
    if(this.$route.query.isMessageInfo){
      this.$Message.info('请先登录')
    }
  }
};
</script>
<style scoped>
.username,
.password {
  width: 400px;
}
.auth {
  width: 270px;
}
.login_text {
  width: 420px;
  margin: 20px auto;
  margin-top: 60px;
  text-align: left;
  font-size: 18px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: rgba(34, 34, 34, 1);
}
.login-form {
  width: 420px;
  height: 220px;
  margin: 0px auto;
}
.left_con {
  float: left;
  position: relative;
  top: -6px;
  left: 10.5px;
}
.Login {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../../assets/image/login_bg.png") no-repeat;
  background-size: cover;
}
</style>



