<template>
  <syCommonDialog
    :visible="visible"
    type="element"
    :elementDialogProps="{
      title: getTitle(),
    }"
    showMask
    @closePopup="$emit('update:visible', false)"
  >
    <div v-if="visible">
      <CollectVerificationCode
        v-if="currentStep === eStep.verifyInput"
        ref="codeRef"
        :target="globalState.userInfos.phone || globalState.userInfos.email"
        :fn-send-verification-code="
          () => {
            if (globalState.userInfos.phone) {
              return sendSms({
                phone: globalState.userInfos.phone,
                template_id: 1,
              });
            } else {
              return sendEmail({
                email: globalState.userInfos.email,
                template_id: 1,
              });
            }
          }
        "
        @collect="codeStatus = $event"
      ></CollectVerificationCode>
      <CollectPwd
        v-if="currentStep === eStep.pwdInput"
        ref="pwdRef"
        @collect="PwdStatus = $event"
      ></CollectPwd>
      <syButton
        mode="elementBtn"
        type="primary"
        :disabled="getDisableStatus"
        style="width: 100%; margin-top: 38px"
        @click="handleClickConfirm"
        >下一步</syButton
      >
    </div>
  </syCommonDialog>
</template>

<script setup lang="ts">
import { syCommonDialog, syButton } from "cqk-sy-ui";
import CollectVerificationCode from "@/components/Form/Collect/CollectVerificationCode.vue";
import { computed, inject, nextTick, onUnmounted, ref, watch } from "vue";
import { globalState } from "@/store/state";
import { editPassword, sendSms, sendEmail } from "@/service/Api.service";
import { ElMessage } from "element-plus";
import CollectPwd from "../../../../../components/Form/Collect/CollectPwd.vue";
import md5 from "js-md5";
const passwordStatus = inject<any>("passwordStatus");
const props = defineProps<{
  visible: boolean;
}>();
const emit = defineEmits(["update:visible", "update"]);

enum eStep {
  verifyInput,
  pwdInput,
}

const codeRef = ref<InstanceType<typeof CollectVerificationCode>>();

const currentStep = ref(eStep.verifyInput);

watch(
  () => props.visible,
  () => {
    currentStep.value = eStep.verifyInput;
    PwdStatus.value.isValid = false;
    codeStatus.value.isValid = false;
  }
);

const PwdStatus = ref({
  isValid: false,
  value: "",
});

const codeStatus = ref({
  isValid: false,
  value: "",
});

const getDisableStatus = computed(() => {
  if (currentStep.value === eStep.verifyInput) {
    return !codeStatus.value.isValid;
  } else {
    return !PwdStatus.value.isValid;
  }
});

const handleClickConfirm = async () => {
  if (currentStep.value === eStep.verifyInput) {
    currentStep.value = eStep.pwdInput;
  } else if (currentStep.value === eStep.pwdInput) {
    const res = await editPassword({
      email: globalState.userInfos.email,
      phone: globalState.userInfos.phone,
      pwd: md5(String(PwdStatus.value.value) + md5(String(PwdStatus.value.value.length))),
      code: codeStatus.value.value,
      code_type: globalState.userInfos.phone !== "" ? 0 : 1,
    });
    if (res?.code === 200) {
      ElMessage.success(`密码${passwordStatus.status ? "修改" : "设置"}成功`);
      emit("update:visible", false);
      emit("update");
    } else {
      currentStep.value = eStep.verifyInput;
      nextTick(() => {
        codeRef.value?.setCode(codeStatus.value.value);
        codeRef.value?.setError(res?.msg!);
      });
    }
  }
};

const getTitle = () => {
  if (currentStep.value === eStep.verifyInput) {
    return globalState.userInfos.phone !== "" ? "验证手机号" : "验证邮箱";
  } else if (currentStep.value === eStep.pwdInput) {
    return "设置密码";
  }
};
</script>

<style></style>
