<template>
  <div class="points-page">
    <!-- ========== 顶部双卡：积分卡 + 任务进度卡 ========== -->
    <div class="top-grid">

      <!-- 左侧：积分卡 -->
      <div class="points-card">
        <div class="top">
          <div class="points-card__info">
            <div class="points-card__title">当前可用积分</div>
            <div class="points-card__main">
              <span class="points-card__number">{{ totalPoints }}</span>
              <span class="points-card__unit">分</span>
            </div>
            <div class="points-card__badge">
              <img src="@/assets/image/hospital/ponits/trophy.svg" class="badge-icon" alt="" />
              <span>已获得 {{ rewardCount }} 次奖励</span>
            </div>
          </div>
          <!-- 金币堆：CSS 组合占位实现（无虚线边框） -->
          <!-- <div class="points-card__coins">
            <div v-for="i in COIN_TOTAL" :key="i" class="coin-stack" :class="{ active: i <= filledCoins }">
              <div class="coin-stack__cell" />
            </div>
          </div> -->
          <img src="@/assets/image/hospital/ponits/placeholder-204-140.svg" class="trophy" alt="" />
        </div>
        <div class="bottom">
          <div class="points-card__stats">
            <div class="stat-item">
              <img src="@/assets/image/hospital/ponits/rili-small.svg" class="stat-icon" alt="" />
              <span class="stat-label">本月</span>
              <strong>+{{ monthPoints }}</strong>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <img v-if="todayPoints >= 0" src="@/assets/image/hospital/ponits/arrow-up.svg" class="stat-icon"
                alt="" />
              <img v-else src="@/assets/image/hospital/ponits/arrow-down.svg" class="stat-icon" alt="" />
              <span class="stat-label">今日</span>
              <strong>{{ todayPoints >= 0 ? '+' + todayPoints : todayPoints }}</strong>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：任务进度卡 -->
      <div class="task-card">
        <div class="task-card__header">
          <div class="task-card__title">
            <img src="@/assets/image/hospital/ponits/gift.svg" class="task-icon" alt="" />
            <span>兑换进度</span>
          </div>
        </div>
        <div class="progress-row">
          <div class="progress-track">
            <div class="progress-fill" :style="{ width: progressPercent + '%' }" />
          </div>
          <span class="progress-text">{{ progressPercent }}%</span>
        </div>
        <div class="task-card__reward">
          <img src="@/assets/image/hospital/ponits/gift-bear.svg" class="reward-img" alt="" />
          <div class="reward-text">
            <div class="name">{{ REWARD_NAME }}</div>
            <div class="desc">限量款 · 智能语音互动</div>
          </div>
          <button class="exchange-btn" :class="{ active: canExchange }" :disabled="!canExchange"
            @click="openExchangeModal">
            {{ exchangeButtonText }}
          </button>
        </div>
      </div>

    </div>

    <!-- ========== 三个动作卡：签到 / 抽奖 / 提交工单 ========== -->
    <div class="action-row">
      <!-- 签到 -->
      <div class="action-card action-card--checkin" :class="{ disabled: !!summary.isSignIn }" @click="showSignInRecord">
        <div class="action-icon"><img src="@/assets/image/hospital/ponits/rili-inner.svg" alt="" /></div>

        <div class="action-body">
          <div class="action-name">签到</div>
          <div class="action-desc">
            <template v-if="summary.isSignIn">
              连续签到{{ signInStreakDays }}天，排名第{{ signInRank }}，您已击败全国{{ signInBeatPercent }}%的医院
            </template>
            <template v-else>
              每日签到可领积分，连续签到奖励更多
            </template>
          </div>
        </div>
        <button class="action-cta" :disabled="!!summary.isSignIn" @click.stop="handleSignIn">
          {{ summary.isSignIn ? "已签到" : "签到" }}
        </button>
      </div>

      <!-- 抽奖 -->
      <div class="action-card action-card--lottery" @click="handleDraw">
        <div class="action-icon"><img src="@/assets/image/hospital/ponits/lottery-inner.svg" alt="" /></div>
        <div class="action-body">
          <div class="action-name">抽奖</div>
        </div>
        <span class="action-reward">+1~10积分</span>
      </div>

      <!-- 提交工单 -->
      <div class="action-card action-card--order" @click="goSubmit">
        <div class="action-icon"><img src="@/assets/image/hospital/ponits/record-inner.svg" alt="" /></div>
        <div class="action-body">
          <div class="action-name">提交工单</div>
          <div class="action-desc">&nbsp;</div>
        </div>
        <span class="action-reward">+1积分</span>
      </div>
    </div>

    <!-- ========== 积分变动记录 ========== -->
    <el-card shadow="never" class="history-card">
      <template #header>
        <div class="history-card-header">
          <h3>
            <img src="@/assets/image/hospital/ponits/record.svg" class="history-icon" alt="" />
            积分变动记录
          </h3>
          <el-button type="primary" plain @click="showRedeemLog" class="history-view-btn">
            <SvgIcon name="hospital-ponits-gift-record" :size="14" color="var(--brand-color)"
              class="history-view-icon" /> 查看兑换记录
          </el-button>
        </div>
      </template>

      <el-table class="jifen-table" header-cell-class-name="jifen-table-header-cell" :data="details" v-loading="loading"
        border stripe>
        <el-table-column label="时间" prop="createdAt" width="170" />
        <el-table-column label="来源" prop="source" width="140">
          <template #default="{ row }">
            <span class="source-cell">
              {{ row.source || "-" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="工单号" prop="orderNo" width="160">
          <template #default="{ row }">{{ row.orderNo || "-" }}</template>
        </el-table-column>
        <el-table-column label="积分变动" width="120">
          <template #default="{ row }">
            <span class="amount-badge" :class="amountBadgeClass(row.changeAmount)">
              {{ formatAmount(row.changeAmount) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="说明" prop="description" min-width="200">
          <template #default="{ row }">
            <span class="description-cell">
              {{ row.description || "-" }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]"
          :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="loadDetails"
          @current-change="loadDetails" />
      </div>
    </el-card>

    <!-- ========== 兑换表单弹窗 ========== -->
    <el-dialog v-model="exchangeVisible" style="padding: 40px;" title="🎁 兑换礼物" width="520px"
      :close-on-click-modal="false" append-to-body>
      <div class="redeem-sub">
        填写收件信息,即可兑换「{{ REWARD_NAME }}」
      </div>
      <div class="redeem-cost">
        <span>🎯 兑换消耗</span>
        <span class="cost-value">-{{ EXCHANGE_GOAL }} 积分</span>
      </div>
      <el-form ref="exchangeFormRef" :model="exchangeForm" :rules="exchangeRules" label-width="80px">
        <el-form-item label="收件人" prop="recipientName">
          <el-input v-model="exchangeForm.recipientName" placeholder="请输入收件人姓名" maxlength="50" />
        </el-form-item>
        <el-form-item label="手机号" prop="recipientPhone">
          <el-input v-model="exchangeForm.recipientPhone" placeholder="请输入手机号码" maxlength="20" />
        </el-form-item>
        <el-form-item label="收件地址" prop="recipientAddress">
          <el-input v-model="exchangeForm.recipientAddress" placeholder="请输入详细收件地址" maxlength="200" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="exchangeForm.remark" type="textarea" :rows="2" placeholder="选填,例如:快递柜、代收点等"
            maxlength="200" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="exchangeVisible = false">取消</el-button>
        <el-button type="warning" :loading="redeemSubmitting" @click="submitExchange">
          确认兑换
        </el-button>
      </template>
    </el-dialog>

    <!-- ========== 抽奖弹窗 ========== -->
    <LotteryDialog v-model="lotteryVisible" :drawable="!summary.isDraw" :batch-goal="50"
      :batch-current="Number(summary.rewardCount) || 5" @success="onLotterySuccess" />

    <!-- ========== 签到弹窗 ========== -->
    <SignInDialog v-model="signInVisible" :signed-in="!!summary.isSignIn" :total-points="totalPoints"
      :consecutive-sign-in-days="consecutiveSignInDays" :sign-in-rank="signInRank" :beat-percent="beatPercent"
      @success="onSignInSuccess" />

    <!-- 我的资产弹窗已迁到 AdminLayout 全局(AssetDialogStore 控制)，避免重复弹窗 -->

    <!-- ========== 兑换记录弹窗 ========== -->
    <el-dialog v-model="redeemLogVisible" class="redeem-log-dialog" append-to-body>
      <div class="redeem-body">
        <div class="redeem-log-header">
          <div class="redeem-log-title">
            <span class="title-text">兑换记录</span>
            <span class="redeem-label">已成功兑换的「{{ REWARD_NAME }}」清单</span>
          </div>
          <img src="@/assets/image/hospital/ponits/close-btn.svg" class="close-btn" alt=""
            @click="redeemLogVisible = false" />
        </div>

        <div v-loading="redeemLogLoading" class="redeem-log-list">
          <el-empty v-if="!redeemLogLoading && redeemLog.length === 0" description="暂无兑换记录">
            <template #image>
              <div style="font-size: 48px; opacity: 0.4">📭</div>
            </template>
            <template #default>
              <p style="color: #b0a090; font-size: 13px">
                快去积攒积分兑换「康小虎」吧!
              </p>
            </template>
          </el-empty>
          <div v-else class="log-items">
            <div v-for="(item, idx) in redeemLog" :key="idx" class="log-item">
              <div class="log-info log-info-1">
                <div class="log-name"><span class="bear">🧸</span>{{ item.itemName || REWARD_NAME }}</div>
                <div class="log-detail">
                  <div class="recipient">
                    <span class="label">收件人：</span>
                    <span class="value">{{ item.recipientName }}</span>
                  </div>
                  <div class="address">
                    <span class="label">收件地址：</span>
                    <span class="value">{{ item.recipientAddress }}</span>
                  </div>
                  <div class="remark">
                    <span class="label">备注：</span>
                    <span class="value">{{ item.remark || "无" }}</span>
                  </div>
                </div>
              </div>
              <div class="log-info log-info-2">
                <div class="log-name" style="opacity: 0;"><span class="bear">🧸</span>{{ item.itemName || REWARD_NAME }}
                </div>
                <div class="log-detail">
                  <div class="phone">
                    <span class="label">手机号：</span>
                    <span class="value">{{ item.recipientPhone }}</span>
                  </div>
                  <div class="time">
                    <span class="label">兑换时间：</span>
                    <span class="value">{{ formatLogTime(item.createdAt) }}</span>
                  </div>
                </div>
              </div>
              <div class="log-status">已兑换</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import SvgIcon from "@/components/SvgIcon/index.vue";
import LotteryDialog from "@/views/hospital/LotteryDialog.vue";
import SignInDialog from "@/views/hospital/SignInDialog.vue";
import { useOrderDialogStore } from "@/stores/orderDialog";
import {
  getPoints,
  getPointsDetails,
  signIn,
  draw,
  redeem,
  getRedeems,
} from "@/service/modular/hospital";

const router = useRouter();

// 兑换目标(500 积分 = 一个康小虎)
const EXCHANGE_GOAL = 500;
const REWARD_NAME = "康小虎 AI 吉祥物";

// 签到记录相关字段(来自接口 summary)
const signInStreakDays = computed(
  () => Number(summary.value.consecutiveSignInDays) || 0,
);
const signInRank = computed(() => Number(summary.value.signInRank) || 0);
const signInBeatPercent = computed(() => {
  const n = Number(summary.value.beatPercent) || 0;
  // 0 表示未上榜, 保留原值交给上层判断
  return n;
});

// 透传给签到弹窗的字段(命名与接口字段一致)
const consecutiveSignInDays = signInStreakDays;
const beatPercent = signInBeatPercent;

// 金币堆：固定 7 格，按比例点亮
const COIN_TOTAL = 7;

const summary = ref({});
const details = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const loadingAll = ref(false);

const totalPoints = computed(() => Number(summary.value.totalPoints) || 0);
const rewardCount = computed(() => Number(summary.value.rewardCount) || 0);
const todayPoints = computed(
  () => Number(summary.value.totalPointsToday) || 0,
);
const monthPoints = computed(
  () => Number(summary.value.totalPointsMonth) || 0,
);

const canExchange = computed(() => totalPoints.value >= EXCHANGE_GOAL);
const progressPercent = computed(() =>
  Math.min(100, Math.round((totalPoints.value / EXCHANGE_GOAL) * 100)),
);
const goalText = computed(() => {
  if (canExchange.value) return "已达标 🎉";
  return `还差 ${EXCHANGE_GOAL - totalPoints.value} 分`;
});
const exchangeButtonText = computed(() => {
  if (canExchange.value) return "去兑换";
  return `还差 ${EXCHANGE_GOAL - totalPoints.value} 分`;
});

// 金币堆高亮数量：按积分比例递增（最多 COIN_TOTAL）
const filledCoins = computed(() => {
  if (totalPoints.value <= 0) return 0;
  return Math.min(
    COIN_TOTAL,
    Math.ceil((totalPoints.value / EXCHANGE_GOAL) * COIN_TOTAL),
  );
});

// 后端 ApiResponse 兼容:可能是 { data: ... } 也可能直接是 payload
const unwrap = (res) => res?.data ?? res ?? {};

const loadSummary = async () => {
  try {
    summary.value = unwrap(await getPoints());
  } catch (_) {
    summary.value = {};
  }
};

const loadDetails = async () => {
  loading.value = true;
  try {
    const res = unwrap(await getPointsDetails({
      page: page.value,
      pageSize: pageSize.value,
    }));
    details.value = (res.list || []).map((item) => ({
      ...item,
      createdAt: item.createdAt
        ? dayjs(item.createdAt).format("YYYY-MM-DD HH:mm")
        : "",
    }));
    total.value = res.total || details.value.length;
  } finally {
    loading.value = false;
  }
};

const loadAll = async () => {
  loadingAll.value = true;
  try {
    await Promise.all([loadSummary(), loadDetails()]);
  } finally {
    loadingAll.value = false;
  }
};

const showRule = () => {
  ElMessage.info("📖 签到 +1 · 抽奖 +1~10 · 提交工单 +1");
};

const signInVisible = ref(false);
const handleSignIn = async () => {
  if (summary.value.isSignIn) {
    ElMessage.info("今日已签到,明天再来吧!");
    return;
  }
  try {
    await signIn({ remark: "" });
    ElMessage.success("签到成功! +1 积分 🎉");
    await loadAll();
  } catch (e) {
    ElMessage.error(e?.message || "签到失败");
  }
};

// 打开签到弹窗(签到记录 + 每日签到 二合一)
const showSignInRecord = () => {
  signInVisible.value = true;
};

// 签到弹窗签到成功回调
const onSignInSuccess = async () => {
  await loadAll();
};

// 操作:抽奖(只负责打开弹窗,抽奖逻辑在 LotteryDialog 中)
// “查看我的资产”由 RewardResultDialog 内部触发全局 AssetsDialog，不再需要本地 assetsVisible
const lotteryVisible = ref(false);
const handleDraw = () => {
  if (summary.value.isDraw) {
    ElMessage.warning("今日已抽奖,明天再来吧!");
    return;
  }
  lotteryVisible.value = true;
};
const onLotterySuccess = async () => {
  await loadAll();
};

// 今日积分明细（按来源分类汇总）
const todayBreakdown = computed(() => {
  const today = dayjs().format("YYYY-MM-DD");
  const sumBy = (test) =>
    details.value
      .filter(
        (r) =>
          r.createdAt && r.createdAt.startsWith(today) && test(r.source),
      )
      .reduce(
        (sum, r) => sum + Math.abs(Number(r.changeAmount) || 0),
        0,
      );
  return {
    order: sumBy((s) => /工单|order/i.test(s || "")),
    signIn: sumBy((s) => /签到|签/i.test(s || "")),
    draw: sumBy((s) => /抽奖|抽/i.test(s || "")),
  };
});

// 操作:提交工单(打开全局弹窗)
const orderDialogStore = useOrderDialogStore();
const goSubmit = () => {
  orderDialogStore.open();
};

// 兑换表单
const exchangeVisible = ref(false);
const exchangeForm = reactive({
  recipientName: "",
  recipientPhone: "",
  recipientAddress: "",
  remark: "",
});
const exchangeRules = {
  recipientName: [
    { required: true, message: "请输入收件人姓名", trigger: "blur" },
  ],
  recipientPhone: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern: /^[\d\-+ ]{7,15}$/,
      message: "请输入有效的手机号码",
      trigger: "blur",
    },
  ],
  recipientAddress: [
    { required: true, message: "请输入详细收件地址", trigger: "blur" },
  ],
};
const exchangeFormRef = ref();
const redeemSubmitting = ref(false);

const openExchangeModal = () => {
  if (!canExchange.value) {
    ElMessage.warning(
      `积分不足,还需要 ${EXCHANGE_GOAL - totalPoints.value} 分才能兑换`,
    );
    return;
  }
  Object.assign(exchangeForm, {
    recipientName: "",
    recipientPhone: "",
    recipientAddress: "",
    remark: "",
  });
  exchangeVisible.value = true;
};

const submitExchange = async () => {
  await exchangeFormRef.value?.validate(async (valid) => {
    if (!valid) return;
    try {
      await ElMessageBox.confirm(
        `确认兑换「${REWARD_NAME}」,将消耗 ${EXCHANGE_GOAL} 积分?`,
        "提示",
        {
          type: "warning",
          confirmButtonText: "确认兑换",
          cancelButtonText: "取消",
        },
      );
    } catch (_) {
      return;
    }
    redeemSubmitting.value = true;
    try {
      await redeem({
        itemName: REWARD_NAME,
        points: EXCHANGE_GOAL,
        ...exchangeForm,
      });
      ElMessage.success("🎊 兑换成功!「康小虎 AI 吉祥物」已发货");
      exchangeVisible.value = false;
      await loadAll();
    } catch (e) {
      ElMessage.error(e?.message || "兑换失败");
    } finally {
      redeemSubmitting.value = false;
    }
  });
};

// 兑换记录
const redeemLogVisible = ref(false);
const redeemLog = ref([]);
const redeemLogLoading = ref(false);

const showRedeemLog = async () => {
  redeemLogVisible.value = true;
  redeemLogLoading.value = true;
  try {
    const res = unwrap(await getRedeems({ page: 1, pageSize: 50 }));
    redeemLog.value = res.list || [];
  } catch (_) {
    redeemLog.value = [];
  } finally {
    redeemLogLoading.value = false;
  }
};

const formatLogTime = (val) =>
  val ? dayjs(val).format("YYYY-MM-DD HH:mm") : "-";

const formatAmount = (amount) => {
  const n = Number(amount) || 0;
  return n >= 0 ? `+${n}` : `${n}`;
};

const amountBadgeClass = (amount) => {
  const n = Number(amount) || 0;
  if (n < 0) return "negative";
  if (n >= 0) return "positive";
};

onMounted(() => loadAll());
</script>

<style scoped lang="scss">
:deep(.el-button.is-plain) {
  background-color: transparent;
  // el-button 的 hover 样式是通过 :hover 读取 hover-* 变量实现的
  // 这里把 plain 按钮 hover 时的变量重置为默认（未 hover）状态的值，hover 不再有视觉变化
  --el-button-hover-bg-color: var(--el-button-bg-color);
  --el-button-hover-text-color: var(--el-button-text-color);
  --el-button-hover-border-color: var(--el-button-border-color);
}

// .points-page {
//   padding: 0 4px;
// }

/* ============ 顶部双卡 ============ */
.top-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
  margin-bottom: 20px;

  /* 积分卡（浅米色背景） */
  .points-card {
    border-radius: 16px;
    overflow: hidden;

    .top {
      background: linear-gradient(to right, #FCEDE5 0%, #FFF6EE 100%);
      padding: 15px 42px 6px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      position: relative;
      overflow: hidden;
      // min-height: 160px;

      .points-card__info {
        flex: 1;
        min-width: 0;
      }

      .points-card__title {
        font-size: 14px;
        color: #666666;
      }

      .points-card__main {
        display: flex;
        align-items: baseline;
        gap: 6px;
      }

      .points-card__number {
        font-size: 48px;
        font-weight: 600;
        color: #FF8D28;
        line-height: 1.5;
      }

      .points-card__unit {
        font-size: 14px;
        font-weight: 600;
        color: #FF8D28;
      }

      .points-card__badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 7.5px 10px;
        margin-top: 1px;
        font-weight: normal;
        font-size: 14px;
        color: #666666;

        background: #FDFEFF;
        border-radius: 9999px;
        border: 1px solid #E0E0E0;

        .badge-icon {
          width: 14px;
          height: 14px;
        }
      }

      .trophy {
        width: 204px;
        height: 140px;
      }
    }

    .bottom {
      background: linear-gradient(90deg, #FFFCFB 0%, #FEF8F3 100%);
      padding: 18px 30px;

      .points-card__stats {
        display: flex;
        align-items: center;
        gap: 78px;

        .stat-item {
          display: inline-flex;
          align-items: center;
          gap: 8px;

          .stat-icon {
            width: 20px;
            height: 20px;
          }

          .stat-label {
            font-size: 14px;
            color: #666666;
          }

          strong {
            color: #000000;
            font-weight: 600;
            font-size: 16px;
          }
        }

        .stat-divider {
          width: 1px;
          height: 14px;
          background: #ACBED4;
        }
      }
    }





    .points-card__coins {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-shrink: 0;

      @media (max-width: 700px) {
        justify-content: center;
      }
    }
  }

  /* 金币堆：CSS 组合占位 */
  .coin-stack {
    width: 28px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;

    &__cell {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background: #F4F5F7;
      box-shadow: inset 0 0 0 1px #E5E7EB;
    }

    /* 点亮的金币格 */
    &.active &__cell {
      background: linear-gradient(180deg, #FFB04A 0%, #FF8A28 100%);
      box-shadow:
        inset 0 0 0 1px #FF8A28,
        0 2px 6px rgba(255, 138, 40, 0.35);
    }
  }


  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}



/* 任务进度卡 */
.task-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1F1F1F;

    .task-icon {
      width: 26px;
      height: 26px;
    }
  }

  &__reward {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    margin-top: auto;

    .reward-img {
      width: 49px;
      height: 49px;
      object-fit: contain;
      border-radius: 10px;
    }

    .reward-text {
      flex: 1;
      min-width: 0;

      .name {
        font-weight: bold;
        font-size: 16px;
        color: #1D2129;
      }

      .desc {
        font-weight: normal;
        font-size: 14px;
        color: #666666;
      }
    }
  }
}

/* 进度条 */
.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;

  .progress-track {
    flex: 1;
    height: 10px;
    background: #F1F3F4;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
  }

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

  .progress-text {
    font-weight: normal;
    font-size: 14px;
    color: #666666;
  }
}

