<template>
  <div class="login">
    <!-- 背景图片 -->
    <section class="login-bg">
      <div class="login-bg__close"></div>
      <div class="login-bg__angle"></div>
      <div class="login-bg__note left"></div>
      <div class="login-bg__note right"></div>
    </section>
    <section class="login-logo">
      <div class="login-logo__img"></div>
      <h2>工作台</h2>
    </section>
    <!-- 内容区 -->
    <main class="login-content">
      <!-- 账号 -->
      <div class="login-content__user">
        <login-input
          v-model="account.username"
          icon="user"
          placeholder="在此键入您的工号/姓名/账号"
        />
      </div>
      <!-- 密码 -->
      <div class="login-content__password">
        <login-input
          v-model="account.password"
          type="password"
          icon="password"
          :isPasswordError='account.isPasswordError'
          @clear-password-error='clearPasswordError'
          :placeholder="account.isPasswordError ? '你输入的密码有误' : '记住密码更便捷'"
        />
      </div>
      <!-- 记住密码 -->
      <div class="login-content__remember">
        <span :class="account.isRememberPsd ? 'icon-checked' : 'icon-check'"
              @click="changRememberPasState"></span>
        <p @click="changRememberPasState">记住密码</p>
      </div>
      <!-- 登录 -->
      <button @click="handleLogin">登录</button>
    </main>
    <!-- 版权 -->
    <footer>@winning health版权所有</footer>
  </div>
</template>
<script>
import LoginInput from './components/LoginInput';

export default {
  name: 'win-login',
  props: {
    isRememberPsd: {
      type: Boolean,
      default: true,
    },
    isPasswordError: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      account: {
        username: '',
        password: '',
        isRememberPsd: this.isRememberPsd,
        isPasswordError: this.isPasswordError,
      },
    };
  },
  components: {
    LoginInput,
  },
  mounted() {
  },
  destroyed() {
    document.onkeydown = null;
  },
  created() {
    this.$nextTick(() => {
      this.enterEvent();
    });
  },
  methods: {
    // 改变记住密码状态
    changRememberPasState() {
      this.$set(this.account, 'isRememberPsd', !this.account.isRememberPsd);
    },
    // 登录逻辑
    async handleLogin() {
      // 请求接口
      if (this.validateAccount()) {
        const { username, password, isRememberPsd } = this.account;
        this.$emit('submit', { username, password, isRememberPsd });
      }
    },
    // 登录之前验证
    validateAccount() {
      let emptyFlag = true;
      Object.keys(this.account).forEach((name) => {
        if (this.account[name].length <= 0) {
          emptyFlag = false;
        }
      });
      return emptyFlag;
    },
    // 清除密码错误提示
    clearPasswordError() {
      this.$set(this.account, 'isPasswordError', false);
    },
    // 回车事件
    enterEvent() {
      document.onkeydown = (evt) => {
        if (evt.keyCode === 13) this.handleLogin();
      };
    },
  },
};
</script>
<style scoped>
  @import "./WinLogin.css";
</style>
