<template>
  <view class="act-detail">
    <image
      class="banner"
      v-if="detail && detail.img"
      :src="detail.img"
      mode="widthFix"
    ></image>
    <view class="detail-box" v-if="detail">
      <view class="title">{{ detail.title }}</view>
      <view class="time">
        {{ detail.start_time }} - {{ detail.open_time }}
      </view>
    </view>
    <view class="detail-box" v-if="detail">
      <view class="title">活动详情</view>
      <image
        class="img"
        v-if="detail && detail.intro_img"
        :src="detail.intro_img"
        mode="widthFix"
      ></image>
      <view
        v-else-if="detail && detail.intro"
        class="desc"
        v-html="detail.intro"
      />
    </view>
    <view class="detail-box" v-if="detail && detail.desc">
      <view class="title">活动规则</view>
      <view class="desc" v-html="detail.desc" />
    </view>
    <view class="act-footer" v-if="detail && detail.is_attend === 1">
      <button v-if="detail.status === 0" class="btn btn-gray">未开始</button>
      <button v-else-if="detail.status === 2" class="btn btn-gray">
        活动已结束
      </button>
      <button v-else-if="detail.user_status === 0" class="btn btn-gray">
        审核中
      </button>
      <button v-else-if="detail.user_status === 1" class="btn btn-gray">
        已参与
      </button>
      <button v-else-if="detail.user_status === 2" class="btn btn-gray">
        已拒绝
      </button>
      <button v-else class="btn" @click="handleJoin">立即参与</button>
    </view>
  </view>
</template>

<script>
import login from "@/lib/utils/login";
import { getActivityDetail, joinActivity } from "@/lib/api/activity";
import {
  requestSubscribeMessage,
  defaultTemplateIds,
  activityTemplateId,
} from "@/lib/utils/wxSubscribe";

export default {
  name: "PageActivityDetail",
  data() {
    return {
      userInfo: null,
      id: 0,
      detail: null,
    };
  },
  computed: {
    isLogin() {
      return (
        !!this.userInfo && !!this.userInfo.session && !!this.userInfo.phone
      );
    },
  },
  async onLoad(data) {
    this.id = data.id;
    this.userInfo = await login.getUserInfo();
  },
  onShow() {
    this.loadDetail();
  },
  onShareAppMessage() {
    return {
      title: this.detail.title,
      imageUrl:
        this.detail.img ||
        "https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/7c221479f67a19a85ec1b8f5916436c1.jpg",
      path: "/pages/activity/detail?id=" + this.id,
    };
  },
  onShareTimeline() {
    return {
      title: this.detail.title,
      imageUrl:
        this.detail.img ||
        "https://chujianchaowan.oss-cn-beijing.aliyuncs.com/images/7c221479f67a19a85ec1b8f5916436c1.jpg",
      path: "/pages/activity/detail?id=" + this.id,
    };
  },
  methods: {
    async loadDetail() {
      const res = await getActivityDetail(this.id);
      this.detail = res.data;
      if (res.data.title) {
        uni.setNavigationBarTitle({
          title: res.data.title,
        });
      }
    },
    async handleJoin() {
      if (!this.isLogin) {
        await new Promise((resolve) => {
          login.wxLogin((userInfo) => {
            this.userInfo = userInfo;
            resolve();
          });
        });
        await this.loadDetail();
      }

      // #ifdef MP-WEIXIN
      if (this.detail.template) {
        await requestSubscribeMessage([
          ...defaultTemplateIds,
          activityTemplateId,
        ]).catch(() => void 0);
      }
      // #endif

      this.joinActivity();
    },
    async joinActivity() {
      const { data, errno, errmsg } = await joinActivity(this.id);
      if (errno === 10000) {
        uni.showToast({
          icon: "none",
          title: data.desc,
          duration: 3000,
        });
        this.detail.user_status = data.status;
      } else {
        uni.showToast({
          icon: "none",
          title: errmsg,
          duration: 3000,
        });
      }
    },
  },
};
</script>
<style lang="scss">
.act-detail {
  min-height: 100vh;
  background: #f5f5f5;
  box-sizing: border-box;
  padding-bottom: 160rpx;
}
.banner {
  margin-bottom: -40rpx;
}
.banner,
.img {
  width: 100%;
}
.detail-box {
  box-sizing: border-box;
  position: relative;
  width: 670rpx;
  border-radius: 20rpx;
  background: #fff;
  margin: 0 auto 40rpx;
  padding: 20rpx 40rpx;
  .title {
    font-size: 32rpx;
    font-weight: bolder;
    line-height: 2;
    margin-bottom: 20rpx;
  }
  .desc,
  .time {
    font-size: 28rpx;
    line-height: 1.5;
  }
  .time {
    color: #9496a5;
  }
  .img {
    margin-bottom: 30rpx;
  }
}
.act-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 24rpx 48rpx 32rpx;
  background: #ffffff;
  letter-spacing: 5rpx;
  .btn {
    display: block;
    width: 100%;
    border-radius: 0;
    height: 96rpx;
    line-height: 96rpx;
    background: #08c2c3;
    font-size: 36rpx;
    font-weight: 500;
    color: #292d3b;
    &.btn-gray {
      background: #9496a5;
    }
    &::after {
      display: none;
    }
  }
  .act-footer-desc {
    text-align: center;
    margin-top: 16rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #9496a5;
    line-height: 34rpx;
    letter-spacing: 0rpx;
  }
}
</style>
