<template>
  <view class="mysignupList">
    <van-tabs
      :active="data.ExamStatus"
      title-inactive-color="#444444"
      title-active-color="#00ACF9"
      line-height="0"
      @change="change"
    >
      <van-tab title="全部" :name="0"></van-tab>
      <van-tab title="正常" :name="1"></van-tab>
      <van-tab title="取消" :name="2"></van-tab>
    </van-tabs>
    <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">
          <view
            class="item"
            v-for="(x, i) in g"
            :key="i"
            @click="goActiveDetail(x)"
          >
            <view class="box-top">
              <image
                :src="x.CoverImg"
                mode="aspectFill"
                style="
                  width: 220rpx;
                  height: 134rpx;
                  border-radius: 16rpx;
                  box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
                "
              ></image>
              <view style="margin-left: 20rpx; height: 134rpx">
                <view class="box-title">{{ x.ActivityName }}</view>
                <view style="font-size: 12px; color: #666666; margin-top: 8px"
                  >活动类型:{{ x.TypeName }}</view
                >
              </view>
            </view>
            <view class="box-top-r-b">
              <van-icon
                name="contact"
                size="28rpx"
                color="#999999"
                style="margin-right: 5px"
              ></van-icon>
              <view
                style="
                  max-width: 280rpx;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  font-size: 24rpx;
                "
                >{{ x.LinkMan }}</view
              >
              <van-icon
                name="friends-o"
                size="28rpx"
                color="#999999"
                style="margin-right: 10rpx; margin-left: 20rpx"
              ></van-icon>
              <view style="font-size: 24rpx">{{ x.PeopleNum }}</view>
              <van-icon
                name="phone-o"
                size="28rpx"
                color="#999999"
                style="margin-right: 10rpx; margin-left: 20rpx"
              ></van-icon>
              <view style="font-size: 24rpx">{{ x.LinkTel }}</view>
              <van-icon
                name="star-o"
                size="28rpx"
                :color="mainColor"
                style="margin-right: 10rpx; margin-left: 20rpx"
              ></van-icon>
              <view
                v-if="x.Money > 0 && x.TotalPoint == 0"
                :style="{ color: mainColor }"
                >{{ x.Money }}元</view
              >
              <view
                v-if="x.Money == 0 && x.TotalPoint > 0"
                :style="{ color: mainColor }"
                >{{ x.TotalPoint }}点</view
              >
              <view
                v-if="x.Money == 0 && x.TotalPoint == 0"
                :style="{ color: mainColor }"
                >免费</view
              >
            </view>
            <view class="box-Remark">
              <view class="box-Remark-top">
                <view style="width: calc(100vw - 220rpx)">
                  备注：{{ x.Remark == "" ? "无" : x.Remark }}
                </view>
                <view
                  class="box-Remark-top-r"
                  style="color: #00c6c1"
                  v-if="x.Status != 1 && x.IsApplyForCancel != 1"
                  >已报名</view
                >
                <view
                  class="box-Remark-top-r"
                  style="color: #00c6c1"
                  v-if="
                    x.Status != 1 &&
                    x.IsApplyForCancel == 1 &&
                    x.ApplyForCancelStatus == 0
                  "
                  >待审核</view
                >
                <view
                  class="box-Remark-top-r"
                  style="color: #00c6c1"
                  v-if="
                    x.Status != 1 &&
                    x.IsApplyForCancel == 1 &&
                    x.ApplyForCancelStatus == 1
                  "
                  >通过</view
                >
                <view
                  class="box-Remark-top-r"
                  style="color: #ff4646"
                  v-if="
                    x.Status != 1 &&
                    x.IsApplyForCancel == 1 &&
                    x.ApplyForCancelStatus == 2
                  "
                  >拒绝</view
                >
                <view
                  class="box-Remark-top-r"
                  style="color: #ff4646"
                  v-if="x.Status == 1"
                  >已取消</view
                >
              </view>
              <view
                class="box-Remark-b"
                v-if="x.Status != 1 && x.IsApplyForCancel != 1"
              >
                <view class="box-Remark-btn" @click.stop="cancel(x, i)">
                  取消
                </view>
              </view>
              <view
                style="width: calc(100vw - 110px)"
                v-if="x.CancelRemark != null && x.CancelRemark != ''"
              >
                取消备注：{{ x.CancelRemark == "" ? "无" : x.CancelRemark }}
              </view>
              <view
                style="width: calc(100vw - 110px)"
                v-if="x.RejectRemark != null && x.ApplyForCancelStatus == 2"
              >
                审核未通过理由：{{
                  x.RejectRemark == "" ? "无" : x.RejectRemark
                }}
              </view>
            </view>
          </view>
        </view>
        <view style="margin: 20rpx 0">
          <Loadmore :state="pageState" />
        </view>
      </scroll-view>
    </view>
    <van-popup :show="show" closeable @close="show = false">
      <view
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          background: #fff;
          width: 650rpx;
        "
      >
        <view
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 140rpx;
            font-size: 30rpx;
          "
        >
          是否取消订单？
        </view>
        <view
          style="
            display: flex;
            flex-direction: column;
            width: 100%;
            font-size: 30rpx;
            box-sizing: border-box;
            padding: 0 30rpx;
          "
        >
          备注
          <textarea
            style="margin-top: 10rpx; font-size: 30rpx"
            v-model="cancelRemark"
            placeholder="请输入备注"
            placeholder-style="color:#999"
          />
        </view>
        <view
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 100rpx;
            border-top: 1px solid #f5f5f5;
            width: 100%;
            font-size: 30rpx;
          "
        >
          <view
            style="
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 30rpx;
            "
            @click="show = false"
          >
            取消
          </view>
          <view
            style="
              width: 50%;
              color: #00acf9;
              font-size: 30rpx;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            @click="queren"
          >
            确定
          </view>
        </view>
      </view>
    </van-popup>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import Loadmore from "./loadmore.vue";
