<template>
  <div>
    <div class="text-app-txt text-2xl mt-16">设置密码</div>
    <div class="text-app-txt mt-8">验证码已发送至 +86 {{ phone }}</div>
    <CodeInput
      class="mt-8"
      :placeholder="codeConfig.placeholder"
      :maxlength="codeConfig.maxLen"
      :value="code"
      :type="codeConfig.type"
      :handleChange="handleCodeChange"
      :phone="phone"
      :sendSmsFunc="sendSmsFunc"
      :sendVoiceFunc="sendVoiceFunc"
      :phoneValid="phoneValid"
      :sendSmsAuto="true"
    />
    <Input
      :placeholder="pwdConfig.placeholder2"
      :maxlength="pwdConfig.maxLen"
      :value="pwd"
      :type="pwdConfig.type"
      @change="handlePwdChange"
    >
      <template #button> </template>
    </Input>
    <LoginButton
      class="mt-20"
      text="确定"
      :loading="loading"
      :disabled="getConfirmDisabled"
      @click="handleClickConfirm"
    ></LoginButton>
  </div>
</template>

<script lang="ts">
import { PropType, defineComponent } from "vue";
import CodeInput from "../Login/components/CodeInput/index.vue";
import { codeConfig, phoneConfig, 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 { tSetPwdFunc } from "./types";

export default defineComponent({
  components: { CodeInput, Input, LoginButton },
  props: {
    phone: {
      type: String,
      default: "",
    },
    sendSmsFunc: {
      type: Function as PropType<tSendSmsFunc>,
      required: true,
    },
    sendVoiceFunc: {
      type: Function as PropType<tSendVoiceFunc>,
    },
    setPwdFunc: {
      type: Function as PropType<tSetPwdFunc>,
      required: true,
    },
  },
  data() {
    return {
      codeConfig,
      pwdConfig,
      code: "",
      pwd: "",
      loading: false,
    };
  },
  computed: {
    getConfirmDisabled(): boolean {
      return (
        !(codeConfig.validate(this.code) && pwdConfig.validate(this.pwd)) ||
        !this.phoneValid
      );
    },
    phoneValid(): boolean {
      return phoneConfig.validate(this.phone);
    },
  },
  methods: {
    async handleClickConfirm() {
      const { phone, code, pwd } = this;
      this.loading = true;
      try {
        await this.setPwdFunc(phone, code, pwd);
      } catch (err) {
        //
      }
      this.loading = false;
    },
    handleCodeChange(v: string) {
      this.code = v;
    },
    sendSms() {
      return this.sendSmsFunc(this.phone);
    },
    sendVoice() {
      return this.sendVoiceFunc && this.sendVoiceFunc(this.phone);
    },
    handlePwdChange(value: string) {
      this.pwd = value;
    },
  },
});
</script>

<style></style>
