<template>
  <div id="login-container" :style="bgStyle">
    <!-- <img class="logo" src="@/assets/images/logo.png" alt="logo"> -->
    <a-card class="login-box">
      <h3 style="color: #40a9ff;">{{logoName}}</h3>
      <a-form :form="form">
        <a-form-item>
          <a-input  v-decorator="['username',{ validateTrigger:'blur',  rules: [ { required: true,validator: validate} ] }]" placeholder="用户名">
            <a-icon
              slot="prefix"
              type="user"
              style="color:rgba(0,0,0,.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input  v-decorator="['pwd',{ validateTrigger:'blur',  rules: [ { required: true,validator: validate} ] }]" type="password" placeholder="密码">
            <a-icon
              slot="prefix"
              type="lock"
              style="color:rgba(0,0,0,.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button @click="login" type="primary" block html-type="submit">
            登录
          </a-button>
        </a-form-item>
      </a-form>
      <Loader msg="登录中..."/>
    </a-card>
  </div>
</template>

<script>
import bgImg from '@/assets/images/login-bg.png'
import Loader from '@/components/Loader/loader'
import { encryptDes} from '@/util/des-cryptojs'

export default {
  name: 'Login',
  components: {
    Loader,
  },
  data() {
    return {
      tabName: 'login',
      form: this.$form.createForm(this),
      bgStyle: {'background-image': 'url(' + bgImg +')'},
      loginInfo: {},
      logoName: '',
    }
  },
  created() {
    this.getLogo()
  },
  methods: {
    getLogo(){
      this.$ajax.get({
        url: this.$api.GET_PROJECT,
      }).then(res => { 
        if (res.code==200) {
          document.title = this.$com.confirm(res, 'data.content.prjName', [])
          this.logoName = this.$com.confirm(res, 'data.content.prjName', []) || '系统登录'
        }
      })
    },
    //必填验证
    validate(rule, value, callback){
      if (!value && typeof value!='number') {
        callback('必填！')
      }else{
        callback()
      }
    },
    login() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const params = {
            'username': this.form.getFieldValue('username'), 
            'pwd': encryptDes(this.form.getFieldValue('pwd'))
          } 
          this.$ajax.post({
            url: this.$api.POST_LOGIN,
            params,
          }).then(res => { 
            const store = JSON.parse(sessionStorage.getItem('VuexStore')) 
            if (store) store.content = ''
            sessionStorage.setItem('VuexStore', JSON.stringify(store))
        
            // 当前登录的账号密码的返回值
            if (res.code == 200) { 
              res.token = this.$com.confirm(res, 'data.content', [])
              // console.log(res.token)
              this.$cookie.set('token', 'bearer ' + res.token.access_token)
              this.$cookie.set('userName', res.name) // 存储当前账号的用户名
              this.$router.push({
                path: '/portal-home'
              })
            } else {
              // this.$message.error(res.msg)
            }
          })
        }
      })
    },
  },
}
</script>

<style scoped>
#login-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
}
.login-box {
  width: 280px;
  background: #ffffff;
  border-radius: 5px;
}
.login-box input {
  margin-top: 20px;
}
.login-box .ivu-form-item-content {
  line-height: 0;
}
.btn-wrapper {
  text-align: center;
  margin-bottom: 0;
}
.btn-wrapper button {
  width: 100%;
}
.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 30px;
  /* border: 2px solid #fff;
  border-radius: 50%; */
  padding: 5px;
}
.type-wrapper {
  font-size: 12px;
  color: #c9c9c9;
  margin-bottom: 10px;
}
.type-wrapper span {
  cursor: pointer;
}
.type-wrapper span:hover {
  color: #0076FF;
}
.type-wrapper span.active {
  color: #0076FF;
}
.pwd-operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1px;
  margin-bottom: 10px;
}
</style>
