<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    class="login-form"
    label-position="left"
  >
    <el-form-item prop="username">
      <el-input
        v-model.trim="form.userName"
        v-focus
        placeholder="请输入用户名/手机号"
        tabindex="1"
        type="text"
      >
        <template #prefix>
          <vab-remix-icon icon="user-line" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        :key="passwordType"
        ref="password"
        v-model.trim="form.passwords"
        placeholder="请输入密码"
        :type="passwordType"
        tabindex="2"
        @keyup.enter="handleLogin"
      >
        <template #prefix>
          <vab-remix-icon icon="lock-line" />
        </template>
        <template v-if="passwordType === 'password'" #suffix>
          <vab-remix-icon
            class="show-password"
            icon="eye-off-line"
            @click="handlePassword"
          />
        </template>
        <template v-else #suffix>
          <vab-remix-icon
            class="show-password"
            icon="eye-line"
            @click="handlePassword"
          />
        </template>
      </el-input>
    </el-form-item>
    <el-button
      :loading="loading"
      class="login-btn"
      type="primary"
      @click="handleLogin"
    >
      登录
    </el-button>
  </el-form>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { isPassword } from '@/utils/validate';

export default {
  name: 'SingIn',
  data() {
    const validateUsername = (rule, value, callback) => {
      if ('' === value) {
        callback(new Error('用户名不能为空'));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码不能少于6位'));
      } else {
        callback();
      }
    };
    return {
      nodeEnv: process.env.NODE_ENV,
      form: {
        userName: '',
        passwords: '',
      },
      rules: {
        userName: [
          {
            required: true,
            trigger: 'blur',
            validator: validateUsername,
          },
        ],
        passwords: [
          {
            required: true,
            trigger: 'blur',
            validator: validatePassword,
          },
        ],
      },
      loading: false,
      passwordType: 'password',
      timer: 0,
    };
  },
  computed: {
    ...mapGetters({
      title: 'settings/title',
    }),
  },
  mounted() {
    this.form.userName = '';
    this.form.passwords = '';
    // // 为了演示效果，自动登录到首页
    // this.timer = setTimeout(() => {
    //   this.handleLogin()
    // }, 5000)
  },
  methods: {
    ...mapActions({
      login: 'user/login',
    }),
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.paneName == 'second') {
        this.$refs['wxCode'].roleIndex();
      } else if (tab.paneName == 'first') {
        this.$refs['sing-in'].roleIndex();
      }
    },
    dialogFormVisible() {
      this.$refs['trial'].showTrial();
    },
    handlePassword() {
      this.passwordType === 'password'
        ? (this.passwordType = '')
        : (this.passwordType = 'password');
      this.$nextTick(() => {
        this.$refs.passwords.focus();
      });
    },
    handleLogin() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.loading = true;
            await this.login(this.form);
            await this.$router.push('/');
          } finally {
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped></style>
