<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useMessage } from "naive-ui";
import { forgetPassword, getCode, updateSUser } from "@/api/login/login";

const emit = defineEmits(["close", "forget"]);
interface FormState {
  enterprisecode?: string;
  username: string;
  password: string;
  captcha: string;
}

interface FormForget {
  agentcode: string;
  loginname: string;
  phone: string;
  phonecode: string;
}

interface FormSure {
  newPassword: string;
  rePasswrod: string;
  loginname: string;
}

const formRef = ref();
const formRefSure = ref();

const message = useMessage();
const loading = ref(false);
const flag = ref(true);
const formForget: FormForget = reactive({
  agentcode: "",
  loginname: "",
  phone: "",
  phonecode: "",
});

const formInline: FormState = reactive({
  enterprisecode: "",
  username: "",
  password: "",
  captcha: "",
});

const formSure: FormSure = reactive({
  newPassword: "",
  rePasswrod: "",
  loginname: "13311111111",
});
const tab = ref(0);
const countTime = ref("获取验证码");
const rules = {
  enterprisecode: { required: true, message: "请输入企业编码", trigger: "blur" },
  agentcode: { required: true, message: "请输入企业编码", trigger: "blur" },
  loginname: { required: true, message: "请输入用户名", trigger: "blur" },
  phone: { required: true, message: "请输入手机号", trigger: "blur" },
  password: { required: true, message: "请输入密码", trigger: "blur" },
  phonecode: { required: true, message: "请输入验证码", trigger: "blur" },
  newPassword: { required: true, message: "请输入新密码", trigger: "blur" },
  rePasswrod: [
    {
      required: true,
      message: "请再次输入密码",
      trigger: ["input", "blur"],
    },
    {
      validator: validatePasswordSame,
      message: "两次密码输入不一致",
      trigger: ["blur", "password-input"],
    },
  ],
};

function validatePasswordSame(rule: any, value: string): boolean {
  return value === formSure.newPassword;
}

function handleSubmit(e) {
  e.preventDefault();
  formRef.value.validate(async (errors) => {
    if (!errors) {
      const { loginname, phone, phonecode, agentcode } = formForget;
      loading.value = true;

      const params = {
        loginname,
        phone,
        phonecode,
        agentcode,
      };

      try {
        const res = await forgetPassword(params);
        if (res.code === "OK") {
          formSure.loginname = res.data?.loginname;
          tab.value = 1;
        }else{
          message.error(res.message);
        }
      } finally {
        loading.value = false;
      }
    } else {
      message.error("请填写完整信息");
    }
  });
}

function handleSure(e) {
  e.preventDefault();
  formRefSure.value.validate(async (errors) => {
    if (!errors) {
      const { newPassword, rePasswrod, loginname } = formSure;
      loading.value = true;

      const params = {
        newPassword,
        rePasswrod,
        loginname,
      };

      try {
        const res = await updateSUser(params);
        if (res.code === "OK") message.success("修改成功");
        else message.error(res.message);
      } finally {
        loading.value = false;
      }
    } else {
      message.error("请填写完整信息");
    }
  });
}

function close() {
  loading.value = false;
  emit("close");
}

function switchTab(type: number) {
  tab.value = type;
}

function computedForm() {
  return !formInline.enterprisecode || !formInline.username || !formInline.password;
}

function computedFormSure() {
  return !formSure.newPassword || !formSure.rePasswrod;
}
async function sendCode(value) {
  if (!flag.value) return;
  flag.value = false;
  const res = await getCode({
    phone: formForget.phone,
    agentcode: formForget.agentcode,
  });
  if (!res.data) {
    message.error(res.message);
    return;
  }
  startCount();
}

function startCount() {
  let time = 60;
  countTime.value = "60s";
  const timer = setInterval(() => {
    countTime.value = `${--time}s`;
    if (time === 0) {
      clearInterval(timer);
      countTime.value = "获取验证码";
      flag.value = true;
    }
  }, 1000);
}

function forget() {
  loading.value = false;
  emit("forget");
}
</script>