/* 兑换按钮 */
.exchange-btn {
  width: 138px;
  height: 42px;
  background: #F6F6F6;
  border-radius: 21px;
  font-weight: normal;
  font-size: 16px;
  color: #BCBCBC;
  border: none;
  text-align: center;
  line-height: 42px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;

  &.active {
    background: #FF8D28;
    color: #fff;

    &:hover {
      transform: translateY(-1px);
    }
  }
}

/* ============ 三个动作卡 ============ */
.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 27px;
  margin-bottom: 20px;
}

.action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 16px 28px 24px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid #FFFFFF;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;

  &--checkin {
    background: linear-gradient(90deg, #FCEDE5 0%, #FFF6EE 100%);
    box-shadow: 0px 4px 4px 0px rgba(219, 133, 56, 0.16);

    .action-icon {
      background: linear-gradient(180deg, #FFAD28 0%, #FF8511 100%);
    }
  }

  &--lottery {
    background: #EEE6FD;
    box-shadow: 0px 4px 4px 0px rgba(171, 152, 207, 0.23);

    .action-icon {
      background: linear-gradient(180deg, #AE6EFE 0%, #6E41FD 100%);
    }
  }

  &--order {
    background: #E8F9F1;
    box-shadow: 0px 4px 4px 0px rgba(14, 138, 46, 0.18);

    .action-icon {
      background: linear-gradient(180deg, #24DE80 0%, #0ACB5C 100%);
    }
  }

  &:hover:not(.disabled) {
    transform: translateY(-2px);
  }

  // &.disabled {
  //   opacity: 0.55;
  //   cursor: not-allowed;
  //   filter: grayscale(0.2);
  // }

  .action-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    flex-shrink: 0;
    box-sizing: border-box;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 14px;
    }
  }

  .action-body {
    flex: 1;
    min-width: 0;
  }

  .action-name {
    font-weight: bold;
    font-size: 16px;
    color: #1D2129;
  }

  .action-desc {
    font-weight: normal;
    font-size: 12px;
    color: #666666;
  }

  .action-cta {
    background: linear-gradient(180deg, #FFAD28 0%, #FF8511 100%);
    border-radius: 4px 4px 4px 4px;
    width: 72px;
    height: 36px;
    font-weight: normal;
    font-size: 16px;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
    text-align: center;
    line-height: 36px;

    &:hover:not(:disabled) {
      background: #FF7800;
      transform: translateY(-1px);
    }

    &:disabled {
      background: #F9D2B3;
      cursor: not-allowed;
    }
  }

  .action-reward {
    font-weight: normal;
    font-size: 16px;
  }

  &--lottery .action-reward {
    color: #7143FD;
  }

  &--order .action-reward {
    color: #1EC964;
  }
}

/* ============ 历史记录 ============ */
.history-card {
  border-radius: 14px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  background-color: #fff;

  :deep(.el-card__header) {
    border-bottom: none;
  }
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;

  h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1F1F1F;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .history-icon {
    width: 21px;
    height: 21px;
  }


  .history-view-btn {
    .history-view-icon {
      margin-right: 6px;
    }
  }
}

:deep(.jifen-table) {
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #e0e0e0;
  overflow: hidden;

  // el-table 的 border 是用伪元素绘制外层 1px（左/右/上） + 内部 cell 的 border-right / border-bottom
  // 这里把外层 3 条伪元素边框隐藏，仅保留 cell 之间的分隔线，避免与外层自加 border 叠加
  &::before,
  &::after {
    display: none !important;
  }

  .el-table__inner-wrapper::before .el-table__inner-wrapper::after {
    display: none !important;
  }

  .jifen-table-header-cell {
    background: #f9faff;
    font-weight: 500;
    font-size: 14px;
    color: #666666;
    line-height: 18px;
  }
}

.source-cell,
.description-cell {
  font-weight: 500;
  font-size: 14px;
  color: #1D2129;
}

.amount-badge {
  font-weight: 500;
  font-size: 14px;

  &.positive {
    color: #34C759;
  }

  &.negative {
    color: #FF383C;
  }
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

/* ============ 兑换表单 ============ */
.redeem-sub {
  font-size: 13px;
  color: #8a7a6a;
  margin: -8px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0e4d8;
}

.redeem-cost {
  background: #fdf8f2;
  border: 1px solid #f0e4d8;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #8a7a6a;

  .cost-value {
    font-weight: 700;
    font-size: 18px;
    color: #e8831a;
  }
}
</style>

<style lang="scss">
.redeem-log-dialog {
  width: max-content;
  padding: 0;
  border-radius: 24px 24px 24px 24px;


  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
    width: 100%;
    height: 100%;
  }

  .redeem-body {
    padding: 45px 32px;

    .redeem-log-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      gap: 12px;
      margin-bottom: 33px;

      .redeem-log-title {
        display: flex;
        align-items: center;
        gap: 20px;

        .title-text {
          font-weight: normal;
          font-size: 20px;
          color: #1D2129;
        }

        .redeem-label {
          font-weight: normal;
          font-size: 14px;
          color: #666666;
        }

      }

      .close-btn {
        width: 30px;
        height: 30px;
        cursor: pointer;
      }
    }

    /* ============ 兑换记录 ============ */
    .redeem-log-list {
      max-height: 420px;
      overflow-y: auto;
    }

    .log-items {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .log-item {
      width: 1104px;
      display: flex;
      align-items: center;
      position: relative;
      background: #F8F8F8;
      border-radius: 12px 12px 12px 12px;
      padding: 8px 12px 12px 12px;
      gap: 40px;
    }

    .log-info {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .log-name {
        font-weight: normal;
        font-size: 16px;
        color: #1D2129;
        margin-bottom: 8px;

        .bear {
          display: inline-block;
          font-size: 18px;
          margin-right: 10px;
          margin-top: 4px;
        }
      }

      .label {
        font-weight: normal;
        color: #666;
        font-size: 14px;
        line-height: 22px;
      }

      .value {
        font-weight: normal;
        color: #1D2129;
        font-size: 14px;
        line-height: 22px;
      }
    }

    .log-info-1 {
      width: 585px;
    }

    .log-status {
      position: absolute;
      right: 12px;
      top: 12px;
      width: 63px;
      height: 26px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #FF8D28;
      font-weight: normal;
      font-size: 14px;
      color: #FF8D28;
      line-height: 26px;
      text-align: center;
    }
  }
}
</style>