<template>
  <div class="bill-wrap">
    <van-cell-group inset class="mt12_i">
      <van-field required v-model="user.userInfo.mobile" name="mobile" label="手机号码" placeholder="请输入手机号码" readonly type="number"/>
      <van-field required v-model="query.code" center clearable label="短信验证码" placeholder="请输入短信验证码" type="number" maxlength="6">
        <template #button>
          <van-button size="small" type="primary" :disabled="sendFlagPhone" :loading="smsLoading" @click="!sendFlagPhone ? sendSms() : null">{{ !sendFlagPhone ? '发送验证码' : sendCode }}</van-button>
        </template>
      </van-field>
      <van-field required v-model="query.pswd1" name="pswd1" label="输入新密码" placeholder="字母与数字组合至少6位" />
      <van-field required v-model="query.pswd2" name="pswd2" label="确认新密码" placeholder="字母与数字组合至少6位" />
    </van-cell-group>
    <div class="buy-btn-wrap">
      <el-button class="btn_main" @click="submit">
        确认
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { areaList } from "@vant/area-data";
import { useAll } from "~/api/pubAll/service";
const { checkMobileCode, updateUserInvoice, sendSMS, updateUser } = useAll();
import { showLoadingToast, closeToast } from "vant";

let pageTitle: any = ref("HOTKING-个人中心-修改密码");
useHead(() => ({
  title: pageTitle.value,
}));
const fileList = ref<any[]>([]);
const route = useRoute();
const router = useRouter();
const query: any = ref({});
const user = useUserStore();
const checked = ref(false);
const zzsChecked = ref("1");
const billType = ref("公司发票");
user.value.adminTitle = "修改密码";
const nuxtApp = useNuxtApp();
const fieldValue = ref("");
const showArea = ref(false);
const AreaVal = ref("");
const pickerValue = ref<any[]>([]);
const onConfirm = ({ selectedValues, selectedOptions }: any) => {
  showArea.value = false;
  pickerValue.value = selectedValues;
  AreaVal.value =
    selectedOptions[0].text + selectedOptions[1].text + selectedOptions[2].text;
};
const toast:any = ref(null)
async function submit() {
  if (!query.value.mobile || query.value.mobile.length != 11) {
    ElMessage.error("手机号码有误");
    return;
  } else if (!query.value.code) {
    ElMessage.error("请输入验证码");
    return;
  } else if (query.value.code.length != 6) {
    ElMessage.error("请输入6位数验证码");
    return;
  }
  if (!(query.value.pswd1.length >= 6 && query.value.pswd1.length <= 20)) {
    ElMessage.error("请输入正确的新密码");
    return;
  } else if (!(query.value.pswd2.length >= 6 && query.value.pswd2.length <= 20)) {
    ElMessage.error("请输入正确的重复密码");
    return;
  }
  query.value.password = query.value.pswd1
   toast.value = showLoadingToast({
    message: "",
    forbidClick: true,
    zIndex: 3000,
    className: "my-custom-toast",
    duration: 0,
  });
  let res:any = await checkMobileCode({
    mobile: query.value.mobile,
    code: query.value.code,
  });
  if (res.httpCode == 200) {
    updatePs();
  } else {
    toast.value.close();
  }
}

//更新手机
async function updatePs() {
  let res: any = await updateUser({
    password: query.value.password,
  });
  toast.value.close();
  sendFlagPhone.value = false;
  if (res.httpCode == 200) {
    ElMessage.success("修改成功");
    query.value.password = "";
    query.value.pswd1 = "";
    query.value.pswd2 = "";
    query.value.code = "";
    clearInterval(phoneTime.value);
    setTimeout(() => {
      router.go(-1);
    }, 1500);
  }
}

const smsLoading = ref(false);
let sendFlagPhone: any = ref(false);
let phoneTime: any = ref(null);
let sendCode: any = ref(60);
async function sendSms() {
  query.value.mobile = user.value.userInfo.mobile;
  if (!query.value.mobile || query.value.mobile.length != 11) {
    ElMessage.error("手机号码有误");
    return;
  }
  if (smsLoading.value || sendFlagPhone.value) return;
  smsLoading.value = true;
  let res: any = await sendSMS(query.value.mobile);
  smsLoading.value = false;
  if (res.httpCode == 200) {
    sendCode.value = 60;
    sendFlagPhone.value = true;
    phoneTime.value = setInterval(() => {
      sendCode.value--;
      if (sendCode.value == 0) {
        clearInterval(phoneTime.value);
        sendFlagPhone.value = false;
        sendCode.value = "发送验证码";
      }
    }, 1000);
  } else {
    clearInterval(phoneTime.value);
    sendFlagPhone.value = false;
    sendCode.value = "发送验证码";
  }
}

onMounted(() => {
  setTimeout(() => {
    query.value.mobile = user.value.userInfo.mobile;
  }, 100);
});
</script>
<style scoped lang="scss">
.bill-wrap {
  min-height: 100vh;
  background: #f7f7f7;
  padding-top: 1px;
  padding-bottom: 20px;
  .buy-btn-wrap {
    display: block;
    width: 100%;
    left: 0;
    padding: 0 12px;
    z-index: 1;
    width: 100%;
    .el-button {
      width: 100%;
      border-radius: 25px !important;
      flex: 1;
      height: 42px !important;
      line-height: 42px !important;
      margin-top: 20px;
      & + .el-button {
        margin-left: 0;
        margin-top: 10px;
      }
      &.is-disabled {
        background: #e9e9e9;
        color: #fff;
      }
    }
  }
}
</style>