<template>
  <scroll-view scroll-y class="container bundle-detail-page">
    <div class=" bundle-detail page--loading" :class="{'page--finished': finished }">
      <b-card :options="options" type="detail" />
      <div class="detail-info">
        <div class="bundle-detail-desc" v-if="options.validityTermType != 'PERMANENT_VALIDITY'">
          <div class="bundle-detail-title">
            <van-icon name="stop" class="detail-title-icon" /> 套餐有效期:
            <div class="detail-text">
              <span v-if="options.validityTermType == 'FIXED_TIME'">{{options.validityTermValue}}过期</span>
              <span v-if="options.validityTermType == 'FIXED_DAYS'">购买后{{options.validityTermValue}}天过期</span>
            </div>
          </div>
        </div>
        <div class="bundle-detail-desc">
          <div class="bundle-detail-title">
            <van-icon name="stop" class="detail-title-icon" /> 套餐描述:
          </div>
          <div class="detail-text">
            {{options.description}}
          </div>
        </div>
        <div class="bundle-detail-desc">
          <div class="bundle-detail-title">
            <van-icon name="stop" class="detail-title-icon" /> 套餐详情:
          </div>
          <div class="detail-content-imgs">
            <image :src="img" class="detail-img"  v-for="(img, index) in imgList" :key="index" mode="widthFix" />
          </div>
        </div>
      </div>
      <div class="submit-btn" v-if="options.showFlag === '1'&&options.stock>0" @click="sumbitOrder">
        立即下单
      </div>
      <div class="submit-btn" style="background:#ccc" v-if="options.showFlag === '0'">
        套餐已下线
      </div>
      <div class="submit-btn" style="background:#ccc" v-if="options.stock<=0">
        套餐已售罄
      </div>
    </div>
  </scroll-view>

</template>

<script>
import { bundleById } from '@/api/bundle';
import BundleCard from '@/components/BundleCard';
import { checkLogin } from '@/api/login';

export default {
  name: 'bundleDetail',
  components: { 'b-card': BundleCard },

  data() {
    return {
      options: {},
      imgList: [],
      finished: false,
      timeout: null,
      loading: false
    };
  },
  methods: {
    sumbitOrder() {
      if(this.loading){return}
      const { id, couponId, customerCouponId } = this.$mp.query;
      if (this.options.stock<=0){
        wx.showToast({
          title: '活动套餐已售罄，下次早点来哦！',
          icon: 'none',
          duration: 2500
        });
        return
      }
      this.loading = true
      checkLogin().then(res => {
        if (res.status === '200') {
          wx.navigateTo({
            url: `/pages/placeOrder/main?id=${id}&couponId=${couponId}&customerCouponId=${customerCouponId}`
          });
        } else {
          wx.redirectTo({
            url: `/pages/login/main?lanuch=false&path=` + encodeURIComponent(`/pages/bundleDetail/main?id=${id}`)
          });
        }
      });
    }
  },
  onShow() {
    wx.showLoading({
      mask: true,
      title: '加载中'
    });
    this.loading = false
    const { id } = this.$mp.query;
    const _this = this;
    bundleById({ id }).then(res => {
      if (res.status === '200') {
        _this.options = res.data;
        if (res.data.detail) {
          _this.imgList = res.data.detail.split(',');
        }
        _this.finished = true;
        wx.hideLoading();
        if (res.data.showFlag === '0') {
          wx.showToast({
            title: '该套餐已经下线, 无法购买',
            icon: 'none',
            duration: 2500
          });
        }
      }
      this.timeout = setTimeout(() => {
        if (_this.finished === false) {
          _this.finished = true;
        }
      }, 2000);
    }).catch(err => {
      console.error(err);
    });
  },
  onUnload() {
    wx.hideLoading();
    this.options = {};
    this.imgList = [];
    this.finished = false;
    if (this.timeout !== null) {
      clearTimeout(this.timeout);
      this.timeout = null;
    }
  },
  onShareAppMessage: function () {

  }
};
</script>

<style lang="stylus" scoped>
.bundle-detail-page {
  height: 100vh;
  font-size : 14px;
}

.bundle-detail {
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 10rpx;

  .submit-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background-color: #ff5500;
    text-align: center;
    line-height: 50px;
    font-size: 1.2em;
    color: #fff;
  }
}

.detail-info {
  margin-top: 20px;
  margin-bottom: 50px;

  .bundle-detail-desc {
    border-top: 1rpx solid #f8f8f8;
    padding: 10px 0;

    .detail-text {
      font-size: 0.9em;
      padding: 10px 10px 0 5px;
      box-sizing: border-box;
    }
  }

  .bundle-detail-title {
    font-size: 1em;
    .detail-title-icon {
      position: relative;
      top: 4rpx;
    }
  }

  .detail-content-imgs {
    margin-top: 5px;
    .detail-img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}
</style>
