<template>
  <div class="text-font-white">
    <div class="text-font-white text-2xl mt-16">修改登录密码</div>
    <div class="mt-8 mb-9">正在为 {{ phone }} 修改登录密码</div>
    <transition name="fade" mode="out-in">
      <Input
        v-if="modifyWay === eModifyWay.ORIGINAL_PWD"
        key="1"
        :placeholder="pwdConfig.placeholder3"
        :maxlength="pwdConfig.maxLen"
        :value="pwd"
        :type="pwdConfig.type"
        @change="handlePwdChange"
        :showEye="false"
      ></Input>
      <CodeInput
        v-else-if="modifyWay === eModifyWay.CODE"
        :placeholder="codeConfig.placeholder"
        :maxlength="codeConfig.maxLen"
        :value="code"
        :type="codeConfig.type"
        :handleChange="handleCodeChange"
        :phone="phone"
        :sendSmsFunc="sendSmsFunc"
        :sendVoiceFunc="sendVoiceFunc"
        :phoneValid="phoneValid"
      >
      </CodeInput>
    </transition>
    <Input
      :placeholder="pwdConfig.placeholder2"
      :maxlength="pwdConfig.maxLen"
      :value="pwd2"
      :type="pwdConfig.type"
      @change="handlePwdChange2"
    ></Input>
    <LoginButton
      class="mt-20"
      text="确定"
      :disabled="getConfirmDisabled"
      @click="handleClickConfirm"
    ></LoginButton>
    <div class="mt-5 text-center text-font-blue text-sm">
      <transition name="fade" mode="out-in">
        <div
          key="1"
          v-if="modifyWay === eModifyWay.ORIGINAL_PWD"
          @click="transterModifyWay(eModifyWay.CODE)"
        >
          验证码修改
        </div>
        <div key="2" v-else @click="transterModifyWay(eModifyWay.ORIGINAL_PWD)">
          原密码修改
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import Input from "@/components/common/Input/index.vue";
import { pwdConfig, codeConfig, phoneConfig } from "../Login/const";
import LoginButton from "../Login/components/LoginButton/index.vue";
import { tModifyPwdFunc, eModifyWay } from "./types";
import { tSendSmsFunc, tSendVoiceFunc } from "../Login/types";
import CodeInput from "../Login/components/CodeInput/index.vue";
export default Vue.extend({
  props: {
    phone: {
      required: true,
      type: String,
    },
    modifyPwdFunc: {
      type: Function as PropType<tModifyPwdFunc>,
      required: true,
    },
    sendSmsFunc: {
      type: Function as PropType<tSendSmsFunc>,
      required: true,
    },
    sendVoiceFunc: {
      type: Function as PropType<tSendVoiceFunc>,
      required: false,
    },
  },
  components: {
    Input,
    LoginButton,
    CodeInput,
  },
  data() {
    return {
      pwdConfig,
      codeConfig,
      pwd: "",
      pwd2: "",
      code: "",
      loading: false,
      eModifyWay,
      modifyWay: eModifyWay.ORIGINAL_PWD,
    };
  },
  computed: {
    getConfirmDisabled(): boolean {
      if (this.modifyWay === eModifyWay.ORIGINAL_PWD) {
        return (
          !(pwdConfig.validate(this.pwd) && pwdConfig.validate(this.pwd2)) ||
          this.loading
        );
      } else if (this.modifyWay === eModifyWay.CODE) {
        return (
          !(pwdConfig.validate(this.pwd2) && codeConfig.validate(this.code)) ||
          this.loading
        );
      } else {
        return false;
      }
    },
    phoneValid(): boolean {
      return phoneConfig.validate(this.phone);
    },
  },
  methods: {
    handleCodeChange(v: string) {
      this.code = v;
    },
    handlePwdChange(v: string) {
      this.pwd = v;
    },
    transterModifyWay(way: eModifyWay) {
      this.modifyWay = way;
    },
    handlePwdChange2(v: string) {
      this.pwd2 = v;
    },
    async handleClickConfirm() {
      const { pwd, pwd2 } = this;
      this.loading = true;
      // ??????
      try {
        if (this.modifyWay === eModifyWay.ORIGINAL_PWD) {
          await this.modifyPwdFunc(this.phone, this.pwd, this.pwd2);
        } else if (this.modifyWay === eModifyWay.CODE) {
        }
      } catch (err) {}
      this.loading = false;
    },
  },
});
</script>

<style>
</style>