<template>
  <PageLayout class="">
    <div class="bg-white q-pa-lg text-center">
      <div class="text-subtitle text-weight-bold">{{ store.shop.name }}</div>
      <div class="text-caption text-grey" @click="checkUpdate">当前版本：v{{ version }}</div>
    </div>
    <q-list class="q-mt-sm bg-white">
      <!-- <q-item>
        <q-item-section>新用户注册</q-item-section>
        <q-item-section side>
          <q-toggle :model-value="store.shop.xx" size="md" @update:model-value="(val)=>updateShopSetting('xx',val)" />
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>首页播报海报开关</q-item-section>
        <q-item-section side>
          <q-toggle :model-value="store.shop.xx" size="md" @update:model-value="(val)=>updateShopSetting('xx',val)" />
        </q-item-section>
      </q-item> -->
      <q-item clickable @click="clearCache">
        <q-item-section>清理缓存</q-item-section>
        <q-item-section side>
          <q-icon size="xs" name="arrow_forward_ios" />
        </q-item-section>
      </q-item>
      <!-- <q-item to="/app/help">
        <q-item-section>帮助中心</q-item-section>
        <q-item-section side>
          <q-icon size="xs" name="arrow_forward_ios" />
        </q-item-section>
      </q-item> -->
      <!-- <q-item to="/app/about">
        <q-item-section>关于我们</q-item-section>
        <q-item-section side>
          <q-icon size="xs" name="arrow_forward_ios" />
        </q-item-section>
      </q-item> -->
    </q-list>
    <div class="q-ma-md">
      <q-btn
        class="fit"
        color="primary"
        text-color="white"
        unelevated
        size="md"
        label="退出当前账号"
        @click="logout"
      />
    </div>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,inject } from "vue";
import { useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
const checkUpdate = inject('checkUpdate')
const router = useRouter();
const store = useSelfStore();
const $q = useQuasar()
const version = window.AppVersion?.version??(process.env.WEB_VERSION||'0.0.0')

function logout() {
  api.logout().finally((res) => {
    store.clear();
    router.replace("/login").finally(()=>{
      location.reload();
    });
  });
}
function updateShopSetting(){
  // TODO(delay):对接口设置店铺是否开启新用户注册
}

function clearCache(){
  // 插件https://www.npmjs.com/package/cordova-plugin-cache
  try{
    window.cache.cleartemp();
    window.cache.clear(()=>{
      $q.notify("清除缓存成功!")
    })
  }catch(e) {
    console.error(e)
    window.location.reload();
    $q.notify("清除缓存成功")
  }
}
</script>
