<template>
  <view class="point-mall-container">
    <!-- 顶部导航栏 -->
    <view class="navbox">
      <view class="status_bar"></view>
      <uni-nav-bar
        left-icon="left"
        title="积分商城"
        @clickLeft="goBack"
        color="#8B2316"
        :border="false"
        backgroundColor="#eeeeee"
      >
        <template v-slot:right>
          <view class="nav-actions">
            <view class="btn" @click="goSearch">搜索</view>
          </view>
        </template>
      </uni-nav-bar>
    </view>
    <!-- <uni-nav-bar
			left-icon="left"
			title="积分商城"
			@clickLeft="goBack"
			fixed
			color="#e74c3c"
			height="180rpx"
			:border="false"
			backgroundColor="#ffffff"
		>
			<template v-slot:right>
				<text class="search-btn" @click="goToSearch">搜索</text>
			</template>
		</uni-nav-bar> -->

    <!-- 轮播图横幅 -->
    <view class="banner-section">
      <view class="swipemask">
        <view class="banner-subtitle" v-if="bannerList.length > 0">{{
          bannerList[currentBannerIndex].title
        }}</view>
        <view class="dotbox">
          <view
            class="circle"
            :class="{ active: currentBannerIndex == index }"
            v-for="(banner, index) in bannerList"
            :key="banner.id"
          ></view>
        </view>
      </view>
      <swiper
        class="banner-swiper"
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        indicator-active-color="#8B2316"
		@change="onSwiperChange"
      >
        <swiper-item v-for="(banner, index) in bannerList" :key="banner.uuid">
          <view class="banner-item" @click="goToBannerDetail(banner)">
            <image
              class="banner-image"
              :src="banner.headImg"
              mode="aspectFill"
            ></image>
            <!-- <view class="banner-content tips">
              <view class="banner-text green">{{ banner.title }}</view>
            </view> -->
          </view>
        </swiper-item>
        <!-- 如果没有数据，显示默认轮播图 -->
        <swiper-item v-if="bannerList.length === 0">
          <view class="banner-item">
            <image
              class="banner-image"
              src="/static/banner-bg.jpg"
              mode="aspectFill"
            ></image>
            <view class="banner-content">
              <view class="banner-text green"
                >第二届京津冀感染肝病高峰论坛&</view
              >
              <view class="banner-text green"
                >第九届河北省感染科医师培训班</view
              >
              <view class="banner-text orange">2016.10.14-2016.10.16</view>
              <view class="banner-text orange">河北•石家庄</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 筛选排序栏 -->
    <view class="filter-bar">
      <view class="filter-item" @click="showFilter">
        <text class="filter-text" :class="{ active: selectedTagName }">{{
          selectedTagName || "筛选"
        }}</text>
        <up-image
          :src="selectedTagName ? filterOn : filter"
          width="26rpx"
          height="26rpx"
        ></up-image>
      </view>
      <view class="filter-divider"></view>
      <view class="filter-item" @click="showSort">
        <text class="filter-text" :class="{ active: selectedSortValue }">{{
          selectedSortLabel || "排序"
        }}</text>
        <up-image
          :src="selectedSortValue ? filterOn : filter"
          width="26rpx"
          height="26rpx"
        ></up-image>
      </view>
    </view>
    <!-- 筛选下拉 -->
    <view v-if="showFilterDropdown" class="dropdown">
      <!-- <view 
				class="dropdown-item"
				:class="{ active: selectedTagId === null }"
				@click="onTagSelect({ id: null, name: '全部' })">
				全部
			</view> -->
      <view
        v-for="tag in tagList"
        :key="tag.id"
        class="dropdown-item"
        :class="{ active: selectedTagId === tag.id }"
        @click="onTagSelect(tag)"
      >
        {{ tag.name }}
      </view>
    </view>

    <!-- 排序下拉 -->
    <view v-if="showSortDropdown" class="dropdown">
      <view
        v-for="opt in sortOptions"
        :key="opt.value"
        class="dropdown-item"
        :class="{ active: selectedSortValue === opt.value }"
        @click="onSortSelect(opt)"
      >
        {{ opt.label }}
      </view>
    </view>

    <!-- 商品网格（上拉加载 + 下拉刷新） -->
    <scroll-view
      class="product-grid"
      scroll-y
      refresher-enabled="true"
      :refresher-triggered="refresherTriggered"
      @scrolltolower="getGoodsList"
      @refresherrefresh="onRefresherRefresh"
      :lower-threshold="100"
    >
      <view class="grid-wrap">
        <view
          class="product-item"
          v-for="(product, index) in products"
          :key="product.uuid || index"
          
          @click="goToProductDetail(product)"
        >
          <view class="product-image-container">
            <image
              class="product-image"
              :src="product.image"
              mode="aspectFill"
            ></image>
          </view>
          <view class="product-info">
            <text class="product-title">{{ product.title }}</text>
            <text class="product-price">{{ product.price }}积分</text>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 加载与无更多提示 -->
    <view class="list-footer" v-if="isLoadingMore">
      <text>加载中...</text>
    </view>
    <view class="list-footer" v-else-if="noMore && products.length > 0">
      <text>没有更多了</text>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <view class="nav-item active" @click="goToMyRedemption">
        <!-- <view class="nav-icon">💰</view> -->
        <up-image :src="pointImg" width="44rpx" height="44rpx"></up-image>
        <text class="nav-text">我的兑换</text>
      </view>
      <view class="nav-divider"></view>
      <view class="nav-item" @click="goToBuyPoints">
        <!-- <view class="nav-icon">🛒</view> -->
        <up-image :src="buyPointImg" width="44rpx" height="44rpx"></up-image>
        <text class="nav-text">购买积分</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import goods_api from "@/api/goods_api";
