<template>
  <div class="event-detail-page">
    <!-- 活动封面 -->
    <div class="event-cover">
      <swiper>
        <swiper-item v-for="(item, imgIndex) in eventDetail.ImageList" :key="imgIndex">
          <image class="cover-image" :src="item.ImageUrl" mode="aspectFill" />
        </swiper-item>
      </swiper>

      <div class="event-status"
        :class="new Date(eventDetail.ACTIVITY_ENDDATE).getTime() < new Date().getTime() ? 'status-ended' : new Date(eventDetail.ACTIVITY_STARTDATE).getTime() < new Date().getTime() ? 'status-draft' : 'status-active'">
        {{ getStatusText(eventDetail) }}
      </div>
    </div>

    <!-- 活动基本信息 -->
    <div class="event-header">
      <div class="event-title">{{ eventDetail.ACTIVITY_NAME }}</div>

      <div class="event-meta">
        <div class="meta-item">
          <span class="meta-icon">📅</span>
          <span class="meta-text">{{ eventDetail.ACTIVITY_STARTDATE ? eventDetail.ACTIVITY_STARTDATE : ""
            }}{{ eventDetail.ACTIVITY_ENDDATE ? `-` + eventDetail.ACTIVITY_ENDDATE : "" }}</span>
        </div>
        <div class="meta-item">
          <span class="meta-icon">📍</span>
          <span class="meta-text">{{ eventDetail.ACTIVITY_LOCATION }}</span>
        </div>
        <div class="meta-item">
          <span class="meta-icon">👥</span>
          <span class="meta-text">
            {{ eventDetail.MAXIMUM_CAPACITY || '不限' }}人
          </span>
        </div>
      </div>
    </div>

    <!-- 活动内容 -->
    <div class="content-section">
      <div class="section-title">活动介绍</div>
      <text class="content-text">{{ eventDetail.ACTIVITY_INFO }}</text>
    </div>

    <!-- 报名按钮 -->
    <div class="action-section" v-if="errorType > 0">
      <div
        :class="errorType === 1 || errorType === 2 || errorType === 3 || errorType === 5 ? 'action-btn action-registered' : 'action-btn action-normal'"
        @click="handleAction">
        <span class="btn-text">{{ errorType === 0 ? '' : errorType === 1 ? '活动已结束' : errorType === 2 ? '活动已经开始' :
          errorType === 3 ? '已报名' : errorType === 4 ? '重新报名' : errorType === 5 ? '未参加' : errorType === 6 ? '立即报名' : ''
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      eventId: "",
      eventDetail: {},
      hasRegistered: false, // 是否已报名当前活动
      errorType: 0, // 0 默认  1 表示活动已经结束  2 表示活动已经开始  3 表示已经报名该活动   4 表示报过名 但是取消了  5 报名了 但是没有参加  6 从未报名
      statusDetail: {},// 状态详情
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  onLoad(query) {
    if (query.id) {
      this.eventId = query.id;
    }
    // 活动详情
    this.loadEventDetail();

  },
  onShow() {
    this.loadEventDetail();
  },
  methods: {
    // 加载活动详情
    async loadEventDetail() {
      const req = {
        ACTIVITYId: this.eventId,
        type: 'encryption'
      }
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      const data = await this.$api.$posMemberPost("/Member/GetACTIVITYDetail", req)
      uni.hideLoading();

      let detail = data.Result_Data
      console.log('详情djaksjda', detail);
      // 判断一下当前活动是不是已经开始 或结束了
      let nowTime = new Date().getTime()
      if (new Date(detail.ACTIVITY_ENDDATE).getTime() < nowTime) {
        // 1 表示活动已经结束
        this.errorType = 1
      } else if (new Date(detail.ACTIVITY_STARTDATE).getTime() < nowTime) {
        // 2 表示活动已经开始
        this.errorType = 2
      }
      this.eventDetail = detail;
      if (this.errorType > 0) {

      } else {

      }
      // 查询当前用户是否报名了 这个活动
      this.checkRegistrationStatus()
    },

    // 检查报名状态
    async checkRegistrationStatus() {
      const req = {
        SearchParameter: {
          ACTIVITY_IDS: this.eventId,
          MEMBERSHIP_IDS: this.user.MEMBERSHIP_ID,
        },
        PageIndex: 1,
        PageSize: 999999,
        type: 'encryption'
      }
      const data = await this.$api.$posMemberPost("/Member/GetACTIVITYDETAILList", req)
      let list = data.Result_Data.List
      // 若这个list 有值 则说明之前报名过 看看是啥状态
      console.log('这个用户这个活动的报名详细', list);
      if (list && list.length > 0) {
        let detail = list[0]
        if (detail.ACTIVITYDETAIL_STATE === 1) {
          // 1 表示当前是报名状态
          this.hasRegistered = true;
          // 3 表示已经报名该活动
          this.errorType = 3
        } else if (detail.ACTIVITYDETAIL_STATE === 0) {
          // 0 表示报过名 但是取消了 
          // 4 表示报过名 但是取消了 
          this.errorType = 4
        } else if (detail.ACTIVITYDETAIL_STATE === 2) {
          // 2 报名了 但是没有参加
          // 5 报名了 但是没有参加
          this.errorType = 5
        }
        this.statusDetail = detail
      } else {
        this.hasRegistered = false;
        // 6 从没报过名
        this.errorType = 6
        // 没查到 说明这个活动当前用户还没报名 
      }
    },

    // 处理按钮点击
    handleAction() {
      if (this.errorType === 1) {
        uni.showToast({
          title: "活动已结束",
          icon: 'none'
        })
      } else if (this.errorType === 2) {
        uni.showToast({
          title: "活动已开始",
          icon: 'none'
        })
      } else if (this.errorType === 3) {
        let _this = this
        uni.showModal({
          title: "注意",
          content: "您已报名成功，确认要取消报名？",
          success: async (res) => {
            if (res.confirm) {
              let req = {
                ..._this.statusDetail,
                ACTIVITYDETAIL_STATE: 0,
                type: 'encryption'
              }
              const data = await _this.$api.$posMemberPost("/Member/SynchroACTIVITYDETAIL", req)
              if (data.Result_Code === 100) {
                uni.showToast({
                  title: '取消成功！',
                  icon: 'none'
                })
                _this.errorType = 0
                _this.eventDetail = {}
                _this.hasRegistered = false
                _this.statusDetail = {}
                _this.loadEventDetail();
              } else {
                uni.showToast({
                  title: data.Result_Desc,
                  icon: 'none'
                })
              }
            }
          },
        });
      } else if (this.errorType === 4) {
        let _this = this
        uni.showModal({
          title: "注意",
          content: "您有报名记录，是否重新报名",
          success: async (res) => {
            if (res.confirm) {
              let req = {
                ..._this.statusDetail,
                ACTIVITYDETAIL_STATE: 1,
                type: 'encryption'
              }
              const data = await _this.$api.$posMemberPost("/Member/SynchroACTIVITYDETAIL", req)
              if (data.Result_Code === 100) {
                uni.showToast({
                  title: '重新报名成功！',
                  icon: 'none'
                })
                _this.errorType = 0
                _this.eventDetail = {}
                _this.hasRegistered = false
                _this.statusDetail = {}
                _this.loadEventDetail();
              } else {
                uni.showToast({
                  title: data.Result_Desc,
                  icon: 'none'
                })
              }
            }
          },
        });
      } else if (this.errorType === 5) {

      } else if (this.errorType === 6) {
        // 跳转到报名页面
        uni.navigateTo({
          url: `/pages/eventRegistration/registration?eventId=${this.eventId}`
        });
      }



      // if (this.hasRegistered === true) {
      //   uni.showToast({
      //     title: "已报名！请勿重复报名",
      //     icon: 'none'
      //   })

      // } else {
      //   // 跳转到报名页面
      //   uni.navigateTo({
      //     url: `/pages/eventRegistration/registration?eventId=${this.eventId}`
      //   });
      // }
    },

    // 跳转到报名信息页面
    goToRegistrationInfo() {
      uni.navigateTo({
        url: `/pages/eventRegistration/registration?eventId=${this.eventId}`
      });
    },

    // 获取活动状态文本
    getStatusText(status) {
      if (new Date(status.ACTIVITY_ENDDATE).getTime() < new Date().getTime()) {
        return '已结束'
      } else if (new Date(status.ACTIVITY_STARTDATE).getTime() < new Date().getTime()) {
        return '已开始'
      } else {
        return '报名中'
      }
    },
  }
};
</script>

<style scoped lang="less">
.event-detail-page {
  width: 100vw;
  min-height: 100vh;
  background: #f8fafc;
  overflow-y: scroll;

  .event-cover {
    position: relative;
    width: 100%;
    height: 300rpx;
    overflow: hidden;

    .cover-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .event-status {
      position: absolute;
      top: 40rpx;
      right: 40rpx;
      padding: 16rpx 32rpx;
      border-radius: 24rpx;
      font-size: 24rpx;
      font-weight: 600;
      backdrop-filter: blur(10rpx);

      &.status-active {
        background: rgba(34, 197, 94, 0.9);
        color: white;
      }

      &.status-ended {
        background: rgba(107, 114, 128, 0.9);
        color: white;
      }

      &.status-draft {
        background: rgba(251, 146, 60, 0.9);
        color: white;
      }
    }
  }

  .event-header {
    background: white;
    padding: 24rpx;
    margin: -40rpx 32rpx 32rpx;
    border-radius: 24rpx 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;

    .event-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #1f2937;
      line-height: 1.4;
      margin-bottom: 12rpx;
    }

    .event-meta {
      .meta-item {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .meta-icon {
          font-size: 24rpx;
          margin-right: 16rpx;
          width: 40rpx;
          text-align: center;
        }

        .meta-text {
          font-size: 24rpx;
          color: #374151;
          line-height: 1.4;
        }
      }
    }
  }

  .content-section,
  .requirements-section,
  .notice-section {
    background: white;
    margin: 0 32rpx 32rpx;
    padding: 32rpx;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

    .section-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 12rpx;
      position: relative;
      padding-left: 16rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8rpx;
        bottom: 8rpx;
        width: 6rpx;
        background: #22c55e;
        border-radius: 3rpx;
      }
    }

    .content-text {
      font-size: 24rpx;
      color: #374151;
      line-height: 1.6;
      white-space: pre-wrap;
    }
  }

  .notice-section {
    margin: 0 32rpx calc(24rpx + env(safe-area-inset-bottom) + 24rpx + 28rpx + 40rpx);
  }

  .action-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-top: 1rpx solid #f0f0f0;
    padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
    z-index: 100;

    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: 600;
      transition: all 0.3s ease;
      border: 2rpx solid #e5e7eb;

      &.action-normal {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: white;
        border-color: #22c55e;

        &:active {
          opacity: 0.9;
        }

        .btn-text {
          margin-right: 12rpx;
        }

        .btn-icon {
          font-size: 28rpx;
        }
      }

      &.action-registered {
        background: #f3f4f6;
        color: #9ca3af;
        border-color: #e5e7eb;

        &:active {
          background: #e5e7eb;
        }

        .btn-text {
          margin-right: 12rpx;
        }

        .registered-icon {
          font-size: 24rpx;
          color: #6b7280;
        }
      }

      &.action-full {
        background: #f3f4f6;
        color: #9ca3af;
        border-color: #e5e7eb;

        &:active {
          background: #e5e7eb;
        }
      }

      &.action-disabled {
        background: #f9fafb;
        color: #d1d5db;
        border-color: #f3f4f6;
      }
    }
  }
}

.event-detail-page::-webkit-scrollbar {
  display: none;
}
</style>