<template>
  <div class="form-login">
    <img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close" />
    <div class="flex justify-between header">
      <div class="tab">忘记密码</div>
      <div class="back" @click="forget">&lt; 返回登录</div>
    </div>
    <div v-if="tab === 0" class="form-1">
      <n-form
        ref="formRef"
        label-placement="left"
        size="large"
        :model="formForget"
        :rules="rules"
      >
        <n-form-item class="form-item" path="agentcode">
          <n-input
            v-model:value="formForget.agentcode"
            class="item-input"
            placeholder="请输入企业编码"
          >
            <template #prefix>
              <svg-icon size="20" name="enterprise" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item" path="loginname">
          <n-input
            v-model:value="formForget.loginname"
            class="item-input"
            placeholder="请输入用户名"
          >
            <template #prefix>
              <svg-icon size="20" name="account" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item" path="phone">
          <n-input
            v-model:value="formForget.phone"
            class="item-input"
            placeholder="请输入手机号"
          >
            <template #prefix>
              <img
                class="img-phone"
                src="@/assets/images/login/phone.png"
                alt=""
                @click="close"
              />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item" path="phonecode">
          <n-input
            v-model:value="formForget.phonecode"
            maxlength="6"
            class="item-input"
            placeholder="请输入验证码"
            clearable
          >
            <template #prefix>
              <img
                class="img-phone"
                src="@/assets/images/login/auth.png"
                alt=""
                @click="close"
              />
            </template>
            <template #suffix>
              <div
                :class="{ 'code-count': countTime !== '获取验证码' }"
                class="code"
                @click="sendCode"
              >
                {{ countTime }}
              </div>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item">
          <n-button
            :class="{ 'btn-disabled': computedForm() }"
            class="btn"
            type="primary"
            size="large"
            :loading="loading"
            block
            @click="handleSubmit"
          >
            下一步
          </n-button>
        </n-form-item>
      </n-form>
    </div>
    <div v-if="tab === 1" class="form-1">
      <n-form
        ref="formRefSure"
        label-placement="left"
        size="large"
        :model="formSure"
        :rules="rules"
      >
        <n-form-item class="form-item" path="newPassword">
          <n-input
            v-model:value="formSure.newPassword"
            class="item-input"
            type="password"
            show-password-on="click"
            placeholder="请输入8-16位密码，必须包含英文及数字"
          >
            <template #prefix>
              <svg-icon size="20" name="password" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item" path="rePasswrod">
          <n-input
            v-model:value="formSure.rePasswrod"
            class="item-input"
            type="password"
            show-password-on="click"
            placeholder="请再次确认输入新密码"
          >
            <template #prefix>
              <svg-icon size="20" name="password" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item class="form-item">
          <n-button
            :class="{ 'btn-disabled': computedFormSure() }"
            class="btn"
            type="primary"
            size="large"
            :loading="loading"
            block
            @click="handleSure"
          >
            确定
          </n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.form-login {
  width: 420px;
  box-sizing: border-box;
  background: linear-gradient(
    136deg,
    rgba(226, 236, 255, 0.8) 3%,
    rgba(251, 251, 251, 0.8) 97%
  );
  border: 1px solid #ffffff;
  border-radius: 6px;
  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  position: relative;
  padding: 48px 27px 42px;

  .img-close {
    position: absolute;
    right: 0;
    top: -44px;
    width: 28px;
    height: 28px;
    cursor: pointer;
  }

  .tab {
    font-size: 24px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: left;
    color: #507afd;
  }

  .header {
    align-items: center;
  }

  .form-1 {
    margin-top: 29px;

    .form-item {
      height: 60px;
    }

    .item-input {
      width: 366px;
      // height: 44px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 4px;
    }

    .btn {
      width: 366px;
      height: 44px;
      background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
      border-radius: 3px;
      margin-top: 10px;
      margin-bottom: 14px;

      &-disabled {
        opacity: 0.5;
        background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
      }
    }
  }

  .img-phone {
    width: 20px;
    height: 20px;
  }

  .order-last {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    color: #507afd;
  }

  .code {
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    color: #507afd;
    margin-left: 12px;

    &-count {
      font-size: 14px;
      color: #999999;
    }
  }
}
::v-deep(.n-form-item-feedback--error) {
  // color: #FF4E4F !important;
}
.back {
  font-size: 15px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: Medium;
  text-align: center;
  color: #666666;
  line-height: 21px;
}
</style>
