<template>
  <modal
    v-model="show"
    title="您好<br />欢迎来到芒果保险"
    :closeable="true"
    cancel-btn
    confirm-btn="确定"
  >
    <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:;">获取验证码</a>
          <span class="login-form-remain">59s</span>
        </template>
      </cr-field>
    </cr-form>
  </modal>
</template>

<script>
import Modal from "@/components/Modal";
import { loginByPhone } from "@/api/user";
import { isPhone } from "@/service/validation";
export default {
  name: "LoginModal",
  components: {
    Modal
  },
  data() {
    return {
      show: false,
      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("登录成功");
      }
    }
  }
};
</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>
