<template>
  <view class="plan-select-page">
    <!-- 自定义导航栏 -->
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-btn" @click="goBack">
          <uni-icons type="left" size="22" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">选择套餐</text>
        <view class="nav-btn"></view>
      </view>
    </view>

    <scroll-view scroll-y class="page-content">
      <!-- 套餐列表 -->
      <view class="plan-list">
        <view 
          v-for="(plan, index) in plans" 
          :key="plan.id"
          class="plan-card"
          :class="{ active: selectedPlanId === plan.id, recommended: plan.isRecommended }"
          @click="selectPlan(plan)"
        >
          <view v-if="plan.isRecommended" class="recommend-badge">推荐</view>
          <view class="plan-header">
            <view class="plan-info">
              <text class="plan-name">{{plan.name}}</text>
              <text class="plan-desc">{{plan.description}}</text>
            </view>
            <view class="plan-price">
              <text class="price">¥{{plan.monthlyPrice}}</text>
              <text class="unit">/月</text>
              <text v-if="plan.yearlyPrice" class="yearly-price">¥{{plan.yearlyPrice}}/年</text>
            </view>
          </view>
          
          <view class="plan-features">
            <view class="feature-item">
              <uni-icons type="checkmarkempty" size="16" color="#67C23A"></uni-icons>
              <text>最多 {{plan.maxApartments}} 栋公寓</text>
            </view>
            <view class="feature-item">
              <uni-icons type="checkmarkempty" size="16" color="#67C23A"></uni-icons>
              <text>最多 {{plan.maxRooms}} 个房间</text>
            </view>
            <view class="feature-item">
              <uni-icons type="checkmarkempty" size="16" color="#67C23A"></uni-icons>
              <text>最多 {{plan.maxUsers}} 个用户</text>
            </view>
          </view>

          <view class="select-indicator" v-if="selectedPlanId === plan.id">
            <uni-icons type="checkmarkempty" size="20" color="#FFFFFF"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 购买时长 -->
      <view class="section-card" v-if="selectedPlanId">
        <view class="section-title">购买时长</view>
        <view class="period-list">
          <view 
            v-for="period in periods" 
            :key="period.value"
            class="period-item"
            :class="{ active: selectedMonths === period.value, discount: period.discount }"
            @click="selectPeriod(period.value)"
          >
            <text class="period-label">{{period.label}}</text>
            <text v-if="period.discount" class="discount-tag">省{{period.discount}}%</text>
          </view>
        </view>
      </view>

      <!-- 费用明细 -->
      <view class="section-card price-detail" v-if="selectedPlanId">
        <view class="section-title">费用明细</view>
        <view class="price-list">
          <view class="price-row">
            <text class="row-label">套餐价格</text>
            <text class="row-value">{{selectedPriceText}}</text>
          </view>
          <view class="price-row">
            <text class="row-label">购买时长</text>
            <text class="row-value">{{selectedMonths}} 个月</text>
          </view>
          <view class="price-row">
            <text class="row-label">订阅费用</text>
            <text class="row-value">¥{{baseAmount}}</text>
          </view>
          <view class="price-row" v-if="billingCycle">
            <text class="row-label">计费周期</text>
            <text class="row-value">{{billingCycleText}}</text>
          </view>
          <view class="price-row total">
            <text class="row-label">合计</text>
            <text class="row-value total-price">¥{{totalAmount}}</text>
          </view>
        </view>
      </view>

      <!-- 支付方式说明 -->
      <view class="section-card" v-if="paymentSettings">
        <view class="section-title">支付方式</view>
        <view class="payment-methods">
          <view class="payment-item" v-if="paymentSettings.alipayAccount">
            <view class="payment-icon alipay">
              <text>支</text>
            </view>
            <view class="payment-info">
              <text class="payment-name">支付宝</text>
              <text class="payment-account">{{paymentSettings.alipayAccount}}</text>
            </view>
            <view class="copy-btn" @click="copyText(paymentSettings.alipayAccount)">复制</view>
          </view>
          <view class="payment-item" v-if="paymentSettings.wechatId">
            <view class="payment-icon wechat">
              <text>微</text>
            </view>
            <view class="payment-info">
              <text class="payment-name">微信支付</text>
              <text class="payment-account">{{paymentSettings.wechatId}}</text>
            </view>
            <view class="copy-btn" @click="copyText(paymentSettings.wechatId)">复制</view>
          </view>
          <view class="payment-item" v-if="paymentSettings.bankAccount">
            <view class="payment-icon bank">
              <text>银</text>
            </view>
            <view class="payment-info">
              <text class="payment-name">银行转账</text>
              <text class="payment-account">{{paymentSettings.bankName}} {{paymentSettings.bankAccount}}</text>
            </view>
          </view>
        </view>
        <view class="payment-notice">
          <text class="notice-title">注意事项：</text>
          <text class="notice-item">1. 转账时请备注您的账号信息</text>
          <text class="notice-item">2. 转账完成后，请联系客服确认</text>
          <text class="notice-item" v-if="paymentSettings.servicePhone">3. 客服电话：{{paymentSettings.servicePhone}}</text>
        </view>
      </view>

      <view class="safe-area-bottom" style="height: 120rpx;"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar safe-area-bottom" v-if="selectedPlanId">
      <view class="price-summary">
        <text class="summary-label">合计：</text>
        <text class="summary-price">¥{{totalAmount}}</text>
      </view>
      <button class="submit-btn" :loading="submitting" @click="createOrder">创建订单</button>
    </view>
  </view>
