<script setup lang="ts">
import { isDark, toggleDark } from '@af-mobile-client-vue3/composables/dark'
import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
import { indexedDB } from '@af-mobile-client-vue3/utils/indexedDB'
import {
  showToast,
  Cell as VanCell,
  List as VanList,
  Switch as VanSwitch,
} from 'vant'
import { computed, ref } from 'vue'

const checked = computed({
  get: () => isDark.value,
  set: () => toggleDark(),
})

// 列表详情页的路由  '/Component/XCellDetailView/:id'
const list = ref([
  {
    name: 'XCellList 单元格列表',
    to: '/Component/XCellListView',
  },
  {
    name: 'XReportForm 报表表单',
    to: '/Component/XReportFormView',
  },
  {
    name: 'XCellDetail 列表详情页',
    to: '/Component/XCellDetailView/0',
  },
  {
    name: 'XForm 表单',
    to: '/Component/XFormView',
  },
  {
    name: 'XFormGroup 表单组',
    to: '/Component/XFormGroupView',
  },
  {
    name: '操作卡手机端',
    to: '/Component/XReportFormView',
  },
  {
    name: 'StepView',
    to: '/Component/StepView',
  },
  {
    name: '评论记录列表',
    to: '/Component/EvaluateRecordView',
  },
  {
    name: 'XSignature 签名组件',
    to: '/Component/XSignatureView',
  },
  {
    name: 'XReportGridView 栅格组件',
    to: '/Component/XReportGridView',
  },
  {
    name: 'XFormAppraise 表单',
    to: '/Component/XFormAppraiseView/2/debug',
  },
  {
    name: 'XOlMap 地图组件',
    to: '/Component/XOlMapView',
  },
  {
    name: 'XOlMap 地址选择器',
    to: '/Component/XOlMapView/XLocationPicker',
  },
  {
    name: '请求示例',
    to: '/Component/XRequestView',
  },
  {
    name: 'Iconify 图标使用示例',
    to: '/Component/IconifyView',
  },
  {
    name: 'SecurityCertificate 打开安检单组件',
    to: '/Component/SecurityCertificateView',
  },
  {
    name: 'UserDetail 用户详情组件',
    to: '/Component/UserDetailView',
  },
  {
    name: '其他收费测试',
    to: '/Component/OtherCharge',
  },
  {
    name: 'MateChat 对话组件',
    to: '/Component/MateChatView',
  },
  {
    name: 'kk预览',
    to: '/Component/FilePreview',
  },
  {
    name: 'kk预览弹窗组件',
    to: '/Component/FilePreviewDialog',
  },
])

function cleanConfigCache() {
  // 清除indexedDB缓存
  indexedDB.clear()
  showToast({
    message: '操作成功',
  })
}

async function logout() {
  await useUserStore().logout()
}
</script>

<template>
  <main class="home_main">
    <h1 class="home_title">
      <img src="@af-mobile-client-vue3/assets/img/component/logo.png" alt="logo">
      <span>Vue3-Client</span>
    </h1>
    <span class="home_desc">基于Vant4的移动端组件库扩展</span>
    <div class="home_component_main">
      <span class="home_desc">设置项</span>
      <VanCell center title="暗黑模式">
        <template #right-icon>
          <VanSwitch
            v-model="checked"
            size="20px"
            aria-label="on/off Dark Mode"
          />
        </template>
      </VanCell>
      <span class="home_desc">配置化组件</span>
      <VanList>
        <VanCell v-for="item in list" :key="item.name" :title="item.name" is-link :to="item.to" />
      </VanList>
      <span class="home_desc">开发者工具</span>
      <VanList>
        <VanCell key="clean_config_cache" title="清除配置缓存" @click="cleanConfigCache" />
        <VanCell key="clean_config_cache" title="退出登录" @click="logout" />
      </VanList>
    </div>
  </main>
</template>

<style scoped lang="less">
.van-theme-light {
  .home_main {
    .home_title {
      color: #323233;
    }
    .home_desc {
      color: #969799;
    }
    .home_component_main {
      .van-cell {
        color: #34495e;
      }
    }
  }
}
.home_main {
  padding: var(--base-interval-2);
  .home_title {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 400;
    img {
      display: inline-block;
      vertical-align: middle;
      width: 46px;
      height: 46px;
    }
    span {
      margin-left: 12px;
    }
  }
  .home_desc {
    padding-left: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 40px;
    color: #969799;
    font-size: 14px;
  }
  .home_component_main {
    margin-top: 30px;
    .van-cell {
      margin: 10px 0;
      font-weight: 600;
      border-radius: 99px;
      :deep(.van-icon) {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
