<template>
  <div class="bundle-card-panel" @click="toDetail">
    <div class="header">
      <div class="tag" v-if="type === 'list' && options.tag && options.tag.length > 0">{{options.tag}}</div>
      <img class="img" :src="options.icon1" alt="">
    </div>
    <div class="content">
        <div class="header">
          <div class="title">{{options.name}}</div>
          <div class="sales" v-if="options.stock>0">
            已售{{options.salesCnt}}套
          </div>
          <div class="sales" v-else>已售罄</div>
        </div>
        <div class="desc">{{type === 'list'? options.summary: options.tag}}</div>
    </div>
    <div :class="type === 'list' ?  'footer' : 'detail-footer'">
      <div class="original-price" >
        原价:￥{{options.originalPrice}}
      </div>

      <div class="current-price" v-if="options.showFlag === '1'">
        <span class="label">活动价:</span><span>￥{{options.price}}</span>
      </div>
       <div class="current-price--Offline" v-else>
        该套餐已经下线, 无法购买
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: 'Object',
      default: {}
    },
    type: {
      type: 'String',
      default: 'list'
    }
  },
  methods: {
    toDetail() {
      if (this.type === 'list') {
        wx.navigateTo({
          url: `/pages/bundleDetail/main?id=${this.options.id}`
        });
      }
    },
    salesTotal(a,b) {
      a = a?a:0
      b = b?b:0
      return a + b
    }
  }
};
</script>

<style lang="stylus" scoped>
.bundle-card-panel {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 10rpx;

  .header {
    position: relative;
  }

  .header .img {
    width: 100%;
    height: 255rpx;
    border-radius: 10rpx;
  }

  .header .tag {
    position: absolute;
    top: 15%;
    font-size: 0.6em;
    padding: 5rpx 20rpx 5rpx 10rpx;
    background-color: rgba(255, 255, 0, 0.5);
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
  }

  .content {
    font-size: 20rpx;
  }
  .content .header{
    display:flex;
    justify-content: space-between;
    align-items: center;
  }

  .content .title {
    font-size: 30rpx;
  }

  .content .desc {
    padding: 15rpx 0;
    font-size: 1.1em;
    color: #80848f;
  }

  .footer {
    display: flex;
    margin-top: 10rpx;
    border-top: 1px solid #e9eaec;
    padding: 15rpx 0;
    font-weight: bold;
  }

  .detail-footer {
    display: flex;
    margin-top: 0;
    font-weight: bold;
  }

  .footer .label, .original-price {
    font-size: 0.8em;
    display: inline-block;
    margin-right: 10rpx;
  }

  .original-price {
    flex: 1;
    color: #bbbec4;
    font-size: 0.8em;
    text-decoration: line-through;
    display: flex;
    align-items: flex-end;
  }
  .current-price {
    color: #ed3f14;
    font-size: 1em;
  }
  .current-price--Offline {
    color: #bbbec4;
    font-size: 1em;
  }
}
</style>
