<template>
  <view class="my-container">
    <view class="bg-container">
      <image
        class="bg-img"
        src="/static/my/cover_white_bg.png"
        mode="aspectFit"
        lazy-load="false"
        binderror=""
        bindload=""
      />
    </view>
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="user-header">
        <image
          class="avatar"
          :src="userInfo.avatar || '/static/my/avatar.png'"
          mode="aspectFill"
        />
        <view class="user-detail">
          <text class="nickname">{{ userInfo.nickname || "未登录" }}</text>
          <view class="user-level">
            <image
              class="level-icon"
              src="/static/my/level.png"
              mode="aspectFit"
            />
            <text class="level-text">Lv.{{ userInfo.level || 1 }}</text>
          </view>
        </view>
        <view class="edit-btn" @tap="handleEditProfile">
          <image src="/static/my/edit.png" mode="aspectFit" />
        </view>
      </view>
      <!-- user desc -->
      <view class="user-desc">
        <text class="desc-text"> </text>
      </view>
    </view>
    <!-- 工具 -->
    <view class="tool-container">
      <text class="tool-title" selectable="false" space="false" decode="false">
        工具
      </text>
	  <view class="tool-list">
		<view class="tool-item" v-for="item in toolList" :key="item.title">
        <image class="tool-icon" :src="item.icon" mode="aspectFit" />
      </view>
	  </view>
     
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const toolList = ref([
  {
    icon: "/static/my/code.png",
    title: "扫码积分",
    url: "",
  },
  {
    icon: "/static/my/suyuan.png",
    title: "产品溯源",
    url: "",
  },
  {
    icon: "/static/my/book.png",
    title: "奶娃宝典",
    url: "",
  },
  {
    icon: "/static/my/doctor.png",
    title: "医生问诊",
    url: "",
  },
  {
    icon: "/static/my/literature.png",
    title: "育儿百科",
    url: "",
  },
  
  
]);

// 用户信息
const userInfo = ref({
  avatar: "",
  nickname: "",
  level: 1,
  points: 0,
  coupons: 0,
  collects: 0,
});

// 订单数量统计
const orderCounts = ref({
  pending: 0,
  shipping: 0,
  receiving: 0,
  comment: 0,
  after: 0,
});

// 页面跳转
const navigateTo = (url) => {
  uni.navigateTo({
    url,
    fail: (err) => {
      console.error("页面跳转失败:", err);
      uni.showToast({
        title: "页面跳转失败",
        icon: "none",
      });
    },
  });
};

// 编辑个人资料
const handleEditProfile = () => {
  navigateTo("/pages/user/profile");
};

// 联系客服
const handleContactService = () => {
  // #ifdef MP-WEIXIN
  uni.openCustomerServiceChat({
    extInfo: { url: "YOUR_CUSTOMER_SERVICE_URL" },
    corpId: "YOUR_CORP_ID",
    success(res) {
      console.log("打开客服会话成功");
    },
    fail(err) {
      console.error("打开客服会话失败:", err);
      uni.showToast({
        title: "打开客服会话失败",
        icon: "none",
      });
    },
  });
  // #endif

  // #ifdef H5
  window.open("YOUR_CUSTOMER_SERVICE_URL", "_blank");
  // #endif
};

// 获取用户信息
const getUserInfo = async () => {
  try {
    // TODO: 调用获取用户信息接口
    const res = await uni.request({
      url: "/api/user/info",
      method: "GET",
    });
    if (res.data.code === 0) {
      userInfo.value = res.data.data;
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
    uni.showToast({
      title: "获取用户信息失败",
      icon: "none",
    });
  }
};

// 获取订单数量
const getOrderCounts = async () => {
  try {
    // TODO: 调用获取订单数量接口
    const res = await uni.request({
      url: "/api/order/counts",
      method: "GET",
    });
    if (res.data.code === 0) {
      orderCounts.value = res.data.data;
    }
  } catch (error) {
    console.error("获取订单数量失败:", error);
  }
};

// 页面加载
onMounted(() => {
  // getUserInfo()
  // getOrderCounts()
});

// 定义页面配置
defineExpose({});
</script>

<style lang="less" scoped>
@import '@/common.less';
.my-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
  overflow: hidden;

  .bg-container {
    width: 750rpx;
    height: 840rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

    .bg-img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .user-info {
    background-color: @color-white-soft;
    padding: 30rpx;

    width: 686rpx;
    height: 343rpx;
    box-sizing: border-box;
    border-radius: 32rpx;
    position: relative;
    margin: 0 auto;
    margin-top: 676rpx;

    .user-header {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 20rpx;
      }

      .user-detail {
        flex: 1;

        .nickname {
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 10rpx;
        }

        .user-level {
          display: flex;
          align-items: center;

          .level-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }

          .level-text {
            font-size: 24rpx;
            color: #666;
          }
        }
      }

      .edit-btn {
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .user-stats {
      display: flex;
      justify-content: space-around;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .num {
          font-size: 36rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 8rpx;
        }

        .label {
          font-size: 24rpx;
          color: #666;
        }
      }
    }

    .user-desc {
      width: 100%;
      height: 182rpx;
      background-color: #fff;
      border-radius: 32rpx;
      padding: 30rpx 32rpx;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .tool-container {
    margin: 0 auto;
    margin-top: 48rpx;
	width: 686rpx;
	.tool-list {
		display: flex;
		flex-wrap: wrap;
		
		margin: 32rpx 0;
	}

	.tool-title {
		font-size: 32rpx;
		font-weight: 500;
		color: @color-black-deep;
		margin-left: 21rpx;
	}

	.tool-item {
		width: 152rpx;
		height: 152rpx;
		margin-left: 26rpx;
		margin-bottom: 24rpx;
		.tool-icon {
			width: 100%;
			height: 100%;
			display: block;
		};
		&:nth-child(4n+1) {
			margin-left: 0;
		}
	}
  }

  .order-section {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }

      .more {
        display: flex;
        align-items: center;

        text {
          font-size: 24rpx;
          color: #666;
          margin-right: 8rpx;
        }

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

    .order-types {
      display: flex;
      justify-content: space-between;

      .type-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 48rpx;
          height: 48rpx;
          margin-bottom: 12rpx;
        }

        text {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }

  .function-list {
    background-color: #fff;
    padding: 0 30rpx;

    .function-item {
      display: flex;
      align-items: center;
      height: 100rpx;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;

        &.arrow {
          width: 32rpx;
          height: 32rpx;
          margin-right: 0;
          margin-left: auto;
        }
      }

      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 16rpx;
  min-width: 32rpx;
  text-align: center;
}

.type-item {
  position: relative;
}
</style>
