<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { ICOBalanceRecharge,ICOMyCoupon,ICOMyRights,ICOMyOrder } from '@/components/icons'
import { generateQRCode, getCurrentPagePath } from '@/utils/qrcode'

definePage({
  style: {
    navigationBarTitleText: '我的',
    // navigationStyle: 'custom',
  },
})
const userStore = useUserStore();
/** 登录用户信息 */
const loginUser:any = computed(() => userStore.info ?? {});

console.log(loginUser.value,'用户信息')

const itemClick = (url:string) => {
  uni.navigateTo({
    url: url,
  })
}

const showQrcode = ref(false)
const qrcodeData = ref('')

// 生成二维码
const generateUserQRCode = async () => {
  console.log('开始生成二维码');
  try {
    // 生成包含用户ID和页面路径的二维码
    const qrContent = `${loginUser.value?.idnum || 'guest'}`;
    console.log('二维码内容:', qrContent);

    // 调用二维码生成工具
    const qrDataUrl = await generateQRCode(qrContent, {
      size: 200,
      margin: 1,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    });

    console.log('二维码生成成功:', qrDataUrl.substring(0, 100) + '...');
    qrcodeData.value = qrDataUrl;
    showQrcode.value = true;
  } catch (error) {
    console.error('生成二维码失败:', error);
    uni.showToast({
      title: '生成二维码失败',
      icon: 'none'
    });
  }
}

</script>

<template>
  <view class="profile-container">
    <!-- 二维码 -->
    <wd-popup v-model="showQrcode" custom-style="border-radius:16rpx; padding: 0;" position="center" >
       <view class="qrcode-wrapper">
         <view class="qrcode-header">
           <view class="qrcode-title">{{ loginUser.name || '用户' }}的二维码</view>
<!--           <view class="qrcode-close" @click="showQrcode = false">-->
<!--             <wd-icon name="close" size="20px"></wd-icon>-->
<!--           </view>-->
         </view>
         <view class="qrcode-content">
           <view class="qrcode-image-container" v-if="qrcodeData">
             <image :src="qrcodeData" mode="aspectFit" class="qrcode-image"></image>
           </view>
           <view class="qrcode-info">
<!--             <view class="qrcode-desc">扫描二维码分享给好友</view>-->
             <view class="qrcode-user">
               <wd-img :width="40" :height="40" round :src="loginUser.avatar" />
               <view class="user-name">{{ loginUser.name || '用户' }}</view>
             </view>
           </view>
         </view>
       </view>
    </wd-popup>
    <view class="user-info-section">
        <view class="avatar-wrapper">
          <wd-img :width="60" :height="60" round :src="loginUser.avatar" :enable-preview="true" />
          <view class="user-details">
            <view class="username">
              <view style="margin-right: 8px">{{ loginUser.name }}</view>
              <wd-icon @click="itemClick('/pages/me/personal-profile/index')" name="edit-outline" size="16px"></wd-icon>
            </view>
            <view class="user-card">
              <wd-tag custom-class="space" mark use-icon-slot>
                <text>普卡会员</text>
                <template #icon>
                  <wd-icon name="creditcard" />
                </template>
              </wd-tag>
