<template>
  <view>
    <up-popup
      :show="show"
      bgColor="transparent"
      :safeAreaInsetBottom="false"
      @close="close"
      mode="center"
    >
      <view class="container">
        <view
          class="content"
          :style="contentStyle"
          :class="`content${currentPage}`"
        >
          <!-- 顶部标题图 -->
          <view class="top">
            <image class="image" :src="imageList.gift" mode="widthFix"></image>
          </view>

          <!-- 优惠券列表 -->
          <view class="list">
            <view
              class="item"
              :style="kuangStyle"
              v-for="(item, index) in couponList"
              :key="index"
            >
              <!-- <view class="kuang">
                <image
                  class="kuang-img"
                  :src="imageList.kuang"
                  mode="aspectFit"
                ></image>
              </view> -->
              <!-- 优惠券金额 -->
              <view>
                <template
                  v-if="
                    item.couponInfo.couponType == 3 ||
                    item.couponInfo.couponType == 1
                  "
                >
                  <text class="big-title">{{
                    returnTitle(item.couponInfo)
                  }}</text>
                  <text class="u-m-l-12 small-title">
                    {{ returnSmallTitle(item.couponInfo) }}
                  </text>
                </template>
                <template v-else>
                  <text class="big-title" style="font-size: 48rpx">{{
                    returnTitle(item.couponInfo)
                  }}</text>
                </template>
              </view>
              <!-- 优惠券名称与领取按钮 -->
              <view class="u-flex u-row-between u-m-t-16 u-col-center">
                <view>
                  <text class="title">{{ item.couponInfo.title }}</text>
                  <text class="num">x{{ item.num }}</text>
                </view>
                <button class="lingqu" @click="handleReceive(item)">
                  立即领取
                </button>
              </view>
              <!-- 有效期（替换硬编码，用接口返回数据） -->
              <view class="u-m-t-10 time">
                有效期至：{{ formatDate(item.couponInfo.validStartTime) }}-{{
                  formatDate(item.couponInfo.validEndTime)
                }}
              </view>
            </view>
          </view>

          <!-- 分页控制（左右箭头+页码） -->
          <view
            class="u-flex u-row-center u-m-t-16"
            v-if="allCoupons.length > 3"
          >
            <!-- 左箭头：当前页>1可点击 -->
            <view
              @click="handlePrevPage"
              class="page-arrow"
              :class="{ disabled: currentPage === 1 }"
            >
              <up-icon
                name="arrow-left"
                size="12"
                :color="currentPage === 1 ? '#999' : '#000'"
              ></up-icon>
            </view>
            <!-- 页码列表：点击切换+当前页高亮 -->
            <view class="u-flex page-nums">
              <view
                v-for="(num, index) in pageNums"
                :key="index"
                class="item"
                :class="{ active: currentPage === num }"
                @click="handleClickPage(num)"
              >
                {{ num }}
              </view>
            </view>
            <!-- 右箭头：当前页<总页数可点击 -->
            <view
              @click="handleNextPage"
              class="page-arrow"
              :class="{ disabled: currentPage === totalPages }"
            >
              <up-icon
                name="arrow-right"
                size="12"
                :color="currentPage === totalPages ? '#999' : '#000'"
              ></up-icon>
            </view>
          </view>

          <!-- 底部一键领取按钮 -->
          <view class="btn-wrap" :class="{ 'u-m-t-18': allCoupons.length > 3 }">
            <image
              @click="handleReceiveAll"
              class="btn-img"
              :src="imageList.btn"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
  
  <script setup>
import _ from "lodash";
import dayjs from "dayjs";
import { onMounted, ref, reactive, computed } from "vue";
import * as birthdayGiftApi from "@/common/api/market/birthdayGift.js";

// 1. 分页核心配置
const currentPage = ref(1); // 当前页码
const pageSize = ref(3); // 每页显示条数
const allCoupons = ref([]); // 存储全部优惠券（用于分页截取）
const couponList = ref([]); // 当前页优惠券列表
const pageNums = ref([]); // 页码数组（如[1,2,3]）
const totalPages = computed(() => {
  // 计算总页数：向上取整（如5条数据→2页）
  return Math.ceil(allCoupons.value.length / pageSize.value);
});

