<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <view class="header-title">管理您的账户信息和服务</view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image
          class="avatar"
          src="/static/imgs/avatar.png"
          mode="aspectFill"
        ></image>
        <view class="user-details">
          <view class="username">
            张三
            <u-icon
              name="checkmark-circle-fill"
              color="#ffa500"
              size="16"
            ></u-icon>
          </view>
          <view class="user-id">用户ID: U12345678</view>
          <view class="membership">
            会员等级: 年会员 (有效期至: 2026-05-15)
          </view>
        </view>
      </view>
      <view class="edit-btn" @click="editProfile">
        <text>点击编辑资料</text>
      </view>
    </view>

    <!-- 账户余额 -->
    <view class="balance-card">
      <view class="balance-header">
        <view class="balance-label">账户余额</view>
        <u-button type="default" size="small" shape="round" @click="recharge">
          充值
        </u-button>
      </view>
      <view class="balance-amount">¥50.00</view>
    </view>

    <!-- 会员套餐 -->
    <view class="membership-section">
      <view class="membership-grid">
        <view
          class="membership-item"
          :class="{ active: selectedPlan === 'monthly' }"
          @click="selectPlan('monthly')"
        >
          <view class="tag new">新人特惠</view>
          <view class="plan-name">包月会员</view>
          <view class="plan-price">¥120</view>
        </view>
        <view
          class="membership-item"
          :class="{ active: selectedPlan === 'season' }"
          @click="selectPlan('season')"
        >
          <view class="tag popular">最受欢迎</view>
          <view class="plan-name">包季会员</view>
          <view class="plan-price">¥300</view>
          <view class="plan-discount">立减¥60</view>
        </view>
        <view
          class="membership-item"
          :class="{ active: selectedPlan === 'yearly' }"
          @click="selectPlan('yearly')"
        >
          <view class="tag yearly">年度首享</view>
          <view class="plan-name">包年会员</view>
          <view class="plan-price">¥1000</view>
          <view class="plan-discount">立减¥440</view>
        </view>
      </view>
    </view>

    <!-- 支付方式 -->
    <view class="payment-section">
      <view
        class="payment-item"
        :class="{ active: selectedPayment === 'alipay' }"
        @click="selectPayment('alipay')"
      >
        <view class="payment-info">
          <u-icon name="alipay-circle-fill" color="#1677ff" size="24"></u-icon>
          <text class="payment-name">支付宝</text>
        </view>
        <u-icon
          :name="
            selectedPayment === 'alipay'
              ? 'checkmark-circle-fill'
              : 'radio-button-off'
          "
          :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
          size="20"
        ></u-icon>
      </view>
      <view
        class="payment-item"
        :class="{ active: selectedPayment === 'wechat' }"
        @click="selectPayment('wechat')"
      >
        <view class="payment-info">
          <u-icon name="weixin-fill" color="#07c160" size="24"></u-icon>
          <text class="payment-name">支付宝</text>
        </view>
        <u-icon
          :name="
            selectedPayment === 'wechat'
              ? 'checkmark-circle-fill'
              : 'radio-button-off'
          "
          :color="selectedPayment === 'wechat' ? '#ff3333' : '#ccc'"
          size="20"
        ></u-icon>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-section">
      <u-button
        type="primary"
        size="large"
        @click="confirmPayment"
        :loading="paying"
      >
        确认支付
      </u-button>
      <view class="agreement">
        购买前请仔细阅读
        <text class="link" @click="showAgreement">《会员服务协议》</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
import { useAuthStore, useUserStore } from "@/store";
import RPC from "@/utils/request";

const modal = ref(null);
const authStore = useAuthStore();
const userStore = useUserStore();

// 响应式数据
const selectedPlan = ref("season"); // 默认选中包季会员
const selectedPayment = ref("alipay"); // 默认选中支付宝
const paying = ref(false);

// 选择会员套餐
const selectPlan = (plan) => {
  selectedPlan.value = plan;
};

