<template>
  <div class="activity-list-overlay" v-if="visible">
    <!-- 顶部导航栏 -->
    <div class="activity-list-header">
      <div class="header-back" @click="$emit('close')">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" fill="#333" />
        </svg>
      </div>
      <div class="header-title">活动列表</div>
      <div class="header-right"></div>
    </div>
    <div class="header-subtitle">展示近30天的活动</div>

    <!-- Tab 栏 -->
    <div class="activity-tabs">
      <div v-for="(tab, idx) in tabs" :key="idx" class="activity-tab-item" :class="{ active: currentTab === tab.value }"
        @click="switchTab(tab.value)">
        {{ tab.label }}
        <div class="tab-indicator" v-if="currentTab === tab.value"></div>
      </div>
    </div>

    <!-- 列表区域 -->
    <div class="activity-list-body" ref="listBody" @scroll="handleScroll">
      <!-- 加载中 -->
      <div class="activity-loading" v-if="loading && activityList.length === 0">
        <div class="loading-spinner"></div>
        <span>加载中...</span>
      </div>

      <!-- 空状态 -->
      <div class="activity-empty" v-if="!loading && activityList.length === 0">
        <svg viewBox="0 0 120 120" width="80" height="80">
          <circle cx="60" cy="50" r="35" fill="#f0f0f0" />
          <rect x="40" y="55" width="40" height="30" rx="4" fill="#e0e0e0" />
          <line x1="48" y1="65" x2="72" y2="65" stroke="#ccc" stroke-width="2" />
          <line x1="48" y1="72" x2="65" y2="72" stroke="#ccc" stroke-width="2" />
        </svg>
        <span>暂无活动</span>
      </div>

      <!-- 活动卡片列表 -->
      <div class="activity-card" v-for="(item, index) in activityList" :key="index">
        <div class="card-left">
          <img class="card-thumb" :src="item.topicImage || defaultThumb" alt="" />
        </div>
        <div class="card-right">
          <div class="card-top-row">
            <div class="card-name">{{ item.activityName || '未命名活动' }}</div>
            <div class="card-status" :class="getStatusClass(item)">
              {{ getStatusText(item) }}
            </div>
          </div>
          <div class="card-time">
            <svg viewBox="0 0 16 16" width="14" height="14" class="card-time-icon">
              <path
                d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 12.6A5.6 5.6 0 1113.6 8 5.61 5.61 0 018 13.6zM8.4 4H7v5l4.4 2.6.6-1-3.6-2.1V4z"
                fill="#999" />
            </svg>
            <span>{{ formatTime(item.startTime) }} - {{ formatTime(item.endTime) }}</span>
          </div>
          <div class="card-participants" v-if="item.participantCount !== undefined">
            <svg viewBox="0 0 16 16" width="14" height="14" class="card-people-icon">
              <path d="M8 8a3 3 0 100-6 3 3 0 000 6zm0 1c-3.31 0-6 1.79-6 4v1h12v-1c0-2.21-2.69-4-6-4z" fill="#999" />
            </svg>
            <span>{{ formatCount(item.participantCount) }} 人已参与</span>
          </div>
          <div class="card-action">
            <div class="card-btn" :class="{ 'card-btn-gray': !isActive(item) }" @click.stop="goToActivity(item)">
              {{ item.buttonText || (isActive(item) ? '立即参与 ›' : '查看详情 ›') }}
            </div>
          </div>
        </div>
      </div>

      <!-- 底部加载更多 -->
      <div class="activity-load-more" v-if="loading && activityList.length > 0">
        <div class="loading-spinner small"></div>
        <span>加载中...</span>
      </div>
      <div class="activity-no-more" v-if="!loading && noMore && activityList.length > 0">
        没有更多活动了
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";

export default {
  name: "activityList",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentTab: 1,
      tabs: [
        { label: "进行中", value: 1 },
        { label: "已结束", value: 2 },
        { label: "我参与的", value: 3 },
      ],
      activityList: [],
      total: 0,
      loading: false,
      noMore: false,
      pageNo: 1,
      pageSize: 10,
      defaultThumb:
        "//img10.360buyimg.com/imgzone/jfs/t1/192914/3/22012/24033/623985b9E8508c48b/019e54628504b2dc.png",
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.resetAndLoad();
      }
    },
  },
  methods: {
    resetAndLoad() {
      this.activityList = [];
      this.pageNo = 1;
      this.noMore = false;
      this.loadData();
    },

    switchTab(tabValue) {
      if (this.currentTab === tabValue) return;
      this.currentTab = tabValue;
      this.resetAndLoad();
    },

    loadData() {
      if (this.loading || this.noMore) return;
      this.loading = true;
      var activityType = sessionStorage.getItem("activityType") || "";
      apis1.activityListApi(
        {
          tabType: this.currentTab,
          activityType: Number(activityType),
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        },
        (res) => {
          this.loading = false;
          var records = (res.data && res.data.records) || [];
          this.total = (res.data && res.data.total) || 0;
          if (Array.isArray(records)) {
            this.activityList = this.activityList.concat(records);
            if (this.activityList.length >= this.total) {
              this.noMore = true;
            } else {
              this.pageNo++;
            }
          } else {
            this.noMore = true;
          }
        }
      );
      // 超时保护
      setTimeout(() => {
        if (this.loading) {
          this.loading = false;
        }
      }, 10000);
    },

    handleScroll() {
      var el = this.$refs.listBody;
      if (!el) return;
      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
        this.loadData();
      }
    },

    formatTime(time) {
      if (!time) return "";
      // 支持时间戳或字符串
      var d = new Date(time);
      if (isNaN(d.getTime())) return time;
      var y = d.getFullYear();
      var m = String(d.getMonth() + 1).padStart(2, "0");
      var day = String(d.getDate()).padStart(2, "0");
      var h = String(d.getHours()).padStart(2, "0");
      var min = String(d.getMinutes()).padStart(2, "0");
      return y + "." + m + "." + day + " " + h + ":" + min;
    },

    formatCount(count) {
      if (!count && count !== 0) return "0";
      if (count >= 10000) {
        return (count / 10000).toFixed(1).replace(/\.0$/, "") + "万";
      }
      return String(count).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },

    isActive(item) {
      // 根据 activityStatus 判断是否进行中
      if (item.activityStatus !== undefined) {
        return item.activityStatus === 1 || item.activityStatus === "1";
      }
      // 根据时间判断
      if (item.endTime) {
        return new Date(item.endTime).getTime() > Date.now();
      }
      return this.currentTab === 1;
    },

    getStatusText(item) {
      if (item.activityStatus === 2 || item.activityStatus === "2") return "已结束";
      if (item.activityStatus === 1 || item.activityStatus === "1") return "进行中";
      return this.currentTab === 1 ? "进行中" : "已结束";
    },

    getStatusClass(item) {
      return this.isActive(item) ? "status-active" : "status-ended";
    },

    goToActivity(item) {
      window.location.href = item.actUrl;
    },
  },
};
</script>

