<template>
  <div class="login">
    <div class="contents">
      <!-- 头部logo -->
      <div class="header">
        <img src="@/assets/logo-home.png" alt="logo" />
        <div class="title">农泉财富</div>
      </div>
      <!-- 主体表单 -->
      <div class="main">
        <wInput
          type="text"
          maxlength="11"
          placeholder="用户名/电话"
          v-model="phoneData"
        ></wInput>
        <wInput
          type="password"
          maxlength="11"
          placeholder="密码"
          v-model="passData"
        ></wInput>
      </div>
      <wButton
        text="登 录"
        :rotate="isRotate"
        @click.native="startLogin()"
        class="wbutton"
      ></wButton>

      <!-- 底部信息 -->
      <div class="footer">
        <router-link to="forget">找回密码</router-link>
        <span>|</span>
        <router-link to="register">注册账号</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import wInput from "../components/watch-login/watch-input.vue"; //input
import wButton from "../components/watch-login/watch-button.vue"; //button
import { Toast } from "vant";
export default {
  data() {
    return {
      phoneData: "", // 账号
      passData: "", // 密码
      smsCode: "", // 短信验证码
      lang: "zh", // 语言
      countryCode: "+86", // 国家代码
      isRotate: false // 是否加载旋转
    };
  },
  methods: {
    async startLogin() {
      if (this.isRotate) {
        return false;
      }
      if (!this.phoneData) {
        Toast("账号不能为空");
        return;
      }
      if (this.passData.length < 6) {
        Toast("密码不少于6位");
        return;
      }
      this.isRotate = true;
      try {
        let data = {
          account: this.phoneData,
          password: this.passData,
          sms_code: this.smsCode,
          lang: this.lang,
          country_code: this.countryCode
        };
        await this.$store.dispatch("Login", data);
        this.isRotate = false;
       
        this.$router.replace("home");
      } catch (error) {
        this.isRotate = false;
      }
    },
  },
  components: {
    wInput,
    wButton
  }
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  width: 100%;
  background: url('~@/assets/dabag.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.header {
  width: 100px;
  height: 80px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 80px;
    width: 80px;
    object-fit: cover;
    border-radius: 50%;
  }
}

.title {
  font-size: 24px;
  color: #fff;
  margin-top: 16px;
  font-weight: 500;
}

.main {
  width: 100%;
  max-width: 320px;
  margin: 60px 0 0 0;
}

.wbutton {
  margin-top: 40px;
  width: 100%;
  max-width: 320px;
}

.footer {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  
  a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.9;
    transition: opacity 0.3s;
    
    &:hover {
      opacity: 1;
    }
  }
  
  span {
    color: #fff;
    opacity: 0.5;
  }
}
</style>

<style>
@import url("../components/watch-login/css/icon.css");
</style>

