<template>
  <div class="register">
    <!-- 手机验证表单 -->
    <el-form
      label-width="100px"
      :model="phoneForm"
      :rules="rulesPhoneForm"
      ref="phoneForm"
      class="phoneForm"
    >
      <el-form-item label="手机号码" prop="mobile">
        <el-input
          placeholder="请输入手机号码"
          v-model="phoneForm.mobile"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机验证码" prop="code">
        <el-input placeholder="请填写验证码" v-model="phoneForm.code">
          <template slot="append">
            <el-button @click="getCheckcode" :disabled="isTimer"
              ><span>{{ btnTitle }}</span></el-button
            >
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="bntNext"
          @click="submitForm('phoneForm')"
          >登录/注册</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <!-- 用户信息填写 -->
  <!-- <div v-show="activeSetp === 1">
        <el-form
          label-width="135px"
          :model="userForm"
          :rules="rulesUserForm"
          ref="userForm"
          class="userForm"
          label-position="right"
        >
          <el-form-item label="手机号码(唯一)" prop="mobile">
            <el-input
              placeholder="请输入手机号码"
              v-model="userForm.mobile"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业名称(唯一)" prop="companyName">
            <el-input
              placeholder="请输入企业名称"
              v-model="userForm.companyName"
            ></el-input>
          </el-form-item>
          <el-form-item label="社会信用号(唯一)" prop="creditNum">
            <el-input
              placeholder="请输入企业社会信用号"
              v-model="userForm.creditNum"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业类型" prop="bussinessStatus">
            <el-select
              v-model="userForm.bussinessStatus"
              placeholder="请选择企业类型"
            >
              <el-option label="生产企业" value="1"></el-option>
              <el-option label="流通企业" value="2"></el-option>
              <el-option label="医疗机构" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="法人名称" prop="legalPerson">
            <el-input
              placeholder="请输入法人名称"
              v-model="userForm.legalPerson"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人身份证号(唯一) " prop="legalldCard">
            <el-input
              placeholder="请输入法人身份证号"
              v-model="userForm.legalldCard"
            ></el-input>
          </el-form-item>
          <el-form-item label="注册地址" prop="registerAddress">
            <el-input
              placeholder="请输入注册地址"
              v-model="userForm.registerAddress"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="contactWay">
            <el-input
              placeholder="请输入联系方式"
              v-model="userForm.contactWay"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              placeholder="请输入邮箱"
              v-model="userForm.email"
            ></el-input>
          </el-form-item>
          <el-form-item label="注册状态" prop="checkStatus">
            <el-select disabled v-model="userForm.checkStatus">
              <el-option label="未审核" value="0"></el-option>
              <el-option label="已审核" value="1"></el-option>
              <el-option label="未通过" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="comments">
            <el-input v-model="userForm.comments"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="bntNext"
              @click="submitUserForm('userForm')"
              >下一步</el-button
            >
          </el-form-item>
        </el-form>
      </div> -->
</template>

<script>
import { getCheckcode, checkCode } from "@/api/login";

export default {
  name: "Register",
  data() {
    //限制输入正确的手机号码格式
    const validatePhone = (rule, value, callback) => {
      if (/^1[3-9]\d{9}$/.test(value) === false) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        // 校验通过
        callback();
      }
    };
    //限制输入正确的邮箱
    const validateEmail = (rule, value, callback) => {
      if (
        /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
          value
        ) === false
      ) {
        callback(new Error("请输入正确的邮箱地址"));
      } else {
        // 校验通过
        callback();
      }
    };
    //限制统一信用号
    const validatePatt = (rule, value, callback) => {
      if (
        /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/.test(
          value
        ) === false
      ) {
        callback(new Error("请输入有效的的社会统一信用号"));
      } else {
        // 校验通过
        callback();
      }
    };
    //限制身份证号码
    const validateIdentity = (rule, value, callback) => {
      if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value) === false) {
        callback(new Error("请输入正确的身份证号码"));
      } else {
        // 校验通过
        callback();
      }
    };
    return {
      btnTitle: "获取验证码",
      isTimer: false,
      phoneForm: {
        mobile: "", //手机号码
        code: "", //验证码
      },
      rulesPhoneForm: {
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入手机验证码", trigger: "blur" },
        ],
      },
      userForm: {
        mobile: null, //手机号码
        companyName: null, //企业名称
        creditNum: null, //社会信用号
        bussinessStatus: null, //企业类型
        legalPerson: null, //法人名称
        legalldCard: null, //法人身份证号
        registerAddress: null, //注册地址
        contactWay: null, //练习方式
        email: null, //邮箱
        checkStatus: null, //注册状态
        comments: null, //备注
      },
      rulesUserForm: {
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        creditNum: [
          { required: true, message: "请输入社会信用号", trigger: "blur" },
          { validator: validatePatt, trigger: "blur" },
        ],
        bussinessStatus: [
          { required: true, message: "请选择企业类型", trigger: "change" },
        ],
        legalPerson: [
          { required: true, message: "请输入法人名称", trigger: "blur" },
        ],
        legalldCard: [
          { required: true, message: "请输入法人身份证号", trigger: "blur" },
          { validator: validateIdentity, trigger: "blur" },
        ],
        registerAddress: [
          { required: true, message: "请输入注册地址", trigger: "blur" },
        ],
        contactWay: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: validateEmail, trigger: "blur" },
        ],
        checkStatus: [
          { required: true, message: "注册状态", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  methods: {
    //倒计时
    validateBtn() {
      let time = 60;
      let timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer);
          this.isTimer = false;
          this.btnTitle = "获取验证码";
        } else {
          this.btnTitle = time + "秒后重试";
          this.isTimer = true;
          time--;
        }
      }, 1000);
    },
    //获取验证码
    getCheckcode() {
      let query = { mobile: this.phoneForm.mobile };
      getCheckcode(query).then((response) => {
        console.log("response", response);
        if (response.code == 20000) {
          this.validateBtn();
          this.$message.success(response.data);
        } else {
          this.$message.error(response.message);
        }
      });
    },
    //手机验证表单提交
    submitForm(phoneForm) {
      this.$refs[phoneForm].validate((valid) => {
        if (valid) {
          //验证验证码
          let query = this.phoneForm;
          checkCode(query).then((response) => {
            console.log("444");
            if (response.code === 20000) {
              this.$router.push("/userInformation");
              this.$message.error("提交成功");
            } else {
              this.$message.error(response.message);
            }
          });
        }
      });
    },

    //用户信息填写  表单
    /* submitUserForm(userForm) {
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          const data = this.userForm;
          this.$message.error("提交成功,请等待审核");
          registerSave(data).then((response) => {
            if (response.code === 20000) {
              this.$message.error("提交成功,请等待审核");
            } else {
              this.$message.error(response.message);
            }
          });
        }
      });
    } */
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  .phoneForm {
    .el-form-item__label {
      line-height: 50px;
    }
    .el-input__inner {
      height: 50px;
    }
    .bntNext {
      width: 50%;
      height: 50px;
    }
  }
  .userForm {
    .el-select {
      width: 100%;
    }
    .bntNext {
      width: 50%;
      height: 50px;
    }
  }
}
</style>