import docUrl from "@/utils/docUrl";
import pointImg from "@/static/integralticket.png";
import buyPointImg from "@/static/buy_points.png";
import filter from "@/static/triangle_normal.png";
import filterOn from "@/static/triangle_green_theme.png";
// 轮播图数据
const bannerList = ref([]);
const currentBannerIndex = ref(0);

// 商品数据
const products = ref([]);
const page = ref(1);
const pageSize = ref(10);
const isLoadingMore = ref(false);
const noMore = ref(false);
const refresherTriggered = ref(false);
const onSwiperChange = (e) => {
  currentBannerIndex.value = e.detail.current;
};

// 筛选相关
const tagList = ref([]);
const selectedTagId = ref(null);
const selectedTagName = ref("");
const showFilterDropdown = ref(false);

// 排序相关
const showSortDropdown = ref(false);
const selectedSortValue = ref(null);
const selectedSortLabel = ref("");
const sortOptions = ref([
  { label: "积分从小到大", value: 4 },
  { label: "积分从大到小", value: 3 },
  { label: "兑换从多到少", value: 5 },
  { label: "兑换从少到多", value: 6 },
]);

// 方法
const goBack = () => {
  uni.navigateBack();
};

const goToSearch = () => {
  uni.navigateTo({
    url: "/pages_app/search/search",
  });
};

const showFilter = () => {
  showFilterDropdown.value = !showFilterDropdown.value;
  showSortDropdown.value = false;
};

const showSort = () => {
  showSortDropdown.value = !showSortDropdown.value;
  showFilterDropdown.value = false;
};

const onTagSelect = (tag) => {
  selectedTagId.value = tag.id;
  selectedTagName.value = tag.name;
  showFilterDropdown.value = false;
  // 重置并拉取
  products.value = [];
  page.value = 1;
  noMore.value = false;
  getGoodsList();
};

const onSortSelect = (opt) => {
  selectedSortValue.value = opt.value;
  selectedSortLabel.value = opt.label;
  showSortDropdown.value = false;
  products.value = [];
  page.value = 1;
  noMore.value = false;
  getGoodsList();
};