</template>

<script>
  import { billingApi } from '@/api/index.js'

  export default {
    data() {
      return {
        plans: [],
        selectedPlanId: null,
        selectedMonths: 1,
        periods: [
          { label: '1个月', value: 1, discount: 0 },
          { label: '3个月', value: 3, discount: 0 },
          { label: '6个月', value: 6, discount: 0 },
          { label: '12个月', value: 12, discount: 0 }
        ],
        paymentSettings: null,
        submitting: false,
        baseAmount: 0,
        discountAmount: 0,
        totalAmount: 0,
        billingCycle: ''
      }
    },
    computed: {
      selectedPlan() {
        return this.plans.find(p => p.id === this.selectedPlanId)
      },
      selectedPriceText() {
        if (!this.selectedPlan) return '¥0/月'
        if (this.selectedMonths === 12 && Number(this.selectedPlan.yearlyPrice) > 0) {
          return `¥${this.selectedPlan.yearlyPrice}/年`
        }
        return `¥${this.selectedPlan.monthlyPrice}/月`
      },
      billingCycleText() {
        const map = {
          monthly: '月付',
          yearly: '年付',
          custom: '自定义周期'
        }
        return map[this.billingCycle] || this.billingCycle
      }
    },
    watch: {
      selectedPlanId() {
        this.calculatePrice()
      },
      selectedMonths() {
        this.calculatePrice()
      }
    },
    onLoad() {
      this.loadPlans()
      this.loadPaymentSettings()
    },
    methods: {
      async loadPlans() {
        try {
          const res = await billingApi.getPlans()
          if (res.code === 200) {
            // 过滤掉免费版和未启用的套餐
            this.plans = (res.data || []).filter(p => p.status === 'active' && (Number(p.monthlyPrice) > 0 || Number(p.yearlyPrice) > 0))
            // 如果有推荐套餐，默认选中
            const recommended = this.plans.find(p => p.isRecommended)
            if (recommended) {
              this.selectedPlanId = recommended.id
            } else if (this.plans.length > 0) {
              this.selectedPlanId = this.plans[0].id
            }
          }
        } catch (error) {
          console.error('加载套餐失败:', error)
          uni.showToast({ title: '加载套餐失败', icon: 'none' })
        }
      },

      async loadPaymentSettings() {
        try {
          const res = await billingApi.getPaymentSettings()
          if (res.code === 200) {
            this.paymentSettings = res.data
          }
        } catch (error) {
          console.error('加载支付设置失败:', error)
        }
      },

      selectPlan(plan) {
        this.selectedPlanId = plan.id
      },

      selectPeriod(months) {
        this.selectedMonths = months
      },

      async calculatePrice() {
        if (!this.selectedPlan) {
          this.baseAmount = 0
          this.discountAmount = 0
          this.totalAmount = 0
          this.billingCycle = ''
          return
        }
        try {
          const res = await billingApi.calculatePrice({
            planId: this.selectedPlanId,
            months: this.selectedMonths
          })
          if (res.code === 200 && res.data) {
            this.baseAmount = res.data.baseAmount || 0
            this.discountAmount = res.data.discountAmount || 0
            this.totalAmount = res.data.totalAmount || 0
            this.billingCycle = res.data.billingCycle || ''
          }
        } catch (error) {
          console.error('计算价格失败:', error)
          uni.showToast({ title: '计算价格失败', icon: 'none' })
        }
      },

      async createOrder() {
        if (!this.selectedPlanId) {
          uni.showToast({ title: '请选择套餐', icon: 'none' })
          return
        }

        this.submitting = true
        try {
          const res = await billingApi.createOrder({
            planId: this.selectedPlanId,
            months: this.selectedMonths
          })

          if (res.code === 200) {
            uni.showToast({
              title: '订单创建成功',
              icon: 'success'
            })
            
            // 跳转到订单详情页
            setTimeout(() => {
              uni.redirectTo({
                url: `/pages/billing/order-detail?id=${res.data.order.id}`
              })
            }, 1500)
          } else {
            uni.showToast({
              title: res.message || '创建订单失败',
              icon: 'none'
            })
          }
        } catch (error) {
          console.error('创建订单失败:', error)
          uni.showToast({
            title: '创建订单失败',
            icon: 'none'
          })
        } finally {
          this.submitting = false
        }
      },

      copyText(text) {
        uni.setClipboardData({
          data: text,
          success: () => {
            uni.showToast({ title: '已复制', icon: 'success' })
          }
        })
      },

      goBack() {
        uni.navigateBack()
      }
    }
  }
</script>

