<template>
  <div class="loginContainer">
    <div class="circle circle-1" />
    <div class="circle circle-2" />
    <div class="circle circle-3" />
    <div class="loginContent">
      <div class="title">
        <p>您好</p>
        <p>欢迎办理礼品卡充值业务</p>
      </div>
      <div class="formContent">
        <cr-field v-model="phoneNo" name="用户名" clearable placeholder="请输入手机号" />
        <cr-field
          v-model="password"
          type="password"
          name="密码"
          clearable
          placeholder="请输入账户密码"
        />
      </div>
      <div class="submit">
        <cr-button shape="circle" type="primary" :disabled="disableOperation" @click="submit">
          登录
        </cr-button>
        <p class="notice">账户密码请联系管理员获取</p>
      </div>
    </div>
  </div>
</template>
<script>
import { promotionLogin } from '@/api/promotion';
export default {
  data() {
    return {
      disableOperation: false,
      phoneNo: '',
      password: '',
      toastMessages: {
        1: '请输入手机号码',
        2: '请输入正确的手机号码',
        3: '请输入密码',
        4: '密码错误，请重新输入',
        5: '手机号码没有权限办理业务'
      }
    };
  },
  methods: {
    validate() {
      // 验证手机号、密码
      // 1、验证手机号是否填写
      if (!this.phoneNo) {
        this.$toast(this.toastMessages[1]);
        return false;
      }
      // 2、验证手机号是否符合手机号格式
      if (!/(^1[3|4|5|6|7|8][0-9]{9}$)/.test(this.phoneNo)) {
        this.$toast(this.toastMessages[2]);
        return false;
      }
      // 3、验证密码是否填写
      if (!this.password) {
        this.$toast(this.toastMessages[3]);
        return false;
      }
      return true;
    },
    async submit() {
      this.disableOperation = true;
      // 进行手机、密码校验
      const validate = this.validate();
      if (validate) {
        const [token] = await promotionLogin({
          mobile: this.phoneNo,
          password: this.password
        });
        if (token) {
          localStorage.setItem('promotionToken', token);
          this.$router.push({ name: 'PromotionPersonal' });
        } else {
          this.disableOperation = false;
        }
      } else {
        this.disableOperation = false;
      }
    }
  }
};
</script>
<style scoped lang="less">
.loginContainer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: @white;
  .circle {
    position: absolute;
    border-radius: 50%;
    &-1 {
      top: 40px;
      left: 68px;
      width: 44px;
      height: 44px;
      opacity: 0.2;
      background: linear-gradient(0deg, rgba(255, 93, 0, 0) 0%, #ff1900 73%);
    }
    &-2 {
      bottom: -133px;
      right: -80px;
      width: 365px;
      height: 365px;
      opacity: 0.05;
      background: linear-gradient(179deg, #ff5d00 2%, rgba(255, 25, 0, 0) 79%);
    }
    &-3 {
      bottom: 232px;
      right: -15px;
      width: 77px;
      height: 77px;
      opacity: 0.05;
      background-image: linear-gradient(179deg, #ff5d00 27%, rgba(255, 25, 0, 0) 100%);
    }
  }
  .loginContent {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 58px 30px 0;
    box-sizing: border-box;
    .title {
      p {
        color: @black;
        &:first-child {
          .text-size(30);
          font-weight: @font-weight-bold;
        }
        &:last-child {
          margin-top: @padding-md;
          .text-size(24);
        }
      }
    }
    .formContent {
      padding-top: 70px;
      /deep/ .cr-cell {
        width: 100%;
        height: 100%;
        background: @gray-1;
        border-radius: 24px;
        .text-size(16);
        &:last-child {
          margin-top: @padding-md;
        }
      }
    }
    .submit {
      margin-top: @padding-unit * 9;
      button {
        width: 100%;
        height: 48px;
        .text-size(18);
      }
      .notice {
        margin-top: @padding-lg;
        .text-size(12);
        color: @gray-4;
        text-align: center;
      }
    }
  }
}
</style>
