<template>
  <modal
    v-model="show"
    title="您好<br />欢迎来到芒果保险"
    :closeable="true"
    cancel-btn
    confirm-btn="确定"
    @confirm="$refs.loginForm.submit()"
  >
    <cr-form
      class="login-form"
      ref="loginForm"
      validate-trigger="onBlur"
      @submit="onFormSubmit"
      @failed="onFormFailed"
    >
      <cr-field
        v-model="formData.phoneNo"
        name="phoneNo"
        type="tel"
        label="手机号"
        placeholder="请填写您的手机号"
        :rules="validOptions[0]"
      />
      <cr-field
        v-model="formData.verifyCode"
        name="verifyCode"
        type="tel"
        label="验证码"
        placeholder="请填写验证码"
        :rules="validOptions[1]"
      >
        <template v-slot:button>
          <a href="javascript:;" @click="getCode" v-if="!showCount">获取验证码</a>
          <span class="login-form-remain" v-else>{{ count }}s</span>
        </template>
      </cr-field>
    </cr-form>
  </modal>
</template>

<script>
import Modal from "@/components/Modal";
import { loginByPhone, getCaptchaSms } from "@/api/user";
import { isPhone } from "@/service/validation";
export default {
  name: "LoginModal",
  components: {
    Modal
  },
  data() {
    return {
      show: true,
      showCount: false,
      count: "",
      timer: null,
      formData: {
        phoneNo: "",
        verifyCode: ""
      },
      validOptions: [
        [
          { require: true, message: "请填写您的手机号" },
          { validator: isPhone, message: "手机号格式错误" }
        ],
        [{ require: true, message: "请填写验证码" }]
      ]
    };
  },
  methods: {
    onFormSubmit() {
      this.login();
    },
    onFormFailed(errorInfo) {
      const { errors } = errorInfo;
      this.$notify({ type: "warning", message: errors[0].message });
    },
    async login() {
      this.formData.loginChannel = 1;
      this.formData.openId = 1;
      const res = await loginByPhone(this.formData);
      if (res.code === 0) {
        this.$notify("登录成功");
      }
    },
    async getCode() {
      const TIME_COUNT = 60;
      const { phoneNo } = this.formData;
      const res = await getCaptchaSms({ phoneNo });
      if (res.code === "0" && !this.timer) {
        this.count = TIME_COUNT;
        this.showCount = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.showCount = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/var.less";
.login-form {
  @{deep} .cr-field--error-message {
    display: none;
  }
  @{deep} .cr-cell {
    &-group {
      &::after {
        display: none;
      }
    }
    background-color: @gray-1;
    border-radius: @border-radius-md;
    margin-bottom: 12px;
    align-items: center;
    padding: 9px 16px;
    &::after {
      display: none;
    }
    &__title {
      color: #333333;
      display: flex;
      align-items: center;
    }
  }
}
</style>
