<template>
  <div class="register-container animate__animated" :class="[animateClass]">
    <div class="register-container-body">
      <!-- 验证手机号 -->
      <div class="verify-phone" v-if="stepIndex == 0">
        <div class="register-body">
          <a-form-model ref="phoneForm" :model="phoneForm" :rules="phoneRules">
            <!-- 手机号 -->
            <a-form-model-item ref="phone" prop="phone" class="login-phone">
              <!-- <div class="area-code">
                <a-select default-value="+85">
                  <a-select-option value="+85"> +85 </a-select-option>
                  <a-select-option value="+86"> +86 </a-select-option>
                </a-select>
              </div> -->
              <a-input
                v-model="phoneForm.phone"
                ref="phoneForm.phone"
                placeholder="请输入手机号"
                size="large"
              />
            </a-form-model-item>
            <!-- 验证码 -->
            <a-form-model-item ref="code" prop="code" class="login-code">
              <div class="phone-code-input">
                <a-input
                  v-model="phoneForm.code"
                  placeholder="请输入验证码"
                  ref="phoneForm.code"
                  size="large"
                />
              </div>
              <a-button
                size="large"
                :loading="phoneForm.loading"
                @click="getPhoneCode()"
              >
                {{ phoneForm.btnText }}
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <a-button
          type="primary"
          size="large"
          class="primary-button"
          :loading="phoneForm.btnLoading"
          @click="submit()"
        >
          下一步</a-button
        >
      </div>
      <!-- 账号设置 -->
      <div class="set-account" v-if="stepIndex == 1">
        <div class="register-body">
          <a-form-model
            ref="accountForm"
            :model="accountForm"
            :rules="accountRules"
          >
            <!-- 账号 -->
            <a-form-model-item ref="userName" prop="userName">
              <a-input
                v-model="accountForm.userName"
                placeholder="请设置用户名"
                size="large"
                ref="accountForm.userName"
              />
            </a-form-model-item>
            <!-- 密码 -->
            <a-form-model-item ref="password" prop="password">
              <a-input-password
                v-model="accountForm.password"
                placeholder="请输入密码"
                size="large"
                ref="accountForm.password"
              />
            </a-form-model-item>
            <!-- 确认密码 -->
            <a-form-model-item ref="confirmPassword" prop="confirmPassword">
              <a-input-password
                v-model="accountForm.confirmPassword"
                placeholder="请再次输入密码"
                size="large"
                ref="accountForm.confirmPassword"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
        <!-- 用户协议 -->
        <div class="use-agreement">
          <a-checkbox v-model="accountForm.agreement"> 阅读并接受 </a-checkbox>
          <a href="#">&lt;用户协议&gt;</a>
        </div>
        <a-button
          type="primary"
          size="large"
          class="primary-button"
          @click="submit()"
        >
          注册</a-button
        >
      </div>
      <!--  -->
      <div class="register-footer">
        已有账号，
        <span @click="backLogin()">立即登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { sendPhoneCode, checkMessage, registerUser } from "../../api/login.js";
