<template>
  <div class="bet-slip-page">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span class="page-title">{{ t('投注单') }}</span>
          <el-badge :value="selectedCount" :max="99" class="badge">
            <template #content>
              <span class="badge-text">{{ selectedCount }}</span>
            </template>
          </el-badge>
        </div>
      </template>

      <div v-if="selectedOrders.length === 0" class="empty-state">
        <el-empty :description="t('暂无投注项')" />
      </div>

      <div v-else class="bet-content">
        <div class="bet-list">
          <div class="bet-item" v-for="(item, index) in selectedOrders" :key="item.wsi">
            <div class="bet-header">
              <span class="bet-type">{{ getBetTypeText(item.bet_type) }}</span>
              <el-button type="danger" text @click="removeOrderItem(item)">
                <el-icon><Close /></el-icon>
              </el-button>
            </div>
            <div class="bet-details">
              <div class="bet-info">
                <span class="label">{{ t('赛事') }}:</span>
                <span class="value">{{ item.match_name || item.league }}</span>
              </div>
              <div class="bet-info">
                <span class="label">{{ t('投注内容') }}:</span>
                <span class="value">{{ item.bet_content }}</span>
              </div>
              <div class="bet-info">
                <span class="label">{{ t('赔率') }}:</span>
                <span class="value odds">{{ item.odds }}</span>
              </div>
              <div class="bet-info">
                <span class="label">{{ t('投注金额') }}:</span>
                <div class="amount-input">
                  <el-input-number
                    v-model="item.stake"
                    :min="1"
                    :max="10000"
                    :precision="2"
                    size="small"
                    @change="updateStake(item.wsi, $event)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="bet-summary">
          <div class="summary-item">
            <span class="label">{{ t('投注数量') }}:</span>
            <span class="value">{{ selectedCount }}</span>
          </div>
          <div class="summary-item">
            <span class="label">{{ t('总投注金额') }}:</span>
            <span class="value amount">¥{{ totalStake.toFixed(2) }}</span>
          </div>
          <div class="summary-item">
            <span class="label">{{ t('预计可赢') }}:</span>
            <span class="value win-amount">¥{{ totalPotentialWin.toFixed(2) }}</span>
          </div>
        </div>

        <div class="bet-actions">
          <el-button type="danger" @click="clearAllOrders">
            {{ t('清空投注单') }}
          </el-button>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit" :disabled="selectedOrders.length === 0">
            {{ t('确认投注') }}
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import { useOrderStore } from '@/store/bettingSheet'

const { t } = useI18n()
const orderStore = useOrderStore()

const selectedOrders = computed(() => orderStore.selectOrders)
const selectedCount = computed(() => orderStore.selectedCount)
const totalStake = computed(() => orderStore.totalStake)
const totalPotentialWin = computed(() => orderStore.totalPotentialWin)
const submitLoading = ref(false)

const getBetTypeText = (type) => {
  const typeMap = {
    single: t('单注'),
    parlay: t('串关'),
    system: t('组合')
  }
  return typeMap[type] || t('其他')
}

const removeOrderItem = (item) => {
  orderStore.removeOrderItem(item)
}

const updateStake = (wsi, amount) => {
  orderStore.updateStake(wsi, amount)
}

const clearAllOrders = () => {
  orderStore.clearAllOrders()
}

const handleSubmit = async () => {
  if (selectedOrders.value.length === 0) {
    ElMessage.warning(t('请先添加投注项'))
    return
  }

  submitLoading.value = true
  try {
    ElMessage.success(t('投注成功'))
    orderStore.clearAllOrders()
  } catch (error) {
    ElMessage.error(t('投注失败'))
  } finally {
    submitLoading.value = false
  }
}
</script>

<style scoped>
.bet-slip-page {
  max-width: 1200px;
  margin: 0 auto;
}

.page-card {
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.badge {
  margin-left: 10px;
}

.badge-text {
  font-weight: bold;
  color: #f8b932;
}

.empty-state {
  padding: 60px 0;
  text-align: center;
}

.bet-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.bet-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e8e8e;
}

.bet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bet-type {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.bet-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bet-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.bet-info .label {
  color: #666;
}

.bet-info .value {
  color: #333;
  font-weight: 500;
}

.bet-info .odds {
  color: #f8b932;
  font-weight: bold;
}

.amount-input {
  width: 150px;
}

.bet-summary {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.summary-item .label {
  color: #666;
}

.summary-item .value {
  color: #333;
  font-weight: 600;
}

.summary-item .amount {
  color: #f8b932;
}

.summary-item .win-amount {
  color: #19be6b;
}

.bet-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.bet-actions .el-button {
  min-width: 150px;
}
</style>
