<template>
  <view class="Jiaheactivity">
    <van-toast id="van-toast" />

    <view class="box-top">
      <view style="display: flex">
        <view
          class="box-t-item"
          :class="{ currentStyle: current == 1 }"
          @click="listType(1)"
          >即将开始</view
        >
        <view
          class="box-t-item"
          :class="{ currentStyle: current == 3 }"
          @click="listType(3)"
          >已结束</view
        >
        <view
          class="box-t-item"
          :class="{ currentStyle: current == 2 }"
          @click="listType(2)"
          >正在参加</view
        >
      </view>
      <view class="box-top-r" @click="show = true">
        <text class="box-top-r-text">{{ ActivityName }}</text>
        <image
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/salesxiala.png"
          style="width: 17px; height: 17px; margin-left: 7px"
        ></image>
      </view>
    </view>
    <view v-show="current == 1 || current == 3">
      <van-empty description="暂无活动" v-if="g.length === 0" />
      <view v-if="g.length > 0" class="scroll-box">
        <scroll-view
          :scroll-y="true"
          :enable-back-to-top="true"
          :enable-flex="true"
          @scrolltolower="lower"
          style="height: 100%"
        >
          <view class="details" v-for="(item, index) in g" :key="index">
            <view class="details-time">
              {{ item.Dateitem }}
            </view>
            <view
              class="details-box"
              v-for="(x, y) in item.list"
              :key="y"
              @click="gourl(x)"
            >
              <view v-if="x.IsJoinActivity == 0">
                <view
                  class="details-box-top-z"
                  v-if="x.TotalMan - x.JoinNum > 0 && current == 1"
                  :style="{ background: mainColor }"
                ></view>
                <view
                  class="details-box-t-positions"
                  v-if="x.TotalMan - x.JoinNum > 0 && current == 1"
                  :style="{ background: mainColor }"
                >
                  <text>{{
                    x.TotalMan - x.JoinNum >= 6
                      ? "可预约"
                      : x.TotalMan - x.JoinNum < 6
                      ? "剩余" + (x.TotalMan - x.JoinNum) + "个空位"
                      : ""
                  }}</text>
                </view>
                <view
                  class="details-box-top-f"
                  v-if="x.TotalMan - x.JoinNum < 1"
                ></view>
                <view
                  class="details-box-t-positions"
                  v-if="x.TotalMan - x.JoinNum < 1"
                  style="background: #e2e2e2; color: #999999"
                >
                  爆满
                </view>

                <view
                  class="details-box-top-f"
                  v-if="x.TotalMan - x.JoinNum > 0 && current == 3"
                ></view>
                <view
                  v-if="current == 3 && x.TotalMan - x.JoinNum > 0"
                  class="details-box-t-positions"
                  style="background: #e2e2e2; color: #999999"
                >
                  已结束
                </view>
              </view>
              <view v-if="x.IsJoinActivity == 1">
                <view
                  class="details-box-top-f"
                  style="background: #00acf9"
                ></view>
                <view
                  class="details-box-t-positions"
                  :style="{ background: '#00ACF9' }"
                >
                  已报名
                </view>
              </view>

              <!-- 内容 -->
              <view class="details-b-center">
                <view class="details-b-center-l">
                  <view
                    style="
                      font-size: 50rpx;
                      color: #1b1d1e;
                      font-weight: 800;
                      font-family: PingFang SC;
                    "
                  >
                    {{ x.DayStr }}
                  </view>
                  <view
                    style="
                      font-size: 28rpx;
                      color: #999999;
                      font-weight: 500;
                      font-family: PingFang SC;
                    "
                  >
                    {{ x.WeekStr }}
                  </view>
                </view>
                <view
                  style="width: 1px; background: #e2e2e2; height: 60px"
                ></view>
                <view class="details-b-center-r">
                  <view class="details-b-title">
                    {{ x.ActivityName }}
                  </view>
                  <view class="details-b-time">
                    报名时间:{{ x.BMStart }}-{{ x.BMEnd }}
                  </view>
                </view>
              </view>
              <view
                style="
                  width: 100%;
                  height: 1px;
                  background: #e2e2e2;
                  margin-top: 10px;
                "
              ></view>
              <view class="details-b-bottom">
                <view class="details-b-time" style="margin-top: 0">
                  活动时间:{{ x.HDStart }}-{{ x.HDEnd }}
                </view>
                <view :style="{ color: pricecolor, 'font-size': '32rpx' }">
                  <text v-if="x.IsFree == 1">免费</text>

                  <view
                    v-if="x.IsFree == 2 && x.Price > 0"
                    style="display: flex; align-items: flex-end"
                  >
                    <text style="font-size: 22rpx">￥</text>
                    <text>{{ x.Price }}</text>
                  </view>
                  <view
                    v-if="x.IsFree == 2 && x.Price == 0"
                    style="display: flex; align-items: flex-end"
                  >
                    <text>{{ x.PointNum }}</text>
                    <text style="font-size: 22rpx">点</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view style="margin: 20rpx 0">
            <Loadmore :state="pageState" />
          </view>
        </scroll-view>
      </view>
    </view>

    <view v-show="current == 2" style="height: calc(100vh - 50px)">
      <signUp ref="children"></signUp>
    </view>

    <van-popup
      :show="show"
      closeable
      round
      position="bottom"
      @close="show = false"
    >
      <view class="pubox">
        <view class="pubox-top">
          <text>选择活动类型</text>
        </view>
        <scroll-view
          scroll-y="true"
          style="
            max-height: calc(100vh * 0.7 - 65px);
            padding-bottom: 20px;
            min-height: calc(100vh * 0.4 - 65px);
          "
        >
          <view class="ht-box">
            <view
              v-for="(x, y) in activityTypeList"
              :key="y"
              class="foritem"
              @click="select(x)"
              :style="{
                color: x.Id == msg.ActivityType ? '#FFF' : '#666666',
                background: x.Id == msg.ActivityType ? '#00ACF9' : '#F9F9F9',
              }"
            >
              {{ x.TypeName }}
            </view>
          </view>
        </scroll-view>
      </view>
    </van-popup>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
  nextTick,
} from "vue";
import Loadmore from "../../components/loadmore.vue";
import signUp from "../../components/signUpList.vue";
import { getActivityTypeList, getActivityList } from "../../api/activity";
export default {
  components: {
    Loadmore,
    signUp,
  },
  setup() {
    let { refs } = getCurrentInstance();
    let data = reactive({
      show: false,
      pageState: "more",
      current: 1,
      showAuth: false,
      u: {},
      msg: {
        pageIndex: 1,
        pageSize: 10,
        ActivityType: 0,
        SelectIsEnd: 0,
      },
      ActivityName: "不限",
      PageCount: 1,
      g: [],
      activityTypeList: [],
      mainColor: "#00ACF9",
      timer: null, //防抖
    });
    let methods = {
      async getActivityType() {
        let res = await getActivityTypeList({});
        if (res) {
          data.activityTypeList = res.data;
          data.activityTypeList.unshift({
            Id: 0,
            TypeName: "不限",
          });
          data.msg.ActivityType = 0;
          data.ActivityName = "不限";
        }
        that.getList();
      },
      async getList() {
        let res = await getActivityList(data.msg);
        if (res) {
          if (data.timer) data.timer = null;
          let arr = that.groupArr(res.data.pageData, "MonthStr");
          let arr2 = arr;
          if (data.msg.pageIndex === 1) {
            data.g = [];
          }
          if (data.g.length > 0) {
            arr2.forEach((x) => {
              if (x.Day == data.g[data.g.length - 1].Day) {
                //判断当前第一条数据和已有的是否同一天 放在一起
                console.log("进入一次");
                data.g[data.g.length - 1].list = data.g[
                  data.g.length - 1
                ].list.concat(x.list);
                arr.splice(0, 1);
              }
            });
          }
          data.g = data.g.concat(arr);
          data.PageCount = res.data.pageCount;
          if (res.data.pageCount == 1) {
            data.pageState = "none";
          }
        }
      },
      groupArr(list, field) {
        var fieldList = [],
          att = [];
        list.map((e) => {
          fieldList.push(e[field]);
        });

        //数组去重
        fieldList = fieldList.filter((e, i, self) => {
          return self.indexOf(e) == i;
        });
        for (var j = 0; j < fieldList.length; j++) {
          //过滤出匹配到的数据
          var arr = list.filter((e) => {
            return e.MonthStr == fieldList[j];
          });
          att.push({
            Dateitem: arr[0].YearStr + "年" + arr[0].MonthStr + "月",
            list: arr,
          });
        }
        return att;
      },
      getorder() {
        //报名成功处理
        data.current = 2; //让他直接跳入我报名
        if (Object.keys(refs).length > 0 && refs.children) {
          //判断
          refs.children.$vm.getfzuj();
        }
      },
      lower(e) {
        if (data.msg.pageIndex < data.PageCount) {
          data.pageState = "loading";
          if (data.timer) clearTimeout(data.timer);
          data.timer = setTimeout(() => {
			 data.msg.pageIndex++;  
            that.getList();
          }, 1000);
        } else {
          data.pageState = "none";
        }
      },

      listType(type) {
        data.current = type;
        if (type == 3) {
          data.msg.SelectIsEnd = 1;
          data.msg.pageIndex = 1;
          that.getList();
        } else if (type == 1) {
          data.msg.pageIndex = 1;
          data.msg.SelectIsEnd = 0;
          that.getList();
        } else {
          refs.children.$vm.getfzuj();
        }
      },
      select(x) {
        data.msg.ActivityType = x.Id;
        data.ActivityName = x.TypeName;
        data.show = false;
        data.msg.pageIndex = 1;
        data.g = [];
        that.getList();
      },
      gourl(x) {
        uni.navigateTo({
          url: "/pages/activity/activityDetails?Id=" + x.Id,
        });
      },
    };
    onMounted(() => {
      that.getActivityType();
    });
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "活动列表",
    });
  },
};
</script>

