<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar ref="customNavbar" title="个人中心" />
    <view class="user-info">
      <view class="avatar-container">
        <image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
      </view>
      <view class="user-details">
        <text class="phone-number">{{ userInfo.nickName }}</text>
        <view class="verification-status">
          <text class="status-text">{{ realNameStatus }}</text>
        </view>
      </view>
    </view>
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <!-- 用户信息区域 -->

      <!-- 功能菜单区域 -->
      <view class="menu-section">
        <view
          v-for="(item, index) in filteredMenuItems"
          :key="index"
          class="menu-item"
          @click="handleMenuClick(item)"
        >
          <view class="menu-icon">
            <image v-if="item.icon" :src="item.icon" mode="aspectFit" />
          </view>
          <text class="menu-text">{{ item.title }}</text>
          <view class="menu-arrow">
            <image :src="CommonEnum.RIGHT_CHEVRON" mode="aspectFit" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { CommonEnum } from "@/enum/common.js";
import { getUserInfo } from "@/api/personalCenter/index.js";
import { isSysAdmin, logout } from "../../api/auth/auth";

export default {
  data() {
    return {
      filteredMenuItems: "",
      bgc: {
        backgroundColor: "#F5F0E7",
      },
      CommonEnum,
      SysAdmin: false,
      // 加载状态
      loading: false,
      // 用户信息
      userInfo: {
        nickName: "",
        isReal: "",
        avatar: "",
      },
      // 菜单项数据
      menuItems: [
        {
          title: "我的预约",
          icon: CommonEnum.MY_APPOINTMENT,
          path: "/pages/personalCenter/myAppointment",
        },
        {
          title: "我的收藏",
          icon: CommonEnum.MY_COLLECTION,
          path: "/pages/personalCenter/myCollection",
        },
        {
          title: "捐赠历史记录",
          icon: CommonEnum.MY_DONOR,
          path: "/pages/personalCenter/myDonationList",
        },
        {
          title: "祈福记录",
          icon: CommonEnum.MY_PRAY,
          path: "/pages/personalCenter/myPrayRecordList",
        },
        {
          title: "设备录入",
          icon: CommonEnum.MY_ACTIVITY,
          path: "/page_user/luru/index",
        },
        {
          title: "牌位管理",
          icon: "https://api.ccttiot.com/7ee81e0f35cde641f80887485f287e0c-1760513960519.png",
          // 无图标，仅管理员可见
          path: "/pages/memorial/adminMemorial",
        },
        // {
        //   title: "设置",
        //   icon: "https://api.ccttiot.com/7ee81e0f35cde641f80887485f287e0c-1760513960519.png",
        //   // 无图标，仅管理员可见
        //   path: "/pages/personalCenter/set",
        // },
        {
          title: "退出登录",
          icon: "https://api.ccttiot.com/0f4e09531ddffda3aff94a5fd2b5d7d4-1760514133937.png",
          path: "/pages/login/login",
        },
      ],
    };
  },
  onLoad() {
    // 页面加载时获取用户信息
    this.loadUserInfo();
    this.getIsSysAdmin();
  },
  methods: {
    async getIsSysAdmin() {
      const res = await isSysAdmin();
      this.SysAdmin = res.data;
      console.log("isSystem", this.SysAdmin);
      this.filteredMenuItems = this.toFilteredMenuItems();
    },
    // 加载用户信息
    async loadUserInfo() {
      try {
        const response = await getUserInfo();

        if (response.code === 200) {
          // 更新用户信息
          this.userInfo = {
            nickName: response.data.nickName,
            isReal: response.data.isReal,
            avatar: response.data.avatar,
          };
          console.log("this.userInfo ", this.userInfo);
        } else {
          console.warn("获取用户信息失败:", response.msg);
          // 使用默认信息
        }
      } catch (error) {
        console.error("获取用户信息失败:", error);
        // 使用默认信息
      } finally {
        this.loading = false;
      }
    },

    // 处理菜单点击
    handleMenuClick(item) {
      console.log("点击菜单项:", item.title);
      if (item.path === "/pages/login/login") {
        uni.showModal({
          title: "提示",
          content: "确定退出登录",
          confirmText: "确定",
          cancelText: "取消",
          success: async (res) => {
            if (res.confirm) {
              await logout();
              uni.navigateTo({
                url: "/pages/login/login",
              });
            }
          },
        });
        return;
      }
      // 跳转到对应页面
      if (item.path) {
        uni.navigateTo({
          url: item.path,
          fail: (err) => {
            console.error("页面跳转失败:", err);
            uni.showToast({
              title: "页面开发中",
              icon: "none",
            });
          },
        });
      }
    },
    toFilteredMenuItems() {
      console.log("filteredMenuItems触发了:", this.SysAdmin);
      // 非管理员隐藏：牌位录入、牌位管理
      if (this.SysAdmin) return this.menuItems;
      return this.menuItems.filter(
        (item) => item.title !== "牌位录入" && item.title !== "牌位管理",
      );
    },
  },
  computed: {
    realNameStatus() {
      console.log("<this.userInfo.isReal>:", this.userInfo.isReal);
      return this.userInfo.isReal.toString() === "true" ? "已实名" : "未实名";
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  width: 650rpx;
  margin-top: 24rpx;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 38rpx 50rpx 50rpx 50rpx;
  background: #fffbf5;
  border-radius: 20rpx;
  border: 2rpx solid #c7a26d;
  margin-bottom: 40rpx;
}

// 用户信息区域
.user-info {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 50rpx;
  margin: 52rpx 0 54rpx 0;
  //border: red solid 2px;
}

.avatar-container {
  margin-right: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: #f0f0f0;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.phone-number {
  font-size: 36rpx;
  font-weight: 500;
  color: #695347;
  margin-bottom: 16rpx;
  line-height: 1.2;
  text-align: left;
  //border: red solid 2px;
}

.verification-status {
  align-self: flex-start;
}

.status-text {
  background: #c7a26d;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-weight: 400;
}

// 菜单区域
.menu-section {
  width: 100%;
  flex: 1;
}

.menu-item {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  background: #faf8f3;
  border-radius: 16rpx;
  //border: 1rpx solid #d8189b;
  transition: all 0.3s ease;

  &:active {
    background: #f0e8d8;
    transform: scale(0.98);
  }
}

.menu-icon {
  width: 60rpx;
  height: 100rpx;
  margin-right: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  //border: 1rpx solid #d8189b;

  image {
    width: 44rpx;
    height: 44rpx;
  }
}

.menu-text {
  flex: 1;
  font-size: 32rpx;
  font-weight: 400;
  color: #695347;
  line-height: 100rpx;
  text-align: left;
  align-items: center;
  //border: red solid 2px;
}

.menu-arrow {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  //border: red solid 2px;

  image {
    width: 32rpx;
    height: 32rpx;
  }
}
</style>
