<script>
import XCharge from './XCharge.vue'

export default {
  name: 'XChargeSimpleDemo',
  components: { XCharge },
  data () {
    return {
      queryParamsName: 'chargeConfig',
      methods: [],
      total: 0,
      lastAmountChange: null,
      lastAction: null,
      currentMode: 'manual' // 当前模式：manual, auto, single
    }
  },
  methods: {
    onMethod (value) { console.log('【事件】单选支付方式(method)：', value) },
    onMethods (values) {
      console.log('【事件】多选支付方式(methods)：', values)
      this.methods = values
      // 在自动模式下，由外部决定金额分配
      if (this.currentMode === 'auto') {
        this.autoDistributeAmounts(values)
      }
    },
    onTotal (total) { console.log('【事件】合计金额变更(totalPaymentAmount)：', total); this.total = total },
    onAmountChange (payload) { console.log('【事件】单个方式金额变更(paymentAmountChange)：', payload, '→ 方式：', payload.method, ' 金额：', payload.amount); this.lastAmountChange = payload },
    onAction (payload) { console.log('【事件】操作(action)：', payload); this.lastAction = payload },
    switchMode (mode) {
      this.currentMode = mode
      // 根据模式切换配置
      switch (mode) {
        case 'manual':
          this.queryParamsName = 'testChargeConfig'
          break
        case 'auto':
          this.queryParamsName = 'testAutoMixedChargeConfig'
          break
        case 'single':
          this.queryParamsName = 'testSingleChargeConfig'
          break
      }
    },
    getModeText (mode) {
      const modeMap = {
        manual: '混合支付-手动模式',
        auto: '混合支付-自动模式',
        single: '单选模式'
      }
      return modeMap[mode] || mode
    },
    // 外部金额分配逻辑（示例：平均分配）
    autoDistributeAmounts (selectedMethods) {
      if (!selectedMethods || selectedMethods.length === 0) return

      // 示例：假设总金额为100，平均分配
      const totalAmount = 100
      const amountPerMethod = totalAmount / selectedMethods.length

      const amounts = {}
      selectedMethods.forEach(method => {
        amounts[method] = amountPerMethod
      })

      // 调用组件的setPaymentAmounts方法
      this.$refs.xCharge.setPaymentAmounts(amounts)
    }
  }
}
</script>

<template>
  <div class="demo">
    <!-- 模式切换按钮 -->
    <div class="mode-switcher">
      <h3>XCharge 组件测试 - 混合支付模式切换</h3>
      <div class="mode-buttons">
        <a-button
          :type="currentMode === 'manual' ? 'primary' : 'default'"
          @click="switchMode('manual')"
        >
          混合支付-手动模式
        </a-button>
        <a-button
          :type="currentMode === 'auto' ? 'primary' : 'default'"
          @click="switchMode('auto')"
        >
          混合支付-自动模式
        </a-button>
        <a-button
          :type="currentMode === 'single' ? 'primary' : 'default'"
          @click="switchMode('single')"
        >
          单选模式
        </a-button>
      </div>
      <p class="current-mode">当前模式：{{ getModeText(currentMode) }}</p>
    </div>

    <x-charge
      ref="xCharge"
      :queryParamsName="queryParamsName"
      @method="onMethod"
      @methods="onMethods"
      @totalPaymentAmount="onTotal"
      @paymentAmountChange="onAmountChange"
      @action="onAction"
    />

    <div class="info">
      <p>已选方式：{{ methods.join('、') || '无' }}</p>
      <p>合计金额：{{ total }}</p>
      <p v-if="lastAmountChange">最近金额变更：{{ lastAmountChange.method }} -> {{ lastAmountChange.amount }}</p>
    </div>
  </div>
</template>

<style scoped>
.demo { padding: 16px; }
.mode-switcher {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}
.mode-switcher h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 18px;
}
.mode-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.current-mode {
  margin: 0;
  color: #666;
  font-weight: 500;
}
.info { margin-top: 16px; color: #333; }
.info p { margin: 6px 0; }
</style>