// 2. 图片资源（修复bg2地址缺失的"g"）
const imageList = reactive({
  btn: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/493b459f8c944057be72750c12c4cd1a.png",
  gift: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/112d2433378349b4a26ab311b8d3bac4.png",
  kuang:
    "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/bb5e2d5ed73c455d9b6e9b4ac0e86192.png",
  bg1: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/847f9aea44d64b15b35caf8967f3d63f.png",
  bg2: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/2f704eef2e3d484d8862673131ae3989.png", // 修复：.pn→.png
  bg3: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/7ab43d1ef2fc490d80165d18795a93f3.png",
});

// 3. 背景图（随当前页切换）
const bgUrl = ref(imageList.bg1);
const contentStyle = computed(() => ({
  backgroundImage: `url(${bgUrl.value})`,
  backgroundSize: "100% 100%", // 确保背景图铺满容器
}));
const kuangStyle = computed(() => ({
  backgroundImage: `url(${imageList.kuang})`,
}));

// 4. 弹窗状态与props
const show = ref(false);
const props = defineProps({
  getMode: {
    type: String,
    default: "eat",
  },
});

// ---------------------- 分页核心逻辑 ----------------------
/**
 * 1. 生成页码数组（如总数据5条→[1,2]）
 */
const generatePageNums = () => {
  pageNums.value = Array.from({ length: totalPages.value }, (_, i) => i + 1);
};

/**
 * 2. 更新当前页优惠券列表（根据当前页截取数据）
 */
const updateCouponList = () => {
  const startIdx = (currentPage.value - 1) * pageSize.value;
  const endIdx = startIdx + pageSize.value;
  couponList.value = allCoupons.value.slice(startIdx, endIdx);
  // 同步切换背景图（当前页对应bg1/bg2/bg3）
  bgUrl.value = imageList[`bg${currentPage.value}`] || imageList.bg1;
};

/**
 * 3. 上一页切换
 */
const handlePrevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    updateCouponList();
  }
};

/**
 * 4. 下一页切换
 */
const handleNextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    updateCouponList();
  }
};

/**
 * 5. 点击页码切换
 */
const handleClickPage = (num) => {
  currentPage.value = num;
  updateCouponList();
};

// ---------------------- 数据与交互逻辑 ----------------------
/**
 * 1. 格式化日期（YYYY.MM.DD）
 */
const formatDate = (dateStr) => {
  return dateStr ? dayjs(dateStr).format("YYYY.MM.DD") : ""; // 默认兜底日期
};

/**
 * 2. 单个优惠券领取
 */
const handleReceive = async (item) => {
  close();
  uni.showToast({ title: "领取成功！去「我的优惠券」查看", icon: "none" });
};

/**
 * 3. 底部一键领取（领取当前页所有优惠券）
 */
const handleReceiveAll = async () => {
  if (couponList.value.length === 0) {
    uni.showToast({ title: "当前页无优惠券可领", icon: "none" });
    return;
  }
  close();
  uni.showToast({ title: "领取成功！去「我的优惠券」查看", icon: "none" });
};

/**
 * 4. 初始化获取优惠券数据
 */
const getCouponPopupAjax = async () => {
  try {
    const shopId = uni.cache.get("shopId");
    const res = await birthdayGiftApi.config({ shopId });
    if (res&&res.length) {
      // 处理有效期格式（固定有效期规则）
      allCoupons.value = res.map((item) => {
        if (item.validType === "fixed") {
          item.validStartTime = dayjs()
            .add(item.daysToTakeEffect, "day")
            .format("YYYY-MM-DD HH:mm:ss");
          item.validEndTime = dayjs()
            .add(+item.daysToTakeEffect + +item.validDays, "day")
            .format("YYYY-MM-DD HH:mm:ss");
        }
        return item;
      });
      // 初始化分页：生成页码→更新列表→显示弹窗
      generatePageNums();
      updateCouponList();
      show.value = true;
    }else{
        close();
    }
  } catch (error) {
    console.error("获取优惠券失败：", error);
  }
};

// 页面挂载时初始化
onMounted(() => {
  getCouponPopupAjax();
});

function returnTitle(coupon) {
  if (coupon.couponType == 1) {
    return `￥${coupon.discountAmount}`;
  }
  if (coupon.couponType == 2) {
    return `商品兑换券`;
  }
  if (coupon.couponType == 3) {
    const discountRate = coupon.discountRate / 10;
    return `${discountRate}折券`;
  }
  if (coupon.couponType == 4) {
    return `第二件半价券`;
  }
  if (coupon.couponType == 6) {
    return `买一送一券`;
  }
}

