<template>
  <view>
    <loading-view v-if="isFirstLoading"></loading-view>
    <!-- 轮播图 -->
    <block>
      <cu-swiper indicator-pos="bottomRight" mode="number" height="400" border-radius="0" :list="bannerList"></cu-swiper>
    </block>
    <!--  -->
    <view class="flex items-center justify-between px-30rpx mt-40rpx">
      <view class="flex items-center justify-center flex-col">
        <view class="text-32rpx text-txBase text-left w-full">{{ activeObj.name }}</view>
        <view class="text-28rpx text-txGray mt-15rpx" v-if="activeObj.start_at && activeObj.end_at">{{ activeObj.start_at.substring(0,16) }} - {{ activeObj.end_at.substring(0,16)}}</view>
      </view>
      <!-- #ifdef APP-PLUS -->
      <view @tap="share" class="bg-hex-e81300 rounded-8rpx px-40rpx h-60rpx leading-60rpx text-white text-30rpx">分享</view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <button hover-class="none" open-type="share" class="cu-btn bg-hex-e81300 rounded-8rpx px-40rpx h-60rpx leading-60rpx text-white text-30rpx">
        分享
      </button>
      <!-- #endif -->
    </view>

    <!--  -->
    <view class="flex justify-center flex-col px-30rpx mt-50rpx text-32rpx">
      <view>活动商品</view>
      <view class="mt-3rpx w-130rpx h-6rpx bg-hex-e60012 rounded-xs"></view>
    </view>
    <!-- 商品列表 -->
    <view class="px-rowSm mt-30rpx">
      <u-waterfall v-model="dataList" ref="uWaterfall">
        <template v-slot:left="{ leftList }">
          <view v-for="(item, index) in leftList" :key="index" class="px-rowSm mb-base">
            <goods :goods="item"></goods>
          </view>
        </template>
        <template v-slot:right="{ rightList }">
          <view v-for="(item, index) in rightList" :key="index" class="px-rowSm mb-base">
            <goods :goods="item"></goods>
          </view>
        </template>
      </u-waterfall>
    </view>

    <!--  -->
    <view class="mt-60rpx text-32rpx text-txBase text-left pl-30rpx">活动说明</view>
    <view class="px-30rpx mt-20rpx">
      <u-parse :html="activeObj.description"></u-parse>
    </view>

    <cu-modal
      v-model="tipShow"
      title="已结束"
      confirmText="去逛逛"
      @confirm="
        $u.route({
          url: '/pages/index/index',
          type: 'switchTab',
        })
      "
      content="该活动已结束"
    ></cu-modal>
  </view>
</template>
<script>
import goods from './components/goods.vue';
export default {
  components: {
    goods,
  },
  data() {
    return {
      tipShow:false,
      isFirstLoading: true,
      id: '',
      activeObj: {},
    };
  },
  computed: {
    user() {
      return this.$store.getters.user ?? {};
    },
    bannerList() {
      return this.activeObj?.images ?? [];
    },
    dataList() {
      const arr = this.activeObj?.skus ?? []
      return arr.reduce((pr,cu)=>{
        cu.is_online && pr.push(cu)
        return pr
      },[])
    },
  },
  onLoad({ id }) {
    this.id = id;
    this.getDetail();
  },
  //微信分享
  onShareAppMessage(res) {
    let code = this.user.code ? this.user.code : '';
    let shareObj = {
      title: this.activeObj.share_title,
      path: `/pages/bargain/index?invite_code=${code}&id=${this.id}`,
      imageUrl: this.activeObj.share_image,
    };
    return shareObj;
  },
  methods: {
    async getDetail() {
      try {
        const res = await this.$api.get(`/v1/bargains/${this.id}`, {}, { custom: { toast: false } });
        this.activeObj = res;
      } catch (err) {
        this.tipShow = true
      } finally {
        this.isFirstLoading = false;
      }
    },
    //分享小程序
    share() {
      if (!this.isLogin) return this.$u.routeLogin();
      let code = this.user.code ? this.user.code : '';
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 5,
        title: this.activeObj.share_title,
        imageUrl: this.activeObj.share_image,
        miniProgram: {
          id: 'gh_261a68e68e45',
          path: `/pages/bargain/index?invite_code=${code}&id=${this.id}`,
          type: 0,
          webUrl: `https://wap.zichunsheng.cn/register?code=${code}`,
        },
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
  },
};
</script>
<style lang="scss">
page {
  background: #ffffff;
  min-height: 100vh;
}
</style>
