<template>
  <div class="">
    <div class="text-font-white text-2xl mt-16">找回密码</div>
    <PhoneInput
      class="mt-8"
      :placeholder="phoneConfig.placeholder"
      :maxlength="phoneConfig.maxLen"
      :clearable="true"
      :value="phone"
      :type="phoneConfig.type"
      @change="handlePhoneChange"
    >
    </PhoneInput>
    <CodeInput
      :placeholder="codeConfig.placeholder"
      :maxlength="codeConfig.maxLen"
      :value="code"
      :type="codeConfig.type"
      :handleChange="handleCodeChange"
      :phone="phone"
      :sendSmsFunc="sendSmsFunc"
      :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 Vue, { PropType } from "vue";
import PhoneInput from "../Login/components/PhoneInput/index.vue";
import { phoneConfig, codeConfig, pwdConfig } from "../Login/const";
import { 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";

export default Vue.extend({
  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: {
    handlePhoneChange(value: string) {
      this.phone = value;
    },
    handleCodeChange(v: string) {
      this.code = v;
    },
    sendSms() {
      return this.sendSmsFunc(this.phone);
    },
    sendVoice() {
      return this.sendVoiceFunc(this.phone);
    },
    handlePwdChange(v: string) {
      this.pwd = v;
    },
    handleClickConfirm() {},
  },
  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>