<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar">
        <image class="avatar-icon" src="/static/icons/user.svg"></image>
      </view>
      <view class="user-details">
        <view class="user-name">微信用户</view>
        <view class="user-phone">130****1579</view>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToOrders">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/orders.svg"></image>
        </view>
        <view class="menu-text">我的订单</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="goToCoupons">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/coupon.svg"></image>
        </view>
        <view class="menu-text">我的优惠券</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="goToMembership">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/membership.svg"></image>
        </view>
        <view class="menu-text">我的会员卡</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="goToCards">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/wallet.svg"></image>
        </view>
        <view class="menu-text">我的卡片</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="goToInvoice">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/invoice.svg"></image>
        </view>
        <view class="menu-text">发票管理</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="goToFAQ">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/faq.svg"></image>
        </view>
        <view class="menu-text">常见问题</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="callService">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/service.svg"></image>
        </view>
        <view class="menu-text">联系客服</view>
        <view class="service-phone">400-0755-315</view>
      </view>
      <view class="menu-item" @click="goToOfficialAccount">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/official.svg"></image>
        </view>
        <view class="menu-text">公众号信息</view>
        <view class="menu-arrow"></view>
      </view>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      v1.62.11
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { mockApi } from '../../utils/mock';

const userInfo = ref<any>(null);

onMounted(async () => {
  const response = await mockApi.getUserInfo();
  if (response.success) {
    userInfo.value = response.data;
  }
});

const goBack = () => {
  uni.navigateBack();
};

const goToOrders = () => {
  uni.navigateTo({
    url: '/pages/orders/orders'
  });
};

const goToCoupons = () => {
  uni.showToast({
    title: '优惠券功能开发中',
    icon: 'none'
  });
};

const goToMembership = () => {
  uni.showToast({
    title: '会员卡功能开发中',
    icon: 'none'
  });
};

const goToCards = () => {
  uni.showToast({
    title: '卡片功能开发中',
    icon: 'none'
  });
};

const goToInvoice = () => {
  uni.showToast({
    title: '发票管理功能开发中',
    icon: 'none'
  });
};

const goToFAQ = () => {
  uni.showToast({
    title: '常见问题功能开发中',
    icon: 'none'
  });
};

const callService = () => {
  uni.makePhoneCall({
    phoneNumber: '18371997424'
  });
};

const goToOfficialAccount = () => {
  uni.showToast({
    title: '公众号信息功能开发中',
    icon: 'none'
  });
};

const goToSettings = () => {
  uni.showToast({
    title: '设置功能开发中',
    icon: 'none'
  });
};
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* 用户信息区域 */
.user-info {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx 40rpx;
  background-color: #FFD700;
  margin-top: 0;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 32rpx;
}

.avatar-icon {
  width: 90rpx;
  height: 90rpx;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 34rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
  color: #000000;
}

.user-phone {
  font-size: 24rpx;
  color: #333333;
}

/* 菜单列表 */
.menu-list {
  background-color: #ffffff;
  margin-top: 0;
  border-top: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f9f9f9;
}

.menu-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.menu-svg-icon {
  width: 32rpx;
  height: 32rpx;
}

.menu-text {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

.menu-arrow {
  width: 16rpx;
  height: 16rpx;
  border-top: 2rpx solid #999999;
  border-right: 2rpx solid #999999;
  transform: rotate(45deg);
}

.service-phone {
  font-size: 24rpx;
  color: #666666;
}

/* 版本信息 */
.version-info {
  padding: 40rpx 0;
  text-align: center;
  font-size: 22rpx;
  color: #999999;
  background-color: #ffffff;
}
</style>
