<template>
  <div class="store-page">
    <Breadcrumb />
    <a-row class="user-setting-head">
      <a-col :span="24">
        <UserPanel :user="user" />
      </a-col>
    </a-row>
    <a-row class="wrapper">
      <a-col :span="24">
        <a-tabs default-active-key="1" type="rounded" class="settings-tabs">
          <a-tab-pane key="1" title="基础信息">
            <BasicInformation />
          </a-tab-pane>
          <a-tab-pane key="2" title="安全设置">
            <SecuritySettings />
          </a-tab-pane>
          <a-tab-pane key="3" title="第三方账号">
            <SocialBindings />
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import UserPanel from './components/user-panel.vue'
import BasicInformation from './components/basic-information.vue'
import SecuritySettings from './components/security-settings.vue'
import SocialBindings from './components/social-bindings.vue'
</script>

<style scoped lang="less">
.wrapper {
  padding: 20px 20px 0;
  min-height: 580px;
  background-color: var(--color-bg-2);
  border-radius: 8px;
}

:deep(.section-title) {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 14px;
}

.user-setting-head {
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .wrapper {
    min-height: auto;
    padding: 12px 12px 0;
    border-radius: 6px;
  }

  .user-setting-head {
    margin-bottom: 12px;
  }

  .settings-tabs {
    :deep(.arco-tabs-content) {
      padding-top: 4px;
    }
  }
}
</style>