<style  scoped>
.Jiaheactivity .box-top {
  /* width: 100%; */
  height: 100rpx;
  text-align: center;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx;
}
.box-t-item {
  width: 140rpx;
  height: 60rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #999999;
  margin-right: 20rpx;
  background-color: #edf0f3;
}
.currentStyle {
  color: #fff;
  background-color: #00acf9;
}
.box-top-r {
  width: 200rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #00acf9;
  background: #edf0f3;
  border-radius: 8rpx;
  box-sizing: border-box;
  padding: 0 10rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.Jiaheactivity .details {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
}
.details-time {
  width: 100%;
  font-size: 24rpx;
  color: #111111;
  margin-top: 30rpx;
}
.details-box {
  width: 100%;
  margin-top: 30rpx;
  box-shadow: 0px 6rpx 12rpx 0px rgba(139, 115, 64, 0.16);
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  min-height: 196rpx;
}
.details-box-top-z {
  width: 100%;
  height: 6rpx;
}
.details-box-top-f {
  width: 100%;
  height: 6rpx;
  background: #e2e2e2;
}
.details-box-t-positions {
  height: 40rpx;
  font-size: 20rpx;
  color: #fff;
  background: #b7a264;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 26rpx;
  border-top-right-radius: 12rpx;
  border-bottom-left-radius: 12rpx;
  position: absolute;
  right: 0;
  top: 0;
}
.details-b-center {
  width: 100%;
  display: flex;
  margin-top: 40rpx;
}
.details-b-center-l {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.details-b-center-r {
  width: 1px;
  flex: 1;
  box-sizing: border-box;
  padding: 0 30rpx;
}
.details-b-title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 28rpx;
  color: #111111;
  font-weight: bold;
  font-family: PingFang SC;
}
.details-b-time {
  font-size: 24rpx;
  color: #999999;
  margin-top: 20rpx;
}
.details-b-bottom {
  width: 100%;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30rpx;
}

.Jiaheactivity .scroll-box {
  height: calc(100vh - 100rpx);
  width: calc(100vw);
  overflow: hidden;
}
.Jiaheactivity {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  /* font-family: aa; */
}
.Jiaheactivity .pubox {
  box-sizing: border-box;
  padding: 0 30rpx;
}
.Jiaheactivity .pubox-top {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #111;
}
::-webkit-scrollbar {
  display: none;
}
.Jiaheactivity .foritem {
  height: 60rpx;
  font-size: 24rpx;
  box-sizing: border-box;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  border-radius: 30rpx;
  margin-right: 50rpx;
  margin-bottom: 30rpx;
}
.ht-box {
  box-sizing: border-box;
  padding: 0 30rpx;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}
</style>