<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="subscription-popup"
    :class="{ 'dark-mode': isDarkMode }"
  >
    <div class="content">
      <!-- 默认订阅界面 -->
      <div v-if="!showBatchDialog" class="popup-btns">
        <el-button 
          type="primary" 
          class="popup-btn" 
          @click="handleSubscribe"
        >
          订阅本章
        </el-button>
        <el-button 
          class="popup-btn popup-btn-video" 
          @click="handleVideoUnlock"
        >
          观看视频解锁
        </el-button>
        <el-button 
          class="popup-btn popup-btn-batch" 
          @click="showBatchSubscribe"
        >
          批量订阅
        </el-button>
      </div>
      
      <!-- 批量订阅界面 -->
      <div v-else class="batch-subscribe-content">
        <div class="batch-title">选择订阅章节数量</div>
        <div class="batch-info">
          <span>从当前章节开始，可订阅 {{ availableChaptersCount }} 章</span>
        </div>
        <div v-if="availableChaptersCount === 0" class="no-chapters-tip">
          <span>暂无需要付费的章节</span>
        </div>
        <div v-else>
          <div class="batch-current-info">
            <span>连续订阅 {{ batchCount }} 章</span>
          </div>
          <div class="batch-counter">
            <el-button 
              :disabled="batchCount <= 1" 
              @click="decreaseBatchCount"
              class="counter-btn"
            >
              -
            </el-button>
            <el-input
              v-model="batchCount"
              type="number"
              class="counter-input"
              :max="maxBatchCount"
              @input="validateBatchCount"
            />
            <el-button 
              :disabled="batchCount >= maxBatchCount" 
              @click="increaseBatchCount"
              class="counter-btn"
            >
              +
            </el-button>
          </div>
        </div>
        <div class="batch-btns">
          <el-button 
            class="batch-cancel-btn" 
            @click="cancelBatchSubscribe"
          >
            取消
          </el-button>
          <el-button 
            type="primary"
            class="batch-confirm-btn" 
            :disabled="availableChaptersCount === 0"
            @click="handleBatchSubscribe"
          >
            确认订阅
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'SubscriptionPopup',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '这是付费章节 需要订阅后才能阅读'
    },
    chapterList: {
      type: Array,
      default: () => []
    },
    currentChapter: {
      type: Object,
      default: () => ({})
    },
    currentIndex: {
      type: Number,
      default: 0
    },
    bookId: {
      type: [String, Number],
      default: ''
    },
    isDarkMode: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'subscribe', 'batchSubscribe', 'videoUnlock'],
  setup(props, { emit }) {
    const visible = ref(false)
    const showBatchDialog = ref(false)
    const batchCount = ref(5)

    // 监听modelValue变化
    watch(() => props.modelValue, (newVal) => {
      visible.value = newVal
    })

    // 监听visible变化
    watch(visible, (newVal) => {
      emit('update:modelValue', newVal)
    })

    // 计算从当前章节开始可以订阅的章节数量
    const availableChaptersCount = computed(() => {
      if (!props.chapterList.length || props.currentIndex < 0) return 0
      
      let count = 0
      for (let i = props.currentIndex; i < props.chapterList.length; i++) {
        const chapter = props.chapterList[i]
        // 使用pay字段判断是否已购买，isPay为'Y'且pay为false表示需要购买
        if (chapter.isPay === 'Y' && !chapter.pay) {
          count++
        }
      }
      return count
    })

    // 限制批量订阅数量不能超过可订阅章节数
    const maxBatchCount = computed(() => {
      return Math.max(1, availableChaptersCount.value)
    })

    // 处理订阅按钮点击
    const handleSubscribe = () => {
      emit('subscribe')
      visible.value = false
    }

    // 处理视频解锁按钮点击
    const handleVideoUnlock = () => {
      emit('videoUnlock')
      visible.value = false
    }

    // 显示批量订阅选择界面
    const showBatchSubscribe = () => {
      // 根据可订阅章节数设置合理的默认值
      batchCount.value = Math.min(5, maxBatchCount.value)
      showBatchDialog.value = true
    }

    // 取消批量订阅
    const cancelBatchSubscribe = () => {
      showBatchDialog.value = false
    }

    // 处理批量订阅
    const handleBatchSubscribe = () => {
      emit('batchSubscribe', batchCount.value)
      showBatchDialog.value = false
    }

    // 减少批量订阅数量
    const decreaseBatchCount = () => {
      if (batchCount.value > 1) {
        batchCount.value--
      }
    }

    // 增加批量订阅数量
    const increaseBatchCount = () => {
      if (batchCount.value < maxBatchCount.value) {
        batchCount.value++
      }
    }

    // 验证批量订阅数量
    const validateBatchCount = () => {
      batchCount.value = Math.max(1, Math.min(maxBatchCount.value, parseInt(batchCount.value) || 1))
    }

    return {
      visible,
      showBatchDialog,
      batchCount,
      availableChaptersCount,
      maxBatchCount,
      handleSubscribe,
      handleVideoUnlock,
      showBatchSubscribe,
      cancelBatchSubscribe,
      handleBatchSubscribe,
      decreaseBatchCount,
      increaseBatchCount,
      validateBatchCount
    }
  }
}
</script>