// 选择支付方式
const selectPayment = (payment) => {
  selectedPayment.value = payment;
};

// 编辑资料
const editProfile = () => {
  uni.navigateTo({
    url: "/pagesA/edit-profile/edit-profile",
  });
};

// 充值
const recharge = () => {
  uni.navigateTo({
    url: "/pages/recharge/recharge",
  });
};

// 确认支付
const confirmPayment = async () => {
  if (!selectedPlan.value) {
    uni.showToast({
      title: "请选择会员套餐",
      icon: "none",
    });
    return;
  }

  if (!selectedPayment.value) {
    uni.showToast({
      title: "请选择支付方式",
      icon: "none",
    });
    return;
  }

  paying.value = true;
  try {
    const params = {
      plan: selectedPlan.value,
      paymentMethod: selectedPayment.value,
    };

    // 这里调用支付API
    // const result = await RPC.post('/api/payment', params)

    uni.showToast({
      title: "正在跳转支付...",
      icon: "loading",
      duration: 2000,
    });

    // 模拟支付过程
    setTimeout(() => {
      uni.showToast({
        title: "支付成功",
        icon: "success",
      });
      paying.value = false;
    }, 2000);
  } catch (error) {
    console.error("支付失败:", error);
    uni.showToast({
      title: "支付失败，请重试",
      icon: "none",
    });
    paying.value = false;
  }
};

// 显示协议
const showAgreement = () => {
  uni.navigateTo({
    url: "/pages/agreement/agreement",
  });
};
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  min-height: 100vh;
  background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%);
  padding-bottom: 120px;
}

.header {
  padding: 20px 16px 16px;

  .header-title {
    color: white;
    font-size: 18px;
    font-weight: 500;
  }
}

.user-card {
  margin: 0 16px 16px;
  background: white;
  border-radius: 12px;
  padding: 16px;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

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

    .user-details {
      flex: 1;

      .username {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 4px;
      }

      .user-id {
        font-size: 12px;
        color: #999;
        margin-bottom: 2px;
      }

      .membership {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .edit-btn {
    text-align: right;
    color: #4285f4;
    font-size: 14px;
  }
}

.balance-card {
  margin: 0 16px 16px;
  background: linear-gradient(135deg, #4285f4 0%, #6fa8f5 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;

  .balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .balance-label {
      font-size: 14px;
      opacity: 0.9;
    }
  }

  .balance-amount {
    font-size: 32px;
    font-weight: bold;
  }
}

.membership-section {
  margin: 0 16px 24px;

  .membership-grid {
    display: flex;
    gap: 8px;

    .membership-item {
      flex: 1;
      background: white;
      border-radius: 12px;
      padding: 16px 12px;
      text-align: center;
      position: relative;
      border: 2px solid transparent;
      transition: all 0.3s;

      &.active {
        border-color: #4285f4;
        background-color: #f0f7ff;
      }

      .tag {
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px 8px;
        border-radius: 8px;
        font-size: 10px;
        color: white;

        &.new {
          background: #ff6b6b;
        }

        &.popular {
          background: #ff3333;
        }

        &.yearly {
          background: #ff3333;
        }
      }

      .plan-name {
        font-size: 14px;
        color: #333;
        margin: 12px 0 8px;
      }

      .plan-price {
        font-size: 20px;
        font-weight: bold;
        color: #ff3333;
        margin-bottom: 4px;
      }

      .plan-discount {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.payment-section {
  margin: 0 16px 24px;

  .payment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
    border: 1px solid #e5e5e5;
    transition: all 0.3s;

    &.active {
      border-color: #4285f4;
      background-color: #f0f7ff;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .payment-info {
      display: flex;
      align-items: center;
      gap: 12px;

      .payment-name {
        font-size: 14px;
        color: #333;
      }
    }
  }
}

.bottom-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 16px;
  border-top: 1px solid #e5e5e5;

  .agreement {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 12px;

    .link {
      color: #4285f4;
    }
  }
}
</style>