<template>
  <layout>
    <div class="wrapper">
      <h1>低代码平台</h1>
      <div class="login">
        <i-form ref="formMail" :model="formMail" :rules="ruleFormMail">
          <FormItem prop="usernameMail">
            <i-input v-model="formMail.usernameMail" placeholder="Username">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
              <span slot="append">@quantgroup.cn</span>
            </i-input>
          </FormItem>
          <FormItem prop="passwordMail">
            <i-input type="password" v-model="formMail.passwordMail" placeholder="Password">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </i-input>
          </FormItem>
          <FormItem>
            <i-button @click="login(formMail)" type="primary" long>登录</i-button>
          </FormItem>
        </i-form>
        <div style="color: #98a6ad; text-align: center; margin-bottom: 50px;">量化派 © {{ this.year }}</div>
      </div>
    </div>
  </layout>
</template>
<script>
import { Form, Input, FormItem, Icon, Button } from 'iview';
import localStorage from '@/service/localStorage.service';
import { login, getUserInfo, getCaptcha } from '@api/user.api';
import layout from '@component/layout/login/index.vue';

const defaultCaptcha = getCaptcha();

export default {
  data() {
    return {
      showTips: true,
      tips: '为提升各位同学使用体验，内部在用系统后续将统一迁移至量星球，请提前做好准备～',
      formMail: {
        usernameMail: undefined,
        passwordMail: undefined,
        captcha: undefined,
      },
      ruleFormMail: {
        usernameMail: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        passwordMail: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
      year: new Date().getFullYear(),
      captcha: defaultCaptcha,
    };
  },
  components: {
    'i-form': Form,
    'i-input': Input,
    FormItem,
    Icon,
    'i-button': Button,
    layout
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    login(param1) {
      this.$refs['formMail'].validate(async valid => {
        if (valid) {
          let newParam1 = {
            username: param1.usernameMail.trim(),
            password: param1.passwordMail.trim(),
            captcha: param1.captcha,
          };
          const longinInfo = await login(newParam1);
          localStorage.set('token', longinInfo.accessToken);
          localStorage.set('refreshToken', longinInfo.refreshToken);
          const userInfo = await getUserInfo();
          localStorage.set('user', userInfo);
          window.location.href = '/editor/list';
        }
      });
    },
    async getCaptcha() {
      this.captcha = `${defaultCaptcha}?v=${new Date().getTime()}`;
    },
  },
};
</script>
<style lang="less" scoped>
.marquee-box {
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  color: #fff;
  background-color: #ff9900;
  .marquee-box-marquee {
    flex: 1;
  }
  .marquee-box-icon {
    padding: 0 10px;
  }
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 200px;
  padding-bottom: 200px;
  background: #001529;
}

.wrapper > h1 {
  text-align: center;
  vertical-align: middle;
  margin-bottom: 20px;
  color: #fff;
}

.login {
  margin: 0 auto;
  padding-top: 15px;
  width: 360px;
  height: 100%;
}

.captcha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .ivu-input-wrapper {
    width: 180px;
  }
}
</style>
