<!--
  共用"奖励结果"弹窗组件（顶层 el-dialog，不嵌入任何父级，避免被父级 overflow 隐藏）
  - 用于抽奖 / 签到 / 提交工单 等场景的成功反馈
  - 通过 useRewardResultStore 控制显隐
  - Props:
    title        - 标题文案，如 "恭喜抽中" / "签到成功" / "提交工单"
    icon         - 大图标 url
    points       - 本次获得的积分（0 / null 时不显示积分区块）
    batchGoal    - 兑换目标积分（默认 500）
    batchCurrent - 当前积分（默认 0）
    rewardName   - 兑换物名称（默认 "康小虎 AI 吉祥物"）
  - Events:
    claim      - "开心收下"
    viewAccount - "查看我的资产"
-->
<template>
  <el-dialog :model-value="visible" @update:model-value="onDialogUpdate" :show-close="false"
    :close-on-click-modal="true" width="auto" align-center append-to-body class="reward-result-dialog"
    @closed="onClosed">
    <div class="reward-result">
      <div class="main-wrap">
        <div class="result-icon-wrap">
          <img :src="icon" class="result-icon" alt="" />
        </div>
        <div class="result-title">{{ title }}</div>
        <div v-if="showPoints" class="result-points">
          <span class="plus">+</span>
          <span class="value">{{ points }}&nbsp;&nbsp;</span>
          <span class="unit">积分</span>
        </div>
        <div class="batch-wrap">
          <div class="batch-info">
            <span class="batch-label">距离兑换 {{ rewardName }}</span>
            <span class="batch-remaining">还差{{ batchRemaining }}分</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: batchPercent + '%' }" />
          </div>
        </div>
      </div>
      <div class="result-actions">
        <el-button type="primary" plain class="btn-secondary" @click="onClaim">开心收下</el-button>
        <el-button type="primary" class="btn-primary" @click="onViewAccount">查看我的资产</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";
import { useRewardResultStore } from "@/stores/rewardResult";

const store = useRewardResultStore();

const visible = computed({
  get: () => store.visible,
  set: (v) => {
    if (!v) store.close();
  },
});

const title = computed(() => store.title);
const icon = computed(() => store.icon);
const points = computed(() => store.points);
const batchGoal = computed(() => store.batchGoal);
const batchCurrent = computed(() => store.batchCurrent);
const rewardName = computed(() => store.rewardName);

const showPoints = computed(() => Number(points.value) > 0);

const batchRemaining = computed(() =>
  Math.max(0, Number(batchGoal.value) - Number(batchCurrent.value)),
);

const batchPercent = computed(() => {
  const goal = Number(batchGoal.value) || 0;
  if (goal <= 0) return 0;
  return Math.min(100, Math.round((Number(batchCurrent.value) / goal) * 100));
});

const onDialogUpdate = (val) => {
  if (!val) store.close();
};

const onClosed = () => {
  // 关闭动画结束后清理一次数据,防止下次 open 时闪现旧内容
  store.clear();
};

const onClaim = () => store.close();
const onViewAccount = () => {
  store.close();
  // 通知外部:查看我的资产
  store.requestViewAccount();
};
</script>

<style lang="scss">
// ===== 顶部 keyframes =====
@keyframes resultPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

// ===== 弹窗外壳 =====
.reward-result-dialog {
  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
  }
}

// ===== 结果视图（与原 LotteryDialog 的 .lottery-result 完全同款）=====
.reward-result {
  width: 458px;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  overflow: hidden;

  .main-wrap {
    padding: 30px 46px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .result-icon-wrap {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: resultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .result-icon {
      width: 110px;
      height: 110px;
    }

    .result-title {
      font-weight: 600;
      font-size: 24px;
      color: #1D2129;
      margin: 16px auto;
    }

    .result-points {
      font-weight: 600;
      font-size: 24px;
      color: #FF8D28;

      .plus {
        font-size: 15px;
      }

      .unit {
        font-size: 16px;
        font-weight: 500;
      }
    }

    .batch-wrap {
      margin-top: 16px;
      background: #F9FAFF;
      border-radius: 10px 10px 10px 10px;
      width: 100%;
      padding: 18px 15px;

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

        .batch-label {
          color: #666666;
        }

        .batch-remaining {
          color: #FF8D28;
        }
      }

      .progress-bar {
        margin-top: 6px;
        height: 6px;
        background: #E2E2E2;
        border-radius: 3px;
        overflow: hidden;

        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #FF7800 0%, #FF8D28 100%);
          transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
      }
    }
  }

  .result-actions {
    background: #F9FAFF;
    display: flex;
    border-top: 1px solid #E0E0E0;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 24px;
    --el-color-primary: #6155F5;
    --el-button-border-color: #6155F5;
    --el-button-hover-bg-color: #6155F5;
    --el-border-color: #6155F5;

    button {
      width: 126px;
      height: 38px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: normal;
      transition: all 0.2s;
      border-color: #6155F5;

      &:hover {
        background: #6155F5;
      }
    }
  }
}
</style>
