<template>
  <view class="act-detail">
    <view v-if="detail" class="detail-head">
      <view class="detail-head-info" v-html="detail.desc" />
      <!-- <view class="detail-head-desc"
        >活动时间：{{ detail.start_time }} 至 {{ detail.open_time }}</view
      > -->
      <!-- <view class="detail-head-desc">开奖时间：{{ detail.open_time }}</view> -->
    </view>
    <view class="title">奖品列表</view>
    <template v-if="detail && detail.skus && detail.skus.length">
      <view class="title-desc">
        <text class="title-item"
          >价值：<text class="price">&yen; {{ detail.total_price }}</text></text
        >
        <text class="title-item"
          >数量：<text class="color">{{ detail.sku_num }}</text></text
        >
      </view>
      <view class="prize-list">
        <view v-for="item in detail.skus" :key="item.id" class="prize-item">
          <image class="prize-img" :src="item.img" mode="aspectFill"></image>
          <view class="prize-body">
            <view class="prize-title">{{ item.name }}</view>
            <view class="prize-desc">
              <text class="sale-label">&yen;</text>
              <text class="big">{{ item.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </template>
    <template v-if="detail && detail.winndr_list && detail.winndr_list.length">
      <view class="title">中奖名单</view>
      <view class="win-list">
        <view
          v-for="item in detail.winndr_list"
          :key="item.id"
          class="win-item"
        >
          <image
            class="win-avatar"
            :src="item.avatar"
            mode="aspectFill"
          ></image>
          <text class="win-user">{{ item.nick_name }}</text>
          <text class="win-name">{{ item.sku_name }}</text>
        </view>
      </view>
    </template>
    <view class="title">
      参与人员
      <text>{{ detail.account_num || 0 }}人</text>
    </view>
    <view
      v-if="detail && detail.account_list && detail.account_list.length"
      class="user-list"
    >
      <view
        v-for="item in detail.account_list"
        :key="item.id"
        class="user-item"
      >
        <image class="user-avatar" :src="item.avatar" mode="aspectFill">
        </image>
        <text class="user-name">{{ item.nick_name }}</text>
      </view>
    </view>
    <view class="act-footer">
      <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 class="act-footer-desc">开奖时间: {{ detail.open_time }}</view>
    </view>
  </view>
</template>

<script>
import login from "@/lib/utils/login";
import api from "@/lib/api/api";
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;
    },
  },
  onLoad(data) {
    this.id = data.id;
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
    }
  },
  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 api.activityDetail(
        this.id,
        this.userInfo && this.userInfo.session ? this.userInfo.session : ""
      );
      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 api.joinActivity({
        feature_activity_id: this.id,
        session: this.userInfo.session,
      });
      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: 24rpx 24rpx 256rpx;
  .title {
    margin: 44rpx 0 16rpx;
    font-weight: 400;
    font-family: ysbth;
    font-size: 46rpx;
    color: #000;
    text {
      font-size: 28rpx;
      color: #9496a5;
      margin-left: 18rpx;
    }
  }
  .detail-head {
    padding: 24rpx;
    background: #fff;
    font-size: 28rpx;
    color: #292d3b;
    border-radius: 10rpx;
    line-height: 40rpx;
    .detail-head-info {
      color: #9496a5;
      line-height: 36rpx;
      letter-spacing: 1.5rpx;
    }
    .detail-head-desc {
      line-height: 34rpx;
      margin-top: 16rpx;
      letter-spacing: 0.3rpx;
    }
  }
  .title-desc {
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #9496a5;
    line-height: 40rpx;
    display: flex;
    justify-content: flex-start;
    margin: -8rpx 0 9rpx;
    .title-item {
      display: block;
      margin-right: 66rpx;
      .price {
        color: #08c2c3;
      }
      .color {
        color: #292d3b;
      }
    }
  }
  .prize-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -7rpx;
  }
  .prize-item {
    display: flex;
    width: 344rpx;
    background: #ffffff;
    margin: 7rpx;
    border-radius: 5rpx;
    .prize-img {
      width: 144rpx;
      height: 144rpx;
    }
    .prize-body {
      width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10rpx 8rpx;
      .prize-title {
        width: 184rpx;
        font-size: 20rpx;
        font-weight: 500;
        color: #292d3b;
        line-height: 28rpx;
        text-overflow: ellipsis;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        letter-spacing: 0.1rpx;
      }
      .prize-desc {
        height: 34rpx;
        line-height: 34rpx;
        font-size: 20rpx;
        font-weight: 600;
        color: #08c2c3;
        .sale-label {
          margin-right: 5rpx;
        }
        .big {
          font-size: 26rpx;
          font-weight: normal;
        }
      }
    }
  }
  .win-list {
    padding: 24rpx 18rpx;
    margin: 20rpx 0;
    background-color: #fff;
    .win-item {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #292d3b;
      margin: 32rpx 0;
      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
      .win-avatar {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
        border-radius: 100%;
      }
      .win-user,
      .win-name {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .win-user {
        width: 220rpx;
      }
      .win-name {
        flex: 1;
        width: 0;
      }
    }
  }
  .user-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 -7rpx;
    .user-item {
      margin: 12rpx 7rpx;
      .user-avatar {
        width: 95rpx;
        height: 96rpx;
        display: block;
        margin: 0 auto;
        border-radius: 100%;
      }
      .user-name {
        display: block;
        margin-top: 16rpx;
        width: 100%;
        height: 40rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #9496a5;
        line-height: 40rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
      }
    }
  }
  .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>
