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

import { Profile } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';

import MerchantSetting from './merchant-setting.vue';

const userStore = useUserStore();
const tabsValue = ref('basic');

const tabs = [
  { label: '基本信息', value: 'basic' },
  { label: '资质合同', value: 'qualification' },
  { label: '门店信息', value: 'stores' },
  { label: '员工信息', value: 'staffs' },
  { label: '日志记录', value: 'logs' },
];
</script>

<template>
  <div class="p-5">
    <Profile
      v-model:model-value="tabsValue"
      :title="$t('page.merchant.center')"
      :user-info="{
        realName: userStore.userInfo?.realName || '',
        avatar: userStore.userInfo?.avatar || '',
        username: userStore.userInfo?.username || '',
      }"
      :tabs="tabs"
    >
      <template #content>
        <div class="rounded-lg bg-card">
          <!-- 基本信息：使用表单形式，支持展示和修改 -->
          <MerchantSetting v-if="tabsValue === 'basic'" />

          <!-- 其他 Tab 暂时保留或后续根据需要优化 -->
          <div v-else class="p-6 text-center text-gray-400">正在开发中...</div>
        </div>
      </template>
    </Profile>
  </div>
</template>

<style scoped lang="scss">
.bg-card {
  background-color: var(--el-bg-color-overlay);
}
</style>
