<template>
  <el-dialog
    v-model="dialogVisible"
    width="420px"
    :show-close="true"
    :close-on-click-modal="false"
    :lock-scroll="true"
  >
    <!-- 标题 -->
    <template #header>
      <div class="text-center text-18px font-medium text-gray-800">
        给作者投上
        <span class="text-sky-500 font-bold">{{ selectedAmount }}</span>
        枚YA币
      </div>
    </template>

    <!-- 内容 -->
    <div class="py-4">
      <!-- 金额选择 -->
      <div class="flex justify-center gap-6 mb-6">
        <div
          v-for="option in rewardOptions"
          :key="option.amount"
          class="reward-option"
          :class="{ 'reward-option-active': option.selected }"
          @click="selectAmount(option.amount)"
        >
          <div class="reward-character">
            <img
              v-if="option.amount === 1"
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='coin1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23fef3c7'/%3E%3Cstop offset='30%25' style='stop-color:%23fde68a'/%3E%3Cstop offset='70%25' style='stop-color:%23fcd34d'/%3E%3Cstop offset='100%25' style='stop-color:%23f59e0b'/%3E%3C/linearGradient%3E%3CradialGradient id='highlight1' cx='35%25' cy='35%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:0.9'/%3E%3Cstop offset='50%25' style='stop-color:%23ffffff;stop-opacity:0.3'/%3E%3Cstop offset='100%25' style='stop-color:%23ffffff;stop-opacity:0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='44' fill='none' stroke='%23f59e0b' stroke-width='3' opacity='0.4'/%3E%3Ccircle cx='50' cy='50' r='40' fill='url(%23coin1)' stroke='%23d97706' stroke-width='6'/%3E%3Ccircle cx='50' cy='50' r='33' fill='none' stroke='%23fbbf24' stroke-width='2' opacity='0.6'/%3E%3Ccircle cx='50' cy='50' r='27' fill='none' stroke='%23f59e0b' stroke-width='1.5' opacity='0.5'/%3E%3Cpath d='M50 30 L54 42 L67 42 L56 50 L60 62 L50 54 L40 62 L44 50 L33 42 L46 42 Z' fill='%23d97706' opacity='0.8'/%3E%3Ccircle cx='50' cy='50' r='40' fill='url(%23highlight1)' opacity='0.5'/%3E%3C/svg%3E"
              alt="1YA币"
              class="w-full h-full"
            />

            <!-- 2YA币 - 双枚金币（星形居中版） -->
            <img
              v-else
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='coin2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23fef3c7'/%3E%3Cstop offset='30%25' style='stop-color:%23fde68a'/%3E%3Cstop offset='70%25' style='stop-color:%23fcd34d'/%3E%3Cstop offset='100%25' style='stop-color:%23f59e0b'/%3E%3C/linearGradient%3E%3CradialGradient id='highlight2' cx='35%25' cy='35%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:0.9'/%3E%3Cstop offset='50%25' style='stop-color:%23ffffff;stop-opacity:0.3'/%3E%3Cstop offset='100%25' style='stop-color:%23ffffff;stop-opacity:0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg opacity='0.85'%3E%3Ccircle cx='35' cy='50' r='32' fill='none' stroke='%23f59e0b' stroke-width='2' opacity='0.4'/%3E%3Ccircle cx='35' cy='50' r='29' fill='url(%23coin2)' stroke='%23d97706' stroke-width='4'/%3E%3Ccircle cx='35' cy='50' r='24' fill='none' stroke='%23fbbf24' stroke-width='1.5' opacity='0.6'/%3E%3Ccircle cx='35' cy='50' r='20' fill='none' stroke='%23f59e0b' stroke-width='1' opacity='0.5'/%3E%3Cpath d='M35 33 L37.5 42 L47 42 L39 48 L41.5 57 L35 51 L28.5 57 L31 48 L23 42 L32.5 42 Z' fill='%23d97706' opacity='0.8'/%3E%3Ccircle cx='35' cy='50' r='29' fill='url(%23highlight2)' opacity='0.5'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='65' cy='50' r='32' fill='none' stroke='%23f59e0b' stroke-width='2' opacity='0.4'/%3E%3Ccircle cx='65' cy='50' r='29' fill='url(%23coin2)' stroke='%23d97706' stroke-width='4'/%3E%3Ccircle cx='65' cy='50' r='24' fill='none' stroke='%23fbbf24' stroke-width='1.5' opacity='0.6'/%3E%3Ccircle cx='65' cy='50' r='20' fill='none' stroke='%23f59e0b' stroke-width='1' opacity='0.5'/%3E%3Cpath d='M65 33 L67.5 42 L77 42 L69 48 L71.5 57 L65 51 L58.5 57 L61 48 L53 42 L62.5 42 Z' fill='%23d97706' opacity='0.8'/%3E%3Ccircle cx='65' cy='50' r='29' fill='url(%23highlight2)' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"
              alt="2YA币"
              class="w-full h-full"
            />
          </div>
          <div class="reward-amount">{{ option.amount }}YA币</div>
        </div>
      </div>

      <!-- 确认按钮 -->
      <div class="flex justify-center">
        <el-button type="primary" size="large" round class="w-120px" @click="handleConfirm">
          确定
        </el-button>
      </div>

      <!-- 余额提示 -->
      <div class="text-center text-12px text-gray-400 mt-4">
        当前余额: {{ yabiData.currentValue }}
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { addOrCancelArticleReward } from '@/api'
import { useYaBiStore } from '@/stores'
import { storeToRefs } from 'pinia'

const yabiStore = useYaBiStore()
const { yabiData } = storeToRefs(yabiStore)

const rewardNum = defineModel<number>('rewardNum', { required: true, default: 0 })
interface RewardOption {
  amount: number
  icon: string
  selected: boolean
}

const dialogVisible = ref(false)
const selectedAmount = ref(2)

let articleId = -1

const rewardOptions = ref<RewardOption[]>([
  { amount: 1, icon: '🪙', selected: false },
  { amount: 2, icon: '🪙🪙', selected: true },
])

// 暴露 open 方法
const open = (id: number) => {
  articleId = id
  dialogVisible.value = true
  yabiStore.fetchYaBiData()
}

// 选择金额
const selectAmount = (amount: number) => {
  selectedAmount.value = amount
  rewardOptions.value.forEach((option) => {
    option.selected = option.amount === amount
  })
}

// 确认打赏
const handleConfirm = async () => {
  if (yabiData.value.currentValue < selectedAmount.value) {
    ElMessage.warning('余额不足,请先充值')
    return
  }

  await addOrCancelArticleReward({
    articleId: articleId,
    ayabi: selectedAmount.value,
  })
  ElMessage.success('打赏成功!')
  dialogVisible.value = false
  rewardNum.value += selectedAmount.value
  yabiStore.fetchYaBiData()
}

defineExpose({
  open,
})
</script>

<style scoped>
/* 弹窗样式 */

/* 金额选项卡片 */
.reward-option {
  width: 160px;
  padding: 20px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reward-option:hover {
  border-color: #60a5fa;
  background: #eff6ff;
}

.reward-option-active {
  border: 2px solid #3b82f6;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* 角色图片 */
.reward-character {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reward-character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 金额文字 */
.reward-amount {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.reward-option-active .reward-amount {
  color: #3b82f6;
  font-weight: 600;
}

/* 按钮样式 */
:deep(.el-button--primary) {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  border: none;
  font-weight: 500;
  height: 44px;
  font-size: 16px;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
</style>
