<template>
  <PageLayout hideHeader class="bg-white">
    <div class="login-main column no-wrap">
      <div
        class="text-white bg-gradient q-pt-xl q-pa-md"
      >
        <h4 class="q-mb-md">云朵小店</h4>
        <p class="text-subtitle1">为您打造专属店铺品牌</p>
      </div>
      <q-card flat class="login-form ">
        <q-card-section>
          <q-form
            @submit.prevent.stop="onSubmit"
            class="q-gutter-y-sm"
            ref="formRef"
          >
            <q-input
            v-if="!isShopkeeper"
              v-model="shopNo"
              lazy-rules
              :rules="[Rules.required]"
              placeholder="店铺编号"
            >
              <template v-slot:prepend>
                <q-icon name="maps_home_work" />
              </template>
            </q-input>
            <q-input
              v-model="phone"
              lazy-rules
              :rules="[Rules.required,Rules.phone]"
              placeholder="手机号"
            >
              <template v-slot:prepend>
                <q-icon name="phone_android" />
              </template>
            </q-input>
            <q-input
              type="password"
              v-model="password"
              lazy-rules
              :rules="[Rules.required,Rules.password]"
              placeholder="密码"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
            </q-input>
            <div class="row justify-end">
              <!-- TODO 记住密码，忘记密码 -->
              <!-- <q-checkbox v-model="remember" style="margin-left:-8px;">记住密码</q-checkbox> -->
              <!-- <q-btn flat dense color="grey" to="/my/forget">忘记密码?</q-btn> -->
            </div>
            <div class="q-mt-lg">
              <q-btn
                class="full-width"
                ref="submit"
                size="16px"
                color="primary"
                label="登录"
                type="submit"
                unelevated
                :loading="loading"
                :disable="!phone || !password || loading"
              />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </div>
      <!-- <div :elevated="false" :bordered="false" class="bg-white text-center q-mt-xl">
        <q-btn flat color="primary" @click="isShopkeeper = !isShopkeeper" >登录{{isShopkeeper?'员工':'店主'}}账号</q-btn>
      </div> -->
  </PageLayout>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Rules } from "src/utils/tools"
import { api } from "boot/axios";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useSelfStore } from "stores/self";
const $q = useQuasar();
const router = useRouter();
const loading = ref(false);
const phone = ref("");
const password = ref("");
const remember = ref(true);
const formRef = ref(null);
const shopNo = ref("")
const isShopkeeper = ref(true)
const selfStore = useSelfStore();
function onSubmit() {
  loading.value = true;
  formRef.value
    .validate()
    .then((success) => {
      if (!success) return;
      return api.login({ phone: phone.value, password: password.value }).then((res) => {
        selfStore.setInfo(res);
        router.replace("/home");
      });
    })
    .catch((error) => {
      $q.notify({
        color: "red-5",
        type: "negative",
        position: "center",
        message: error.message
      });
    })
    .finally(() => {
      loading.value = false;
    });
}
</script>
<style lang="scss" scoped>
</style>