<!--              <wd-tag  >卡号: {{ 10022342348 }}</wd-tag>-->
            </view>
          </view>
          <view class="user-right"  @click="generateUserQRCode">
            <wd-icon name="qrcode" size="30px"></wd-icon>
          </view>
        </view>
      <view class="user-bottom">
        <wd-grid  bg-color="#F5F7FA"  :column="4">
          <wd-grid-item custom-class="custom-item" icon="picture" text="余额(元)" >
            <template #icon>
              <view class="balance">{{ 0 }}</view>
            </template>
          </wd-grid-item>
          <wd-grid-item custom-class="custom-item" icon="picture" text="积分" >
            <template #icon>
              <view class="balance">{{ 0 }}</view>
            </template>
          </wd-grid-item>
          <wd-grid-item custom-class="custom-item" icon="picture" text="卡项" >
            <template #icon>
              <view class="balance">{{ 0 }}</view>
            </template>
          </wd-grid-item>
          <wd-grid-item custom-class="custom-item" icon="picture" text="优惠卷" >
            <template #icon>
              <view class="balance">{{ 0 }}</view>
            </template>
          </wd-grid-item>
        </wd-grid>
      </view>
    </view>
    <view class="user-container">
      <view class="body-card-style-radius-padding" style="padding: 4px">
        <wd-grid :column="4">
          <wd-grid-item icon="picture" text="余额充值" >
            <template #icon>
             <ICOBalanceRecharge style="width: 35px; height: 35px" />
            </template>
          </wd-grid-item>
          <wd-grid-item icon="picture" text="我的优惠卷" >
            <template #icon>
              <ICOMyCoupon style="width: 35px; height: 35px" />
            </template>
          </wd-grid-item>
          <wd-grid-item icon="picture" text="我的权益" >
            <template #icon>
              <ICOMyRights style="width: 35px; height: 35px" />
            </template>
          </wd-grid-item>
          <wd-grid-item icon="picture" text="我的订单" >
            <template #icon>
              <ICOMyOrder style="width: 35px; height: 35px" />
            </template>
          </wd-grid-item>
        </wd-grid>
      </view>
      <view class="body-card-style-radius-padding">
        <view class="body-card-style-head">
          我的订单
          <view class="right text-right">
            <wd-icon name="arrow-right" size="16px"></wd-icon>
            全部
          </view>
        </view>
        <wd-grid :column="5">
          <wd-grid-item icon="wallet" text="待付款" />
          <wd-grid-item icon="bags" text="待发货" />
          <wd-grid-item  text="待收货" >
          <template #icon>
            <view style="width: 26px; height: 26px; color: #000000" class="i-carbon:arrival"></view>
          </template>
          </wd-grid-item>
          <wd-grid-item icon="dong" text="待评价" />
          <wd-grid-item icon="money-circle" text="退款/售后" />
        </wd-grid>
      </view>
      <view class="body-card-style-radius-padding" style="margin-bottom: 0">
        <view class="body-card-style-head">
          我的功能
        </view>
        <wd-grid :column="4">
          <wd-grid-item icon="gift"  @click="itemClick('/pages/me/promote-with-courtesy/index')"  text="推广有礼" />
          <wd-grid-item icon="picture" text="我的预约" />
          <wd-grid-item icon="picture" text="购物车" />
          <wd-grid-item icon="picture" text="我的地点" />
          <wd-grid-item icon="picture" text="我的拼团" />
          <wd-grid-item icon="picture" text="我的表单" />
          <wd-grid-item icon="picture" text="我的消息" />
          <wd-grid-item icon="picture" text="服务日志" />
          <wd-grid-item icon="picture" text="待评价" />
          <wd-grid-item icon="picture" text="积分商城" />
          <wd-grid-item icon="picture" text="我的会员卡" />
          <wd-grid-item icon="picture" text="公众号通知" />
        </wd-grid>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.qrcode-wrappe{

}

/* 二维码弹框样式 */
.qrcode-wrapper {
  width: 560rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;

  .qrcode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 32rpx 16rpx;
    border-bottom: 1px solid #f5f5f5;

    .qrcode-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .qrcode-close {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #f5f5f5;
      color: #999;
      transition: all 0.3s;

      &:active {
        background-color: #e8e8e8;
        transform: scale(0.95);
      }
    }
  }

  .qrcode-content {
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .qrcode-image-container {
      width: 400rpx;
      height: 400rpx;
      padding: 20rpx;
      background: #fff;
      border-radius: 16rpx;
      box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
      margin-bottom: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .qrcode-image {
        width: 360rpx;
        height: 360rpx;
      }
    }

    .qrcode-info {
      width: 100%;

      .qrcode-desc {
        text-align: center;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 24rpx;
      }

      .qrcode-user {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx;
        background-color: #f9f9f9;
        border-radius: 50rpx;

        .user-name {
          margin-left: 16rpx;
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}

/* 基础样式 */
.profile-container {
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  .user-info-section{
    background: #ffffff;

    .avatar-wrapper{
      padding: 15px;
      display: flex;
      align-items: center;

      .user-details{
        margin-left: 16px;
        flex: 1;

        .username{
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          font-size: 18px;
          font-weight: 500;
        }

        .user-card-number{
          font-size: 14px;
          color: #999999;
        }
      }

      .user-right{
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }

    .user-bottom{
       padding: 0 9px 15px 9px;
    }
  }

  .user-container{
    padding: 12px;

    .text-right{
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      font-size: 14px;
      font-weight: 400;
      color: #cccccc;
    }

    .body-card-style-radius-padding {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;

      .body-card-style-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 16px;
        color: #333333;
      }
    }
  }
}

/* 移除:deep()选择器，直接使用类名 */
:deep(.custom-item) {
  border-radius: 12px;
  margin: 0 6px;
  width: calc(100% / 4 - 12px) !important;
  height: 70px !important;

  .balance{
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