const goToProductDetail = (product) => {
  const id = product.uuid || product.id;
  uni.navigateTo({
    url: `/pages_goods/productDetail/productDetail?id=${id}`,
  });
};
const goSearch = () => {
  uni.sendNativeEvent(
    "goHomeSearch",
    {
      msg: "pointMall",
    },
    (ret) => {
      console.log(ret);
    }
  );
}
const goToMyRedemption = () => {
  uni.navigateTo({
    url: "/pages_goods/myRedemption/myRedemption",
  });
};

const goToBuyPoints = () => {
  uni.navigateTo({
    url: "/pages_app/buyPoint/buyPoint",
  });
};

const goToBannerDetail = (banner) => {
  // 跳转到轮播图详情页面
  uni.navigateTo({
    url: `/pages_app/webview/webview?url=${encodeURIComponent(
      docUrl+banner.path
    )}&title=${banner.title}`,
  });
};

const getGoodsNewsList = () => {
  goods_api
    .goodsNewsList()
    .then((res) => {
      console.log("轮播图数据:", res);
      if (res.code === 200 && res.data && res.data.length > 0) {
        // 处理轮播图数据
        bannerList.value = res.data.map((item) => ({
          uuid: item.uuid,
          title: item.title,
          headImg: docUrl + item.headImg,
          create_date: item.create_date,
          path: item.path,
          agreenum: item.agreenum,
          readnum: item.readnum,
        }));
      } else {
        console.log("轮播图数据为空或请求失败");
      }
    })
    .catch((err) => {
      console.error("获取轮播图数据失败:", err);
      uni.showToast({
        title: "获取数据失败",
        icon: "none",
      });
    });
};

const getGoodsList = () => {
  if (noMore.value || isLoadingMore.value) return;
  isLoadingMore.value = true;
  const tagParam = selectedTagId.value ? selectedTagId.value : "";
  const sortParam = selectedSortValue.value ? selectedSortValue.value : 1;
  goods_api
    .goodsList({
      name: "",
      page: page.value,
      sort: sortParam,
      tag_type: tagParam,
    })
    .then((res) => {
      console.log("商品数据:", res);
      if (
        (res.code === 200 || res.code === "200") &&
        res.data &&
        res.data.list
      ) {
        const list = res.data.list.map((item) => ({
          uuid: item.uuid,
          title: item.name,
          price: item.bonuspoints,
          image: docUrl + item.img,
          times: item.times,
          type: item.type,
          upan: item.upan,
        }));
        products.value = products.value.concat(list);
        const { isLastPage, pageNum } = res.data;
        page.value = pageNum + 1;
        noMore.value = !!isLastPage;
      } else {
        console.log("商品列表为空或请求失败");
      }
    })
    .catch((err) => {
      console.error("获取商品列表失败:", err);
      uni.showToast({ title: "获取商品失败", icon: "none" });
    })
    .finally(() => {
      isLoadingMore.value = false;
    });
};

const getGoodsTagList = () => {
  goods_api.goodsTagList({}).then((res) => {
    console.log("商品类型数据:", res);
    if (res.code === 200 && res.data) {
      tagList.value = res.data.map((i) => ({ id: i.id, name: i.name }));
    }
  });
};

// 下拉刷新处理
const onRefresherRefresh = async () => {
  if (refresherTriggered.value) return;
  refresherTriggered.value = true;
  try {
    // 重置分页和列表
    page.value = 1;
    noMore.value = false;
    isLoadingMore.value = false;
    products.value = [];
    // 重新加载所有数据
    getGoodsNewsList();
    getGoodsTagList();
    await getGoodsList();
  } catch (error) {
    console.error("刷新数据失败:", error);
    uni.showToast({
      title: "刷新失败，请重试",
      icon: "none",
    });
  } finally {
    refresherTriggered.value = false;
  }
};

onMounted(() => {
  getGoodsNewsList();
  // 初始化分页并加载第一页
  page.value = 1;
  noMore.value = false;
  products.value = [];
  getGoodsList();
  getGoodsTagList();
});
</script>

