<template>
  <div class>
    <div class="text-app-txt text-2xl mt-16">找回密码</div>
    <PhoneInput
      class="mt-8"
      :placeholder="phoneConfig.placeholder"
      :maxlength="phoneConfig.maxLen"
      :clearable="true"
      :value="phone"
      :type="phoneConfig.type"
      @change="handlePhoneChange"
      @selectItem="handleSelect"
    ></PhoneInput>
    <CodeInput
      :placeholder="codeConfig.placeholder"
      :maxlength="codeConfig.maxLen"
      :value="code"
      :type="codeConfig.type"
      :handleChange="handleCodeChange"
      :phone="phone"
      :sendSmsFunc="sendSms"
      :sendVoiceFunc="sendVoiceFunc"
      :phoneValid="phoneValid"
    ></CodeInput>
    <Input
      :placeholder="pwdConfig.placeholder2"
      :maxlength="pwdConfig.maxLen"
      :value="pwd"
      :type="pwdConfig.type"
      @change="handlePwdChange"
    >
      <template #button></template>
    </Input>
    <LoginButton
      class="mt-8"
      text="确定"
      :disabled="getConfirmDisabled"
      @click="handleClickConfirm"
      :loading="loading"
    ></LoginButton>
  </div>
</template>

<script lang="ts">
import { PropType, defineComponent } from "vue";
import PhoneInput from "../Login/components/PhoneInput/index.vue";
import { phoneConfig, codeConfig, pwdConfig } from "../Login/const";
import {
  iRememberPhonePwd,
  tSendSmsFunc,
  tSendVoiceFunc,
} from "../Login/types";
import Input from "@/components/common/Input/index.vue";
import LoginButton from "../Login/components/LoginButton/index.vue";
import CodeInput from "../Login/components/CodeInput/index.vue";
import { tSetPwdFunc } from "../PwdSetting/types";
import { eSmsType } from "@/service/VerificationService";
import { Toast } from "vant";

export default defineComponent({
  components: {
    PhoneInput,
    Input,
    LoginButton,
    CodeInput,
  },
  props: {
    sendSmsFunc: {
      type: Function as PropType<tSendSmsFunc>,
      required: true,
    },
    sendVoiceFunc: {
      type: Function as PropType<tSendVoiceFunc>,
      required: true,
    },
    setPwdFunc: {
      type: Function as PropType<tSetPwdFunc>,
      required: true,
    },
  },
  data() {
    return {
      phoneConfig,
      codeConfig,
      pwdConfig,
      phone: "",
      code: "",
      pwd: "",
      loading: false,
    };
  },
  methods: {
    handleSelect(item: iRememberPhonePwd) {
      this.phone = item.phone;
    },
    handlePhoneChange(value: string) {
      this.phone = value;
    },
    handleCodeChange(v: string) {
      this.code = v;
    },
    sendSms() {
      return this.sendSmsFunc(this.phone, eSmsType.modifyPwd);
    },
    sendVoice() {
      return this.sendVoiceFunc(this.phone);
    },
    handlePwdChange(v: string) {
      this.pwd = v;
    },
    async handleClickConfirm() {
      try {
        this.loading = true;
        await this.setPwdFunc(this.phone, this.code, this.pwd);
        this.$router.back();
        Toast.success("密码修改成功");
      } catch (err) {
        //
      }
      this.loading = false;
    },
  },
  computed: {
    phoneValid(): boolean {
      return phoneConfig.validate(this.phone);
    },
    getConfirmDisabled(): boolean {
      return !(
        phoneConfig.validate(this.phone) &&
        codeConfig.validate(this.code) &&
        pwdConfig.validate(this.pwd)
      );
    },
  },
});
</script>

<style></style>
