<template>
  <div class="signIn">
    <div class="box cf">
      <div class="left" :style="{ background: 'url(' + rootPath + 'images/login/signIn-img.png) center center no-repeat', 'background-size': 'cover' }">
        <h3>{{ sysInfo.banner }}</h3>
        <p>{{ sysInfo.subBanner }}</p>
      </div>
      <div class="right">
        <div class="logo cf">
          <img :src="rootPath + 'images/login/logo.png'" />
          <h2>{{ layout.showI18n ? $t('Front_Label_Setting_Info_Title') : sysInfo.title }}</h2>
          <small></small>
        </div>
        <input type="text" v-model="username" @keyup="submit" class="username" autofocus :placeholder="$t('Front_Msg_Please_Input_Account')" />
        <input type="password" v-model="password" @keyup="submit" class="password" :placeholder="$t('Front_Msg_Please_Input_Password')" />
        <!--<div class="remenber">
                    <label for="remenber" class="remenber1"><input type="checkbox" ng-model="remember">记住我</label>
                </div>-->
        <button type="button" @click="submit()" class="sign-in">{{ $t('Front_Btn_Login') }}</button>
        <button type="button" @click="close" class="exit">{{ $t('Front_Btn_Exit') }}</button>
      </div>
    </div>
    <div class="cpt">{{ sysInfo.copyright }}</div>
  </div>
</template>
<script>
  import { mapActions } from 'vuex';
  import mixinPage from '../../mixins/page';
  import permissionApi from '../../api/permission';

  export default {
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        username: '',
        password: '',
        autoLogin: true
      };
    },
    computed: {},
    created() {},
    methods: {
      ...mapActions('admin/account', ['login']),
      /**
       * @description 登录
       * 表单校验已有 iView Pro 自动完成，如有需要修改，请阅读 iView Pro 文档
       */
      async submit(e) {
        if (e) {
          var keycode = window.event ? e.keyCode : e.which;

          if (!keycode) {
            return;
          }

          if (keycode !== 0 && keycode !== 1 && keycode !== 13) {
            return;
          }
        }

        if (this.username && this.password) {
          await this.login({
            username: this.username,
            password: this.password
          });

          // 初始化菜单和权限
          let res = await permissionApi.query();

          // 默认包含首页
          res.menus.unshift({
            name: '首页',
            subName: 'Home',
            parentID: null,
            url: 'home',
            templateUrl: '@/home',
            icon: 'fa fa-home'
          });

          this.$store.dispatch('admin/menu/setSider', res.menus);
          this.$store.dispatch('admin/permission/set', res.permissions);

          // 重定向对象不存在则返回顶层路径
          setTimeout(() => {
            this.$router.replace(this.$route.query.redirect || '/home');
          });
        }
      },
      close() {
        this.confirm('Front_Sure_To_Exit', () => {
          window.location.href = 'about:blank';
          window.close();
        });
      }
    }
  };
</script>

<style src="../../styles/css/login.css" scoped></style>
