<template>
  <div class="my-page">
    <!-- 头部信息 -->
    <div class="header">
    <!-- 头像、昵称、标签等个人信息 -->
    <div class="user-info">
      <van-image class="avatar" :src="yourAvatarUrl" />
      <div class="info-text">
        <div class="nickname">{{ nickname }}</div>
        <div class="tag">快乐老人</div>
        <div class="description">详细描述信息</div>
      </div>
    </div>
    <!-- 右侧的 > 符号 -->
    <div class="arrow">&gt;</div>
  </div>


  <myOrder></myOrder>


  <div class="organization-section">
    <!-- 菜单列表 -->
    <van-cell-group>
      <!-- 我的预约-->
      <van-cell
        title="我的预约"
        is-link
        @click="goToMyOrders" class="organization-cell"
      >
        <template #icon>
          <van-icon name="todo-list-o" class="icon" />
        </template>
      </van-cell>

      <!-- 我的钱包 -->
      <van-cell
        title="我的钱包"
        is-link
        @click="goToMyWallet"  class="organization-cell "
      >
        <template #icon>
          <van-icon name="balance-o"  class="icon" />
        </template>
      </van-cell>

      <!-- 我的健康 -->
      <van-cell
        title="我的健康"
        is-link
        @click="goToMemberCenter" class="organization-cell "
      >
        <template #icon>
          <van-icon name="like-o"  class="icon" />
        </template>
      </van-cell>

      <!-- 我的活动 -->
      <van-cell
        title="我的地址"
        is-link
        @click="goToAddressList" class="organization-cell "
      >
        <template #icon>
          <van-icon name="point-gift-o"  class="icon" />
        </template>
      </van-cell>

      
      <!-- 我的机构 -->
      <van-cell
        title="我的机构"
        is-link
        @click="goToSettings" class="organization-cell "
      >
        <template #icon>
          <van-icon name="newspaper-o"  class="icon" />
        </template>
      </van-cell>

      
      <!-- 我的亲友 -->
      <van-cell
        title="我的亲友"
        is-link
        @click="goToSettings" class="organization-cell "
      >
        <template #icon>
          <van-icon name="friends-o" class="icon" />
        </template>
      </van-cell>

      
      <!-- 系统设置 -->
      <van-cell
        title="系统设置"
        is-link
        @click="goToSettings" class="organization-cell "
      >
        <template #icon>
          <van-icon name="setting-o"  class="icon" />
        </template>
      </van-cell>


      <!-- ... 其他菜单项 -->
    </van-cell-group>
    </div>

    <!-- 底部退出登录按钮 -->
    <div class="logout-button">
      <van-button type="default" @click="logout">退出登录</van-button>
    </div>
  </div>

  <tabBar></tabBar>
</template>

<script setup>
 import { ref, reactive } from "vue";
 import { useRouter } from 'vue-router';
 import tabBar from "@/components/tabBar/index.vue";
 import myOrder from '@/components/order/myOrder.vue'
 const yourAvatarUrl = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg');
 const nickname = ref('Your Nickname');
 const router = useRouter();
    function goToMyOrders() {
      // 处理跳转到我的订单页面
      
    }

    function goToMyWallet() {
      // 处理跳转到我的钱包页面
    }
    function goToAddressList(){
      router.push("/addressList")
    }
    function goToMemberCenter() {
      // 处理跳转到会员中心页面
    }
    function goToSettings() {
      // 处理跳转到设置页面
    }
    function logout() {
      // 处理退出登录逻辑
    }
</script>

<style scoped>
.my-page {
  background-color: white;
  padding-top: env(safe-area-inset-top); /* 适配 iPhone X 及以上的刘海屏 */
}
.header {
  background-color: #00BAAD;
  color: #fff;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 180px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-right: 16px;
}

.info-text {
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 24px;
  font-weight: bold;
}

.tag {
  margin-top: 4px;
  background-color: #f0f3f6;
  color: #333;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 13px;
  width: 60px;
  display: inline-block;
}

.description {
  margin-top: 4px;
  font-size: 14px;
  color: #f0f3f6;
}

.arrow {
  font-size: 24px;
}


.organization-section {
  margin-top: 16px;
}

.organization-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.icon {
  margin-right: 8px; /* 调整图标和文字之间的右边距 */
}
.logout-button {
  margin-top: 20px;
  padding: 16px;
  text-align: center;
}
</style>
