<template>
  <div
    class="personalRegBg"
    v-show="isShow"
  >
    <div class="personalReg-box">
      <div class="personalReg-form-box">
        <p class="personalReg-title"></p>
        <el-form
          ref="form"
          :model="baseInfo"
          :rules="rules"
          size="small"
        >
          <el-form-item
            class="personalReg-item"
            prop="nickname"
            v-if="type==='注册账号'"
          >
            <el-input
              v-model.trim="baseInfo.nickname"
              class="personalReg-item-input"
              placeholder="请输入用户姓名"
            ></el-input>
          </el-form-item>

          <el-form-item
            class="personalReg-item"
            prop="phone"
          >
            <el-input
              v-model="baseInfo.phone"
              @mousewheel.native.prevent
              maxlength="11"
              name="phone"
              class="personalReg-item-input"
              placeholder="请输入11位手机号码"
            ></el-input>
          </el-form-item>

          <el-form-item
            class="personalReg-item"
            prop="code"
          >
            <el-input
              v-model="baseInfo.code"
              name="code"
              class="personalReg-item-input"
              placeholder="请输入6位数验证码"
            >
              <template slot="append">
                <el-button
                  v-if="computeTime == 0"
                  @click="getCode()"
                >获取验证码</el-button>
                <span
                  class="personalReg-time"
                  v-else
                >{{ computeTime }} s</span>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item
            class="personalReg-item"
            prop="password"
          >
            <el-input
              v-model="baseInfo.password"
              @mousewheel.native.prevent
              type="password"
              name="password"
              class="personalReg-item-input"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <el-form-item
            class="personalReg-item"
            prop="confirmPassword"
          >
            <el-input
              v-model="baseInfo.confirmPassword"
              @mousewheel.native.prevent
              type="password"
              name="confirmPassword"
              class="personalReg-item-input"
              placeholder="请输入确认密码"
            ></el-input>
          </el-form-item>

        </el-form>
        <el-button
          class="personalReg-btn"
          type="primary"
          @click="onSubmit()"
        >注册</el-button>
      </div>

      <p class="personalReg-box-bottom">
        <span @click="close()">返回登录</span>
      </p>
    </div>
  </div>
</template>

<script>
import { CODE_INTERVAL_SECONDS } from "../globalConstants";

export default {
  name: "RegisteredUser",

  data() {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };

    const checkPassWord = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.baseInfo.password) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };

    return {
      type: '',

      computeTime: 0, // 计时的时间

      isShow: false,

      baseInfo: {
        nickname: "",
        phone: "",
        code: "",
        password: "",
        confirmPassword: ""
      },

      rules: {
        nickname: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度大于6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { validator: checkPassWord, trigger: 'blur' }
        ],
      },

    };
  },

  mounted() { },

  methods: {

    showForgetPasswordDialog() {
      this.type = '找回密码';
      this.baseInfo = this.$options.data().baseInfo;
      this.isShow = true;
    },

    showRegisterDialog() {
      this.type = '注册账号';
      this.baseInfo = this.$options.data().baseInfo;
      this.isShow = true;
    },

    close() {
      this.isShow = false;
    },

    getCode() {
      if (this.computeTime > 0) {
        return;
      }
      this.$refs['form'].validateField('phone', (error) => {
        if (!error) {
          // 启动倒计时
          this.computeTime = CODE_INTERVAL_SECONDS;
          this.intervalId = setInterval(() => {
            this.computeTime -= 1
            if (this.computeTime <= 0) {
              // 停止计时
              clearInterval(this.intervalId)
            }
          }, 1000)
          this.$emit('onGetCode', this.baseInfo.phone);
        }
      })
    },

    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.type === '注册账号') { // 注册
            this.$emit('onRegister', this.baseInfo);
          } else if (this.type === '找回密码') { // 忘记密码
            this.$emit('onChangePassword', this.baseInfo);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
.personalRegBg {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);

  .personalReg-box {
    width: 60%;
    max-width: 700px;
    min-width: 600px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .personalReg-box-bottom {
    margin-top: 22px;
    padding: 0 10px;
    height: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 28px;
    text-align: right;

    span {
      cursor: pointer;
    }
  }

  .personalReg-form-box {
    padding: 25px 60px;
    background: #ffffff;
    border-radius: 8px;

    .personalReg-btn {
      display: block;
      margin: 0 auto;
      width: 350px;
    }

    .personalReg-btn.no-click {
      background: #e2e2e2;
      border-color: #e2e2e2;
      pointer-events: none;
    }

    .personalReg-title {
      height: 37px;
      font-size: 22px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 37px;
      margin-bottom: 12px;
    }

    .personalReg-item {
      margin-bottom: 22px;

      .el-form-item__content {
        display: flex;
        align-items: center;
      }

      .personalReg-item-input {
        flex: 1;
      }

      .personalReg-time {
        color: #606266;
        cursor: default;
        padding: 0 20px;
        pointer-events: none;
      }
    }
  }
}
</style>
