<template>
  <Page>
    <template #header>
      <div class="flex items-center justify-between px-4 py-2">
        <h3 class="text-lg font-medium">{{ $t('page.adminSetting.layoutTitle') }}</h3>
      </div>
    </template>

    <div class="p-6">
      <div class="mb-4 text-gray-500">{{ $t('page.adminSetting.appList') }}</div>
      <div class="divide-y rounded border">
        <div
          v-for="app in apps"
          :key="app.key"
          class="flex items-center justify-between px-4 py-3"
        >
          <div class="flex items-center gap-3">
            <span class="inline-flex size-8 items-center justify-center rounded bg-primary/10 text-primary">{{ app.icon }}</span>
            <div>
              <div class="font-medium">{{ app.name }}</div>
              <div class="text-xs text-gray-500">{{ app.desc }}</div>
            </div>
          </div>
          <Preferences :default-value="'layout'">
            <a-button size="small">{{ $t('common.setting') }}</a-button>
          </Preferences>
        </div>
      </div>
    </div>
  </Page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { Page } from '@vben/common-ui'
import { Preferences } from '@vben/layouts'

interface AppItem { key: string; name: string; desc: string; icon: string }

const apps = ref<AppItem[]>([
  { key: 'multi', name: '多应用', desc: '', icon: '多' },
  { key: 'shop', name: '商城系统', desc: '', icon: '商' },
  { key: 'vip', name: '会员卡管理', desc: '', icon: '会' },
  { key: 'tour', name: '旅游系统', desc: '', icon: '旅' },
  { key: 'weixin', name: '微官网', desc: '', icon: '微' },
  { key: 'service', name: '上门服务', desc: '', icon: '服' },
  { key: 'community', name: '种草社区', desc: '', icon: '社' },
])
</script> 