<template>
  <PageLayout>
    <div class=" text-grey-8 q-pa-sm row items-center justify-end">还未实名认证？
      <!-- TODO 客服url -->
      <q-btn flat dense color="black" href="http://xxxx" target="_blank">联系客服</q-btn>
    </div>
    <q-form ref="formRef" class="" @submit="onSubmit">
      <div class="bg-white q-pa-md">
      <q-input
        v-model="phone"
        label="手机号"
        :rules="[Rules.required,Rules.phone]"
      />
      <q-input
        v-model="username"
        label="姓名"
        :rules="[Rules.required]"
      />
      <q-input
        v-model="cardNo"
        label="身份证后六位"
        :rules="[Rules.strLength(6,'请输入正确的身份证后6位')]"
      />
      <q-input
        v-model="pwd"
        label="新密码"
        :rules="[Rules.required,Rules.password]"
        placeholder="6-12位数字、字母密码"
        type="password"
      />
      <q-input
        v-model="pwd2"
        label="确认密码"
        :rules="[Rules.required,Rules.password,Rules.sameAs(pwd,'确认密码与新密码不一致')]"
        type="password"
      /></div>
      <div class="q-pa-md">
        <q-btn unelevated color="primary" class="full-width q-my-md q-py-sm">修改登录密码</q-btn>
      </div>
    </q-form>
  </PageLayout>
</template>

<script setup>
import { api } from "boot/axios";
import { Rules } from "src/utils/tools"
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { useQuasar } from "quasar";

const $q = useQuasar()
const route = useRoute();
const router = useRouter();
const store = useSelfStore();

const props = defineProps(["type"])
const phone = ref("");
const username = ref("")
const cardNo = ref('')
const pwd = ref("");
const pwd2 = ref("");

const formRef = ref(null);

function onSubmit() {
  formRef.value.validate().then((success)=>{
    if(!success){
      return false
    }
    $q.loading.show()
    api.resetMyPassword({
      phone:phone.value,
      cardNo:cardNo.value,
      username: username.value,
      password: pwd.value,
      password_confirmation: pwd2.value
    }).then(res => {
      $q.notify({type: 'positive',message: res.message || '修改成功'})
      store.refresh()
      router.back()
    }).catch(e=>{
      $q.notify({type: 'negative',message: e.message})
    }).finally(()=>{
      $q.loading.hide()
    })
  })
}
</script>
