<template>
  <div class="register">
    <el-form class="panel" :model="form" :rules="rules" ref="baseFormRef">
      <h2>重置密码</h2>
      <el-form-item
        class="panel-form-item"
        prop="userName"
        label="账号"
        required
      >
        <el-input
          :maxlength="11"
          v-model.trim="form.userName"
          placeholder="请输入手机号码"
        >
        </el-input>
      </el-form-item>

      <el-form-item
        class="panel-form-item msgcode"
        prop="msgAuthCode"
        label="验证码"
        required
      >
        <el-input
          :maxlength="8"
          v-model.trim="form.msgAuthCode"
          placeholder="输入验证码"
        >
        </el-input>
        <el-button
          class="getMsgAuthCode"
          :loading="checkCodeBtn.loading"
          :disabled="checkCodeBtn.disabled"
          style="margin-left: 10px"
          @click="getCheckCode"
        >
          {{ checkCodeBtn.text }}</el-button
        >
      </el-form-item>

      <el-form-item
        class="panel-form-item"
        label="密码"
        prop="password"
        required
      >
        <el-input
          autocomplete="off"
          readonly
          onfocus="this.removeAttribute('readonly');"
          v-model.trim="form.password"
          :type="addPassFlag ? 'text' : 'password'"
          :maxlength="20"
          placeholder="请输入8-16位数字、字母大小写组合"
        >
          <template #suffix>
            <span @click="addPassFlag = !addPassFlag" style="cursor: pointer">
              <el-icon v-if="addPassFlag">
                <View />
              </el-icon>
              <el-icon v-else>
                <Hide />
              </el-icon>
            </span>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item
        class="panel-form-item"
        label="密码确认"
        prop="confirmPwd"
        required
      >
        <el-input
          autocomplete="off"
          readonly
          onfocus="this.removeAttribute('readonly');"
          v-model.trim="form.confirmPwd"
          :type="addPassFlag1 ? 'text' : 'password'"
          :maxlength="20"
          placeholder="输入再次输入密码"
        >
          <template #suffix>
            <span @click="addPassFlag1 = !addPassFlag1" style="cursor: pointer">
              <el-icon v-if="addPassFlag1">
                <View />
              </el-icon>
              <el-icon v-else>
                <Hide />
              </el-icon>
            </span>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item class="panel-form-item">
        <el-button type="primary" class="fill submit" @click="submitClick"
          >确定</el-button
        >
      </el-form-item>
      <el-form-item class="panel-form-item">
        <el-button
          text
          plain
          type="default"
          class="fill text-btn"
          @click="toLogin"
          >立即登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, unref } from "vue";
import { changePassword } from "@/request";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
// import { OrganizationTypeDesc } from '@/store/organization';
import { View, Hide } from "@element-plus/icons-vue";
import { globalPasswordRex } from "@/util/regex";
// import { registerOrganization } from '@/request/organization';
// import { encodePwd } from "@/util";

import { getMsgAuthCode } from "@/request";

const emit = defineEmits(["done"]);

const baseFormRef = ref<FormInstance>();
const addPassFlag = ref(false); //图标显示标识
const addPassFlag1 = ref(false); //图标显示标识

let checkCodeBtn = reactive<any>({
  text: "获取验证码",
  loading: false,
  disabled: false,
  duration: 60,
  timer: null,
});

const equalToPassword = (_, value: any, callback: any) => {
  if (form.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const rules = reactive<FormRules>({
  orgName: [{ required: true, message: "请选择单位名称", trigger: "select" }],
  msgAuthCode: [{ required: true, message: "请输入验证码", trigger: "change" }],
  contact: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  userName: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      required: true,
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入手机号码",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      pattern: globalPasswordRex,
      message: "请输入8-16位数字、字母大小写组合",
      trigger: "blur",
    },
    { required: true, min: 8, message: "密码太短！", trigger: "blur" },
  ],
  confirmPwd: [
    {
      required: true,
      pattern: globalPasswordRex,
      message: "请输入8-16位数字、字母大小写组合",
      trigger: "blur",
    },
    { required: true, min: 8, message: "密码太短！", trigger: "blur" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
});

const form = reactive({
  orgName: "",
  type: "",
  userName: "",
  // userName: "",
  password: "",
  contact: "",
  confirmPwd: "",
  msgAuthCode: "",
});

const getCheckCode = async () => {
  // 倒计时期间按钮不能单击
  await unref(baseFormRef)?.validateField("userName");

  const phoneNum = form.userName;
  console.log("getMsgCode", phoneNum);
  const res = await getMsgAuthCode("+86", phoneNum);
  if (res.success) {
    ElMessage.success(res.data);
  }
  if (checkCodeBtn.duration == 60) {
    checkCodeBtn.disabled = true;
  }
  // 清除掉定时器
  checkCodeBtn.timer && clearInterval(checkCodeBtn.timer);
  // 开启定时器
  checkCodeBtn.timer = setInterval(() => {
    const tmp = checkCodeBtn.duration--;
    checkCodeBtn.text = `${tmp}秒`;
    if (tmp <= 0) {
      // 清除掉定时器
      clearInterval(checkCodeBtn.timer);
      checkCodeBtn.duration = 60;
      checkCodeBtn.text = "重新获取";
      // 设置按钮可以单击
      checkCodeBtn.disabled = false;
    }
    console.info(checkCodeBtn.duration);
  }, 1000);
};

const submitClick = async () => {
  if (unref(baseFormRef)) {
    const res = await unref(baseFormRef)?.validate();
    if (res) {
      console.log("form", form);
      const result = await changePassword({
        ...form,
        phoneNum: form.userName,
      });
      console.log("result", result);
      // ElMessage.success("重置密码成功！");
      emit("done");
    }
  } else {
    throw "";
  }
};
const toLogin = () => {
  emit("done");
};
</script>

<style lang="scss" scoped>
.register {
  padding: 10px 0;

  .panel {
    width: 430px;
  }

  .panel-form-item {
    padding-left: 0;
    padding-right: 0;
  }

  h2 {
    padding-left: 0;
    margin-bottom: 0;
  }

  .desc {
    color: #93795d;
    display: block;
    margin-bottom: 20px;
  }

  :deep(.panel-form-item .el-form-item__label) {
    line-height: 40px;
    font-size: 16px;
    min-width: 90px;
  }

  :deep(.el-form-item__error) {
    font-size: 14px;
  }

  :deep(.el-select) {
    width: 100%;
    height: 42px;
    line-height: 42px;

    .el-select__wrapper {
      height: 100%;
      font-size: 16px;
    }
  }

  .msgcode {
    position: relative;
  }

  .getMsgAuthCode {
    border: 1px solid #93795d;
    background: rgba(147, 121, 93, 0.05);
    font-size: 14px;
    position: absolute;
    right: 5px;
    top: 5px;
    height: 32px;
    line-height: 32px;
    &:hover {
      color: #93795d;
    }
  }

  .fill {
    width: 100%;
  }
}
</style>
<style>
.register-select-option {
  font-size: 16px;
  min-height: 50px;
  line-height: 50px;
  /* padding: 5px 0; */
}
</style>