<style scoped>
.activity-list-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f5f6fa;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  max-width: 750px;
  margin: 0 auto;
}

/* 顶部导航 */
.activity-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.88rem;
  padding: 0 0.3rem;
  background: #fff;
  flex-shrink: 0;
}

.header-back {
  width: 0.6rem;
  height: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background: #f0f0f5;
}

.header-title {
  font-size: 0.34rem;
  font-weight: bold;
  color: #1a1a2e;
}

.header-right {
  width: 0.6rem;
}

.header-subtitle {
  font-size: 0.22rem;
  color: #999;
  text-align: right;
  padding: 0 0.3rem 0.1rem;
  background: #fff;
  flex-shrink: 0;
}

/* Tab 栏 */
.activity-tabs {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 0.3rem;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.activity-tab-item {
  flex: 1;
  text-align: center;
  font-size: 0.28rem;
  color: #666;
  padding: 0.24rem 0;
  position: relative;
  cursor: pointer;
  transition: color 0.2s;
}

.activity-tab-item.active {
  color: #6c3ce1;
  font-weight: bold;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.56rem;
  height: 0.04rem;
  background: #6c3ce1;
  border-radius: 0.02rem;
}

/* 列表区域 */
.activity-list-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.2rem 0.3rem;
  -webkit-overflow-scrolling: touch;
}

/* 活动卡片 */
.activity-card {
  display: flex;
  background: #fff;
  border-radius: 0.2rem;
  padding: 0.24rem;
  margin-bottom: 0.2rem;
  box-shadow: 0 0.02rem 0.12rem rgba(0, 0, 0, 0.06);
}

.card-left {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.16rem;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 0.24rem;
}

.card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.card-name {
  font-size: 0.28rem;
  font-weight: bold;
  color: #1a1a2e;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 0.16rem;
}

.card-status {
  font-size: 0.2rem;
  padding: 0.04rem 0.16rem;
  border-radius: 0.2rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.status-active {
  background: #eef5ff;
  color: #3b7dff;
}

.status-ended {
  background: #f5f5f5;
  color: #999;
}

.card-time {
  display: flex;
  align-items: center;
  font-size: 0.22rem;
  color: #999;
  margin-top: 0.12rem;
}

.card-time-icon,
.card-people-icon {
  margin-right: 0.08rem;
  flex-shrink: 0;
}

.card-participants {
  display: flex;
  align-items: center;
  font-size: 0.22rem;
  color: #999;
  margin-top: 0.08rem;
}

.card-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.12rem;
}

.card-btn {
  font-size: 0.24rem;
  color: #6c3ce1;
  border: 1px solid #6c3ce1;
  border-radius: 0.3rem;
  padding: 0.08rem 0.28rem;
  cursor: pointer;
  transition: all 0.2s;
}

.card-btn:active {
  background: #6c3ce1;
  color: #fff;
}

.card-btn-gray {
  color: #999;
  border-color: #ddd;
}

.card-btn-gray:active {
  background: #999;
  color: #fff;
}

/* 加载状态 */
.activity-loading,
.activity-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  color: #999;
  font-size: 0.26rem;
}

.loading-spinner {
  width: 0.5rem;
  height: 0.5rem;
  border: 3px solid #f0f0f0;
  border-top-color: #6c3ce1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 0.2rem;
}

.loading-spinner.small {
  width: 0.3rem;
  height: 0.3rem;
  border-width: 2px;
  margin-bottom: 0.1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.activity-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0;
  color: #999;
  font-size: 0.22rem;
}

.activity-load-more .loading-spinner {
  margin-right: 0.1rem;
  margin-bottom: 0;
}

.activity-no-more {
  text-align: center;
  padding: 0.3rem 0;
  color: #ccc;
  font-size: 0.22rem;
}

.activity-empty svg {
  margin-bottom: 0.2rem;
}
</style>
