<template>
  <div class="login-div">
    <div style="width: 50%;background: rgb(88,103,127)" class="login-left">
      <div style="margin-top: 90px;margin-left: 30px">
        <div style="margin-left: 50px;">
          <div class="logo" style="width: 50px;height: 50px;float: left;margin-right: 20px;">
            <img src="../static/images/fileIcon/timg.png" alt="" style="width: 100%;height: 100%;border: 1px solid white;border-radius: 48px;">
          </div>
          <div class="title">
            <p style="font-size: 30px;color: white;font-weight: bold;">
              LIMS
            </p>
          </div>
        </div>
        <div style="margin-left: 50px;">
          <p style="font-size: 24px;color: #ffffff;">
            烟草实验室管理平台
          </p>
        </div>
        <div style="margin-top: 70px;margin-right: 50px;margin-left: 50px;color: white;background-color: red;">
          <p style="text-align: center" />
        </div>
      </div>
    </div>
    <div style="width: 50%;" class="login">
      <div style="margin-left: 40px;margin-right:40px;margin-top: 50px">
        <el-form id="login-form" ref="login-form">
          <p style="font-size: 24px;color: #40485B">
            登录
          </p>
          <el-form-item label="">
            <el-input v-model="formObj.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="formObj.password" placeholder="密码" show-password />
          </el-form-item>
        </el-form>
        <el-button style="text-align: center;width: 100%;background-color: #FE7300;color: white;border: none;border-color: white;outline:none;" @click="_login">
          <span style="font-size: 18px;">登录</span>
        </el-button>
        <div style="width:100%;font-size: 13px;margin-bottom: 15px;text-align: left;position: relative">
          <el-checkbox v-model="checkListValue" size="medium " @change="_psdChange">
            <span style="font-size: 13px;color: #666">记住密码</span>
          </el-checkbox>
        </div>
        <p style="color: red;">
          {{ msg }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Store from 'store2'
import { codeRule, sysResource } from '../api'
export default {
  layout: 'blank-layout',
  name: 'Login',
  data() {
    return {
      formObj: {
        username: '',
        password: '',
        newPwd: ''
      },
      // 是否记住密码
      checkListValue: false,
      msg: '',
      url: '',
      vCode: '',
      count: '',
      timer: null,
      content: '倒计时' // 按钮里显示的内容
    }
  },
  mounted() {
    this._rememberUser()
  },

  methods: {
    _rememberUser() {
      console.log('记住密码')
      console.log(localStorage.getItem('username'))
      this.$nextTick(() => {
        if (localStorage.getItem('username') === null) {
          console.log(1564980847)
          this.formObj.username = ''
          this.formObj.password = ''
          this.checkListValue = ''
        } else {
          // this.formObj.username = localStorage.getItem('username')
          // this.formObj.username = JSON.parse(localStorage.getItem('username'))
          // this.formObj.password = JSON.parse(localStorage.getItem('password'))
          this.formObj.password = localStorage.getItem('password')
          this.formObj.username = localStorage.getItem('username')
          console.log(typeof localStorage.getItem('username'))
          console.log(localStorage.getItem('password'))
          console.log(this.formObj.password)
          this.formObj.username = this.formObj.username
            .replace('"', '')
            .replace('"', '')
          console.log(this.formObj.password)
          this.formObj.password = this.formObj.password
            .replace('"', '')
            .replace('"', '')
          console.log(this.formObj.password)
        }
        this.checkListValue = true
      })
    },
    _login: async function() {
      console.log('登录被调用')
      const data = this.formObj
      const result = await codeRule.login(data)
      console.log(result)
      if (result) {
        this.$router.push('/')
        if (this.checkListValue) {
          localStorage.setItem('username', this.formObj.username)
          if (localStorage.getItem('inactivate')) {
            // 第一次激活后保存密码
            localStorage.setItem('password', this.formObj.newPwd)
          } else {
            // 已经激活状态保存密码
            localStorage.setItem('password', this.formObj.password)
          }
        } else {
          localStorage.removeItem('username')
          localStorage.removeItem('password')
        }
        //
        // this._setBreadCrumb(this.$route)
        if (!Store.session('showBtnList')) {
          this._getPermissionBtn()
        }
      } else {
        this.$Message.warning('用户名或密码错误')
      }
    },
    _psdChange(data) {
      this.checkListValue = data
    },
    _getPermissionBtn: async function() {
      const result = await sysResource.getBtn()
      Store.session('showBtnList', result ? result.join(',') : [])
      // console.log('获取按钮权限===', result)
    }
  }
}
</script>

<style scoped>
.div-inline {
}

.login-div {
  clear: both;
  width: 800px;
  height: 500px;
  margin: 100px auto;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  /*box-shadow: 0 0 25px white;*/
}
.login {
  width: 50%;
  float: left;
  margin-top: 2%;
  height: 100%;
  /*box-shadow: 0 0 25px white;*/
  border-radius: 1px;
}
.login-left {
  width: 50%;
  float: left;
  height: 100%;
  /*box-shadow: 0 0 25px white;*/
  border-radius: 1px;
}
</style>