function returnSmallTitle(coupon) {
  if (coupon.couponType == 1) {
    return `满${coupon.fullAmount || 0}可用`;
  }
  if (coupon.couponType == 3) {
    return `满${coupon.fullAmount || 0}可用`;
  }
}

const emit = defineEmits(["close"]);

function close() {
  show.value = false;
  emit("close");
}
</script>
  
<style scoped lang="scss">
// 基础容器样式
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52rpx;

  .content {
    width: 100%;
    position: relative;
    margin: auto;
    min-height: 836rpx;
    padding: 0 28rpx 62rpx;
    border-radius: 16rpx;
    overflow: hidden;

    // 分页箭头样式（添加禁用态）
    .page-arrow {
      cursor: pointer;
      width: 64rpx;
      height: 64rpx;
      box-sizing: border-box;
      color: #000;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      font-size: 14px;
      line-height: 60rpx;
      padding: 0 14rpx;
      border-radius: 4rpx;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
      margin: 0 16rpx;
      display: flex;
      justify-content: center;
      align-content: center;
      &.disabled {
        cursor: not-allowed;
      }
    }

    // 页码样式（当前页高亮）
    .page-nums {
      display: flex;
      gap: 16rpx;
      .item {
        width: 64rpx;
        height: 64rpx;
        box-sizing: border-box;
        color: #000;
        background-color: #fff;
        border: 1px solid #d9d9d9;
        font-size: 14px;
        line-height: 64rpx;
        padding: 0 4rpx;
        border-radius: 4rpx;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
        &.active {
          border-color: #1890ff;
          color: #1890ff;
          font-weight: 500;
        }
        &:active:not(.active) {
          background-color: #f5f5f5;
        }
      }
    }

    // 底部按钮容器
    .btn-wrap {
      margin: 28rpx 0 0;
      margin-top: 30rpx;
      .btn-img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        &:active {
          opacity: 0.9;
        }
      }
    }
  }
}

// 顶部标题图
.top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  .image {
    width: 100%;
  }
}

// 优惠券列表样式
.list {
  margin-top: 332rpx;
  position: relative;
  z-index: 2;
  .item {
    position: relative;
    padding: 32rpx 12rpx 36rpx 36rpx;
    background-size: 100% 100%;
    background-position: center;
    overflow: hidden;
    margin-top: 36rpx;
    box-sizing: border-box;

    // 优惠券边框图
    .kuang {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      .kuang-img {
        width: 100%;
        height: 100%;
      }
    }

    // 金额样式
    .big-title {
      color: #f05a82;
      font-size: 36px;
      font-weight: 600;
    }
    .small-title {
      color: #f05a82;
      font-size: 16px;
      font-weight: 600;
    }

    // 名称与数量
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 400;
      padding-bottom: 10rpx;
      border-bottom: 4rpx dashed #fd8293;
    }
    .num {
      color: #f05a82;
      font-size: 20px;
      font-weight: 400;
      line-height: 22px;
      margin-left: 16rpx;
    }

    // 有效期
    .time {
      color: #666; // 调整颜色更柔和
      font-size: 14px;
      font-weight: 400;
    }
  }
}

// 领取按钮样式
.lingqu {
  padding: 12rpx 20rpx; // 加宽内边距，点击区域更大
  border-radius: 14rpx;
  background: #fd8293;
  color: #fff;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 1;
  border: none;
  outline: none;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  &:active {
    background: #f07080; // 点击深色反馈
  }
}

// 工具类样式（补充缺失的flex基础样式）
.u-flex {
  display: flex;
}
.u-row-center {
  align-items: center;
  justify-content: center;
}
.u-row-between {
  justify-content: space-between;
}
.u-m-t-10 {
  margin-top: 10rpx;
}
.u-m-t-16 {
  margin-top: 16rpx;
}
.u-m-t-20 {
  margin-top: 20rpx;
}
.u-m-t-30 {
  margin-top: 30rpx;
}
.u-m-x-16 {
  margin-left: 16rpx;
  margin-right: 16rpx;
}
.u-m-l-12 {
  margin-left: 12rpx;
}
</style>