import "@pageLess/Login.less";
import { Component, Vue } from 'vue-property-decorator';
import { LoginLogic } from "@logic/page/Login.logic";
import { Route, RawLocation } from 'vue-router';
import { RouterMeta, VueCustomize } from "@logic/Base.type";

@Component
export default class Login extends VueCustomize {
  private logic: LoginLogic<Login> = new LoginLogic(this);

  private RouterMeta: RouterMeta = {
    title: '用户登录',
    isLogin: false
  };

  public async created() {
      await this.logic.StartUp();
  };

  // 路由拦截器
  beforeRouteEnter(to: Route, from: Route, next: (to?: RawLocation | false | ((vm: Vue) => void)) => void) {
    next();
  }

  protected render(): JSX.Element {
    return (
      <div class="login">
        <div class="login_img">
          <div class="circular"></div>
          <el-carousel autoplay={false} class="banner" height="340px">
          {
            this.logic.Banner.map((v,i) => {
              return (
                  <el-carousel-item>
                    <img src={v.img} alt=""/>
                    <div class="banner_title">{ v.title }</div>
                  </el-carousel-item>
              )
            })
          }
          </el-carousel>
        </div>
        <div class="login_input">
          <div class="center">
            <div class="login_text">
              登录
              <small>此页面已加密</small>
            </div>

            <div class="login_form">
              <input v-model={this.logic.UserLoginParams.admin_user_name}
                     type="text" placeholder="账户名"/>
              <input v-model={this.logic.UserLoginParams.admin_user_pwd}
                     type="password" placeholder="密码"/>

              <div class="LoginSubmit">
                <div class="login_button" onClick={() => this.logic.UserLogin() }>
                  登 录
                  <i class="el-icon-right"></i>
                </div>

                <div class="reg_text">
                  还没有账户？
                  <span> 注册</span>
                </div>
              </div>

              <i></i>
            </div>
          </div>
        </div>
      </div>
    )
  }
}