<style lang="scss" scoped>
.subscription-popup {
  .content {
    .popup-title {
      font-size: 16px;
      font-weight: bold;
      color: #222;
      margin-bottom: 12px;
      word-wrap: break-word;
      white-space: normal;
    }
    
    .popup-desc {
      font-size: 13px;
      color: #999;
      margin-bottom: 20px;
      word-wrap: break-word;
      white-space: normal;
    }
    
    .popup-btns {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      
      .popup-btn {
        background: #ff9800;
        color: #fff;
        border-radius: 16px;
        font-size: 14px;
        padding: 0 16px;
        border: none;
        margin-bottom: 8px;
        word-break: keep-all;
        
        &.popup-btn-video {
          background: #fff3e0;
          color: #ff9800;
          border: 1px solid #ff9800;
        }
        
        &.popup-btn-batch {
          background: #fff;
          color: #ff9800;
          border: 1px solid #ff9800;
        }
      }
    }
    
    .batch-subscribe-content {
      .batch-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
        text-align: center;
      }
      
      .batch-info {
        font-size: 12px;
        color: #666;
        margin-bottom: 16px;
        text-align: center;
      }
      
      .batch-current-info {
        font-size: 12px;
        color: #666;
        text-align: center;
        margin-bottom: 8px;
      }
      
      .batch-counter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 16px;
        
        .counter-btn {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: #f5f5f5;
          border: none;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #333;
          
          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
        
        .counter-input {
          width: 60px;
          height: 32px;
          text-align: center;
          border: 1px solid #ddd;
          border-radius: 4px;
          font-size: 14px;
        }
      }
      
      .batch-btns {
        display: flex;
        gap: 12px;
        justify-content: center;
        
        .batch-cancel-btn {
          background: #f5f5f5;
          color: #666;
          border-radius: 16px;
          font-size: 14px;
          padding: 0 16px;
          border: none;
        }
        
        .batch-confirm-btn {
          background: #ff9800;
          color: #fff;
          border-radius: 16px;
          font-size: 14px;
          padding: 0 16px;
          border: none;
          
          &:disabled {
            background: #ccc;
            color: #666;
            cursor: not-allowed;
          }
        }
      }
      
      .no-chapters-tip {
        font-size: 12px;
        color: #999;
        text-align: center;
      }
    }
  }
  
  &.dark-mode {
    .content {
      .popup-title {
        color: #eee;
      }
      
      .popup-desc {
        color: #bbb;
      }
      
      .popup-btns {
        .popup-btn {
          background: #ff9800;
          color: #fff;
          
          &.popup-btn-video {
            background: rgba(255, 152, 0, 0.1);
            color: #ff9800;
            border: 1px solid #ff9800;
          }
          
          &.popup-btn-batch {
            background: #333;
            color: #ff9800;
            border: 1px solid #ff9800;
          }
        }
      }
      
      .batch-subscribe-content {
        .batch-title {
          color: #eee;
        }
        
        .batch-info {
          color: #bbb;
        }
        
        .batch-current-info {
          color: #eee;
        }
        
        .batch-counter {
          .counter-btn {
            background: #444;
            color: #eee;
          }
          
          .counter-input {
            background: #333;
            border: 1px solid #555;
            color: #eee;
          }
        }
        
        .batch-btns {
          .batch-cancel-btn {
            background: #444;
            color: #bbb;
          }
          
          .batch-confirm-btn {
            background: #ff9800;
            color: #fff;
            
            &:disabled {
              background: #444;
              color: #999;
            }
          }
        }
        
        .no-chapters-tip {
          color: #999;
        }
      }
    }
  }
}
</style> 