import { activityJoinList, cancelSignUp } from "../api/activity";
export default {
  components: {
    Loadmore,
  },
  setup() {
    let data = reactive({
      pageTitle: "报名列表",
      showAuth: false,
      u: {},
      show: false,
      current: 0,
      mainColor: "#00acf9",
      contentHeight: 0,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        EnrollState: 3,
      },
      PageCount: 1,
      g: [],
      loading: false,
      pageState: "more",
      bmobj: {},
      cancelRemark: "",
      tabbarH: 0,
      timer: null, //防抖
    });

    let methods = {
      change(e) {
        data.current = e.detail.name;
        if (e.detail.name == 0) {
          data.msg.EnrollState = 3;
        } else {
          data.msg.EnrollState = e.detail.name;
        }
        data.msg.pageIndex = 1;
        data.g = [];
        that.getList();
      },
      getfzuj() {
        data.current = 0;
        data.msg.pageIndex = 1;
        data.g = [];
        that.getList();
      },
      async getList() {
        let res = await activityJoinList(data.msg);
        if (res) {
          if (data.timer) data.timer = null;
          if (data.msg.pageIndex === 1) {
            data.g = res.data.pageData;
          } else {
            data.g = data.g.concat(res.data.pageData);
          }
          data.PageCount = res.data.pageCount;
          if (data.PageCount == 1) {
            data.pageState = "none";
          }
        }
      },
      lower(e) {
        if (data.msg.pageIndex < data.PageCount) {
          data.pageState = "loading";
          data.msg.pageIndex++;
          if (data.timer) clearTimeout(data.timer);
          data.timer = setTimeout(() => {
            that.getList();
          }, 1000);
        } else {
          data.pageState = "none";
        }
      },
      cancel(x, i) {
        data.bmobj = {
          ActivityId: x.ActivityId,
          index: i,
          Id: x.Id,
        };

        data.show = true;
      },
      //取消报名
      async queren() {
        let res = await cancelSignUp({
          ActivityId: data.bmobj.ActivityId,
          CancelRemark: data.cancelRemark,
          Id: data.bmobj.Id,
        });
        if (res) {
          uni.showToast({
            title: "操作成功",
            icon: "success",
          });
          if (res.data != 1) {
            if (data.msg.EnrollState == 1) {
              data.g.splice(data.bmobj.index, 1);
            } else {
              data.g[this.bmobj.index].Status = 1;
            }
          } else {
            data.g[data.bmobj.index].IsApplyForCancel = 1;
            data.g[data.bmobj.index].CancelRemark = data.cancelRemark;
          }
          data.show = false;
        }
      },
      //跳转至活动详情
      goActiveDetail(x) {
        uni.navigateTo({
          url: "/pages/activity/activityDetails?Id=" + x.ActivityId,
        });
      },
    };
    onMounted(() => {});
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>
<style>
.mysignupList {
  width: 100%;
  height: calc(100vh - 50px);
  background: #fff;
  position: relative;
}

.mysignupList .loading {
  width: 180rpx;
  height: 180rpx;
  background: #000000;
  opacity: 0.7;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 50%;
  top: 30%;
  margin-left: -100rpx;
  z-index: 999;
}
.mysignupList .details {
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}
.mysignupList .item {
  margin-bottom: 30rpx;
}
.mysignupList .box-top {
  width: 100%;
  height: 134rpx;
  display: flex;
  align-items: center;
}
.mysignupList .box-title {
  width: calc(100vw - 60rpx - 220rpx - 20rpx);
  font-size: 30rpx;
  color: #000000;
  font-weight: 500;
  line-height: 44rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mysignupList .box-top-r-b {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666666;
  margin-top: 20rpx;
}
.mysignupList .box-Remark {
  width: 100%;
  box-sizing: border-box;
  padding: 28rpx 20rpx;
  font-size: 22rpx;
  color: #777777;
  background: #ededed;
  margin-top: 26rpx;
  border-radius: 12rpx;
}
.mysignupList .box-Remark-top {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.mysignupList .box-Remark-top-r {
  font-size: 22rpx;
}
.mysignupList .box-Remark-b {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10rpx;
}
.mysignupList .box-Remark-btn {
  width: 120rpx;
  height: 50rpx;
  border-radius: 25rpx;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #333;
}
.mysignupList .scroll-box {
  height: calc(100vh - 180rpx);
  width: calc(100vw);
  overflow: hidden;
}
</style>