<style scoped>
  .plan-select-page {
    min-height: 100vh;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
  }

  /* 导航栏 */
  .custom-nav {
    background: #FFFFFF;
    border-bottom: 2rpx solid #F1F5F9;
  }

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
  }

  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #1E293B;
  }

  /* 页面内容 */
  .page-content {
    flex: 1;
    padding: 24rpx 32rpx;
  }

  /* 套餐卡片 */
  .plan-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    margin-bottom: 24rpx;
  }

  .plan-card {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    border: 4rpx solid transparent;
    position: relative;
  }

  .plan-card.active {
    border-color: #667eea;
  }

  .plan-card.recommended {
    background: linear-gradient(135deg, #667eea08 0%, #764ba208 100%);
  }

  .recommend-badge {
    position: absolute;
    top: -4rpx;
    right: 32rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF;
    font-size: 22rpx;
    font-weight: 600;
    padding: 8rpx 24rpx;
    border-radius: 0 0 12rpx 12rpx;
  }

  .plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24rpx;
  }

  .plan-info {
    flex: 1;
  }

  .plan-name {
    display: block;
    font-size: 36rpx;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 8rpx;
  }

  .plan-desc {
    display: block;
    font-size: 24rpx;
    color: #64748B;
  }

  .plan-price {
    text-align: right;
  }

  .plan-price .price {
    font-size: 48rpx;
    font-weight: 700;
    color: #F56C6C;
  }

  .plan-price .unit {
    font-size: 24rpx;
    color: #94A3B8;
  }

  .yearly-price {
    display: block;
    margin-top: 6rpx;
    font-size: 22rpx;
    color: #64748B;
  }

  .plan-features {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }

  .feature-item {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 26rpx;
    color: #64748B;
  }

  .select-indicator {
    position: absolute;
    bottom: 32rpx;
    right: 32rpx;
    width: 48rpx;
    height: 48rpx;
    background: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 区块卡片 */
  .section-card {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 28rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .section-title {
    font-size: 30rpx;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 24rpx;
  }

  /* 时长选择 */
  .period-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
  }

  .period-item {
    padding: 20rpx 32rpx;
    background: #F8FAFC;
    border-radius: 12rpx;
    border: 2rpx solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    min-width: 140rpx;
  }

  .period-item.active {
    background: #667eea;
    border-color: #667eea;
  }

  .period-item.discount {
    border-color: #F56C6C;
  }

  .period-item.active.discount {
    border-color: #667eea;
  }

  .period-label {
    font-size: 28rpx;
    color: #1E293B;
    font-weight: 500;
  }

  .period-item.active .period-label {
    color: #FFFFFF;
  }

  .discount-tag {
    font-size: 20rpx;
    color: #F56C6C;
    background: #FEE2E2;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
  }

  .period-item.active .discount-tag {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.3);
  }

  /* 费用明细 */
  .price-detail .price-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .price-row.total {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 2rpx solid #F1F5F9;
  }

  .row-label {
    font-size: 28rpx;
    color: #64748B;
  }

  .row-value {
    font-size: 28rpx;
    color: #1E293B;
    font-weight: 500;
  }

  .row-value.discount {
    color: #67C23A;
  }

  .row-value.total-price {
    font-size: 40rpx;
    color: #F56C6C;
    font-weight: 700;
  }

  /* 支付方式 */
  .payment-methods {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .payment-item {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 20rpx;
    background: #F8FAFC;
    border-radius: 12rpx;
  }

  .payment-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .payment-icon.alipay {
    background: #1677FF;
  }

  .payment-icon.wechat {
    background: #07C160;
  }

  .payment-icon.bank {
    background: #FF6B6B;
  }

  .payment-icon text {
    font-size: 28rpx;
    color: #FFFFFF;
    font-weight: 700;
  }

  .payment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4rpx;
  }

  .payment-name {
    font-size: 28rpx;
    color: #1E293B;
    font-weight: 500;
  }

  .payment-account {
    font-size: 24rpx;
    color: #64748B;
  }

  .copy-btn {
    padding: 12rpx 24rpx;
    background: #667eea;
    color: #FFFFFF;
    font-size: 24rpx;
    border-radius: 8rpx;
  }

  .payment-notice {
    margin-top: 24rpx;
    padding-top: 24rpx;
    border-top: 2rpx solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 12rpx;
  }

  .notice-title {
    font-size: 26rpx;
    color: #1E293B;
    font-weight: 600;
  }

  .notice-item {
    font-size: 24rpx;
    color: #64748B;
  }

  /* 底部操作栏 */
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 2rpx solid #F1F5F9;
    padding: 24rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
  }

  .price-summary {
    display: flex;
    align-items: baseline;
    gap: 8rpx;
  }

  .summary-label {
    font-size: 28rpx;
    color: #64748B;
  }

  .summary-price {
    font-size: 40rpx;
    color: #F56C6C;
    font-weight: 700;
  }

  .submit-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF;
    font-size: 30rpx;
    font-weight: 600;
    padding: 28rpx 48rpx;
    border-radius: 16rpx;
    border: none;
  }
</style>