<style scoped lang="scss">
.point-mall-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-bottom: 80px;
}
.nav-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #8b2316;
  padding: 10rpx;
}
/* 搜索按钮样式 */
.search-btn {
  color: #e74c3c;
  font-size: 28rpx;
  padding: 10rpx;
}

/* 轮播图样式 */
.banner-section {
  top: calc(var(--status-bar-height) + 44px);
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  .swipemask {
    width: 100%;
    z-index: 3;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    padding: 0 20rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.7);
	.banner-subtitle{
		color:#fff;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
    .dotbox {
      display: flex;
      align-items: center;

      .circle {
        margin: 0 4rpx;
        width: 16rpx;
        height: 16rpx;
        background-color: #eee;
        border-radius: 50%;
      }
      .circle.active {
        background-color: #8b2316;
      }
    }
  }
}

.banner-swiper {
  height: 200px;
}

.banner-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #87ceeb 0%, #98fb98 50%, #f0e68c 100%);
}

.banner-content {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 5px;
}
.tips {
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);

  color: #fff;
}

.banner-text {
  padding: 6px 12px;
  margin: 3px 0;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .banner-text.green {
	color: #27ae60;
}

.banner-text.orange {
	color: #e67e22;
} */

/* 轮播图指示器样式 */
.banner-swiper ::v-deep .uni-swiper-dots {
  bottom: 10px;
}

.banner-swiper ::v-deep .uni-swiper-dot {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  margin: 0 4px;
}

.banner-swiper ::v-deep .uni-swiper-dot-active {
  background-color: #fff;
}

/* 筛选排序栏样式 */
.filter-bar {
  position: fixed;
  top: calc(var(--status-bar-height) + 44px + 200px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0px 16px;
  height: 88rpx;
  border-bottom: 1px solid #eee;
}

.dropdown {
  position: fixed;
  top: calc(var(--status-bar-height) + 44px + 200px + 88rpx);
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid #eee;
  /* border-bottom: 1px solid #eee; */
}

.dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.dropdown-item.active {
  color: #8b2316;
}

.filter-item {
  display: flex;
  /* align-items: center; */
  flex: 1;
  justify-content: center;
  padding: 8px;
}

.filter-text {
  font-size: 14px;
  color: #333;
  margin-right: 4px;
}

.filter-text.active {
  color: #8b2316;
}

.filter-icon {
  font-size: 10px;
  color: #666;
}

.filter-divider {
  width: 1px;
  height: 20px;
  background-color: #ddd;
}

/* 商品网格样式 */
.product-grid {
  position: fixed;
  top: calc(var(--status-bar-height) + 44px + 200px + 88rpx);
  left: 0;
  right: 0;
  z-index: 1;
  height: calc(
    100vh - var(--status-bar-height) - 44px - 575rpx
  ); /* 预留顶部导航/筛选及底部栏 */
  background-color: #f5f5f5;
}

.grid-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  gap: 16px;
}

.list-footer {
  text-align: center;
  color: #999;
  padding: 12px 0 80px; /* 避开底部吸底栏 */
}

.product-item {
  width: calc(50% - 8px);
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.product-item:active {
  transform: scale(0.98);
}

.product-image-container {
  width: 100%;
  height: 120px;
  overflow: hidden;
  position: relative;
}

.product-image {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.product-info {
  padding: 12px;
}

.product-title {
  font-size: 12px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  font-size: 14px;
  color: #e74c3c;
}

/* 底部导航栏样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #20b2aa;
  display: flex;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
  flex: 1;
  display: flex;

  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: background-color 0.2s ease;
}

/* .nav-item.active {
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	margin: 4px;
} */

.nav-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.nav-text {
  font-size: 13px;
  color: #fff;
  margin-left: 5rpx;
  font-weight: 500;
}

.nav-divider {
  width: 1px;
  height: 40px;
  background-color: #fff;
}
</style>