import { checkPhone } from "../../utils";
export default {
  name: "Register",
  inject: ["provideData"],
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isShow: {
      handler(val) {
        if (this.initAin) {
          this.initAin = false;
        }
        this.$emit("update:isShow", val);
      },
    },
  },
  computed: {
    animateClass() {
      let { isShow, initAin } = this;
      if (initAin) {
        return "init-style";
      }
      switch (isShow) {
        case true:
          return "animate__faster animate__fadeInRightBig";

        case false:
          return "animate__faster animate__fadeOutRightBig";

        default:
          break;
      }
    },
  },
  data() {
    return {
      initAin: true,
      stepIndex: 0,
      //验证手机号
      phoneForm: {
        phone: "",
        code: "",
        loading: false,
        time: 59,
        btnText: "获取验证码",
        isSend: false,
        sendIng: false,
        btnLoading: false,
      },
      phoneRules: {
        phone: [
          {
            required: false,
            message: "您输入的手机不正确",
            trigger: ["change"],
          },
        ],
        code: [
          {
            required: false,
            message: "您输入的验证码不正确",
            trigger: ["change"],
          },
        ],
      },
      //账号设置
      accountForm: {
        userName: "",
        password: "",
        confirmPassword: "",
        agreement: false,
      },
      accountRules: {
        userName: [
          {
            required: false,
            message: "请输入用户名",
            trigger: ["change"],
          },
        ],
        password: [
          {
            required: false,
            message: "请输入密码",
            trigger: ["change"],
          },
        ],
        confirmPassword: [
          {
            required: false,
            message: "请再次输入密码",
            trigger: ["change"],
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      let { host } = this.provideData;
      switch (this.stepIndex) {
        case 0:
          //校验手机号 && 发送验证码
          let { phone, code, btnLoading } = this.phoneForm;
          if (!checkPhone(phone)) {
            this.$message.error(`请输入正确的手机号码`);
            this.$refs["phoneForm.phone"].focus();
          } else if (code.trim() == "") {
            this.$message.error(`请输入正确的验证码`);
            this.$refs["phoneForm.code"].focus();
          } else {
            this.btnLoading = true;
            checkMessage({
              host,
              params: {
                phoneNumber: phone,
                message: code,
              },
            })
              .then((res) => {
                this.btnLoading = false;
                this.stepIndex = 1;
                this.$refs.phoneForm.resetFields();
              })
              .catch((error) => {
                this.btnLoading = false;
              });
          }
          break;

        case 1:
          //账号设置
          let { userName, password, confirmPassword, agreement } =
            this.accountForm;
          if (userName.trim() == "") {
            this.$message.error(`请设置用户名`);
            this.$refs["accountForm.userName"].focus();
          } else if (password.trim() == "") {
            this.$message.error(`请输入密码`);
            this.$refs["accountForm.password"].focus();
          } else if (confirmPassword.trim() == "") {
            this.$message.error(`请再次输入密码`);
            this.$refs["accountForm.confirmPassword"].focus();
          } else if (password.trim() != confirmPassword.trim()) {
            this.$message.error(`两次输入的密码不一致，请重新输入`);
            this.$refs["accountForm.confirmPassword"].focus();
          } else if (!agreement) {
            this.$message.error(`请阅读并接受<用户协议>`);
          } else {
            registerUser({
              host,
              params: {
                loginId: this.phoneForm.phone,
                userName,
                password,
              },
            })
              .then((res) => {
                let { data } = res;
                this.$parent.$emit("registerSuccess", {
                  response: data,
                });
                this.$message.success(
                  `手机号：${this.phoneForm.phone}，注册成功`
                );
              })
              .catch((error) => {
                this.$parent.$emit("registerError", {
                  response: error,
                });
              });
          }

          break;

        default:
          break;
      }
    },

    //发送验证码
    getPhoneCode() {
      let { host } = this.provideData;
      let interval = null;
      let { phone, sendIng, time } = this.phoneForm;
      if (!checkPhone(this.phoneForm.phone)) {
        this.$message.error(`请输入正确的手机号码`);
      } else {
        if (!sendIng) {
          this.phoneForm.loading = true;
          sendPhoneCode({
            host,
            params: {
              phoneNumber: phone,
            },
          })
            .then((res) => {
              this.phoneForm.loading = false;
              this.phoneForm.isSend = true;
              this.phoneForm.btnText = `${time}s后，重新获取`;
              interval = setInterval(() => {
                if (time > 1) {
                  time--;
                  this.phoneForm.sendIng = true;
                  this.phoneForm.btnText = `${time}s后，重新获取`;
                } else {
                  this.phoneForm.btnText = "重新获取";
                  this.phoneForm.sendIng = false;
                  clearInterval(interval);
                }
              }, 1000);
            })
            .catch((errr) => {
              clearInterval(interval);
              this.phoneForm.btnText = "获取验证码";
              this.phoneForm.loading = false;
            });
        }
      }
    },

    //
    //返回登录
    backLogin() {
      switch (this.stepIndex) {
        case 0:
          this.$refs.phoneForm.resetFields();
          break;

        case 1:
          this.$refs.accountForm.resetFields();
          break;

        default:
          break;
      }
      this.$emit("update:isShow", false);
      this.$emit("backLogin");
      this.stepIndex = 0;
    },
  },
};
</script>

<style lang="less" scoped>
.register-container {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  &.init-style {
    top: 0;
    left: 100%;
  }
  .register-container-body {
    width: 580px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 42px 60px 25px 60px;
    overflow: hidden;
    &::before {
      content: "欢迎注册！";
      font-size: 32px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 17px;
      color: #3759a0;
      text-align: center;
      display: block;
    }
    .use-agreement {
      a {
        color: #ff993f !important;
        font-size: 14px;
        margin-left: -4px;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    //验证手机号
    .register-body {
      padding-top: 60px;
      .ant-form-item {
        position: relative;
        &.login-phone {
          .ant-input {
            // padding-left: 66px;
          }
        }
        &.login-code {
          /deep/.ant-form-item-children {
            display: flex;
            .phone-code-input {
              flex: 1;
            }
          }
          .ant-btn-lg {
            font-size: 14px;
            margin-left: 12px;
            background: #e1e8ee;
            color: var(--primary-color);
            &[disabled] {
              color: var(--disabled-color-base);
              background: var(--disabled-bg-base);
            }
          }
        }
        .area-code {
          position: absolute;
          z-index: 9;
          /deep/.ant-select-selection--single {
            border: none;
            box-shadow: none;
            background: none;
            .ant-select-arrow {
              right: 6px;
            }
            position: relative;
            &::after {
              content: "";
              position: absolute;
              height: 20px;
              width: 1px;
              background: var(--border-color-base);
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
    .primary-button {
      display: block;
      width: 100%;
      margin-top: 44px;
    }
    .register-footer {
      display: flex;
      justify-content: center;
      text-align: center;
      padding-top: 26px;
      span {
        color: var(--primary-color);
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
