<!--
    此模块为c端优惠券
    uin 引用组
    channelId 引用id
    userInfo 用户信息
    type 投票来源(用于统计每一票的来源)
  -->
<template>
  <div class="coupon-container" ref="wrapBox" @scroll="getMore">
    <ul class="list" ref="list">
      <li class="item" v-for="item in list" :key="item.id">
        <div
          class="coupon-item"
          :class="{
            'z-receive': item.isReceive == 1,
            'z-empty': item.surplusNum == 0
          }"
        >
          <div class="coupon-box" v-if="item.type == 1">
            <div class="rebate">
              <div class="rate">
                <span class="unit">￥</span>
                <span class="num color-cash">{{ item.waiverAmount }}</span>
              </div>
              <div class="condition color-cash">
                {{ item.condition ? `满${item.condition}元可用` : '无门槛' }}
              </div>
            </div>
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="term">
                {{ (item.startTime * 1000) | formatDate('yyyy.MM.dd') }}
                ~
                {{ (item.endTime * 1000) | formatDate('yyyy.MM.dd') }}
              </div>
            </div>
            <div class="type bg-cash">
              <span>代金券</span>
            </div>
          </div>
          <div class="coupon-box" v-if="item.type == 2">
            <div class="rebate">
              <div class="rate">
                <span class="num color-discount">{{ item.waiverAmount }}</span>
                <span class="unit">折</span>
              </div>
              <div class="condition color-discount">
                {{ item.condition ? `满${item.condition}元可用` : '无门槛' }}
              </div>
            </div>
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="term">
                {{ (item.startTime * 1000) | formatDate('yyyy.MM.dd') }}
                ~
                {{ (item.endTime * 1000) | formatDate('yyyy.MM.dd') }}
              </div>
            </div>
            <div class="type bg-discount">
              <span>折扣券</span>
            </div>
          </div>
          <div class="state-box">
            <div class="state" v-if="item.isReceive == 1">
              <span>已领</span>
            </div>
            <div class="state" @click="receiveCoupon(item)" v-else>
              <span v-if="item.surplusNum">
                立即
                <br />
                领取
              </span>
              <span v-else>
                已
                <br />
                领
                <br />
                完
              </span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getCouponInclude, receiveCoupon } from '@/plugins/API/apiCoupon';
export default {
  name: 'menu-coupon',
  props: {
    uin: {},
    channelId: {},
    userInfo: {},
    type: {},
    jumpUrls: {}
  },
  data() {
    return {
      page: 1,
      list: [],
      isMore: true
    };
  },
  mounted() {
    this._getList();
  },
  methods: {
    async _getList() {
      if (!this.isMore) {
        return false;
      }
      this.isMore = false;
      const res = await getCouponInclude({
        includeId: this.channelId,
        type: this.type,
        page: this.page,
        num: 10
      });
      this.isMore = true;
      if (res.code === 200 && res.errorCode === 0) {
        if (res.data.length < 10) {
          this.isMore = false;
        }
        this.list = [...this.list, ...res.data];
      }
    },
    getMore() {
      const wrapT = this.$refs.wrapBox.scrollTop;
      const wrapH = this.$refs.wrapBox.clientHeight;
      if (this.$refs.list) {
        const listH = this.$refs.list.clientHeight;
        if (listH - wrapH - wrapT < 100) {
          this.page++;
          this._getList();
        }
      }
    },
    async receiveCoupon(info) {
      if (!this.userInfo.id) {
        this.$layer.msg('请先登录并绑定手机号!~');
        this.$Bus.$emit('bus-showLogin', true);
        return false;
      }
      if (!this.userInfo.phone) {
        window.location.href = this.jumpUrls.login_binding;
        return false;
      }
      const res = await receiveCoupon({
        uin: this.uin,
        couponId: info.id
      });
      if (res.code === 200 && res.errorCode === 0) {
        info.isReceive = 1;
        this.$layer.msg('领取成功，请到"个人中心-我的优惠券"查看', 2000);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@cashColor: #409eff; //代金券颜色
@discountColor: #ec5d2a; //折扣券颜色
@failureColor: #cacaca; //失效劵颜色
.coupon-container {
  position: relative;
  height: 100%;
  overflow: auto;
  .list {
    padding: 0.15rem;
    .item {
      margin-bottom: 0.15rem;
    }
  }
  .coupon-item {
    display: flex;
    height: 0.95rem;
    overflow: hidden;
    background-color: #fff;
    border-radius: 0.04rem;
    box-shadow: 0 0 0.04rem rgba(0, 0, 0, 0.06);
    .coupon-box {
      position: relative;
      flex: 1;
      display: flex;
      padding: 0.1rem 0;
      height: 100%;
      .rebate {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 0.1rem;
        width: 1rem;
        height: 100%;
        border-right: 0.01rem dashed #d2d2d2;
        word-break: break-all;
        text-align: center;
        .rate {
          line-height: 0.3rem;
          .unit {
            font-size: 0.12rem;
            color: #8e8e8e;
          }
          .num {
            font-size: 0.25rem;
          }
        }
        .condition {
          line-height: 0.2rem;
          font-size: 0.11rem;
        }
      }
      .info {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 0.1rem;
        height: 100%;
        word-break: break-all;
        .name {
          margin-bottom: 0.1rem;
          max-height: 0.4rem;
          line-height: 0.2rem;
          font-size: 0.14rem;
          color: #131313;
          display: -webkit-box;
          box-orient: vertical;
          -webkit-box-orient: vertical;
          line-clamp: 2;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .term {
          line-height: 0.15rem;
          font-size: 0.12rem;
          color: #777777;
        }
      }
      .type {
        position: absolute;
        right: 0.05rem;
        top: 0.05rem;
        padding: 0 0.1rem;
        height: 0.2rem;
        line-height: 0.2rem;
        border-radius: 0.2rem;
        font-size: 0.12rem;
        color: #fff;
      }
    }
    .state-box {
      position: relative;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.5rem;
      height: 100%;
      line-height: 0.2rem;
      background-color: #409eff;
      font-size: 0.12rem;
      color: #fff;
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: -0.1rem;
        width: 0.2rem;
        height: 100%;
        background: url(./img/icon-division.png) no-repeat center center;
        background-size: auto 100%;
      }
    }
    &.z-receive,
    &.z-empty {
      .coupon-box {
        .rebate {
          .rate {
            .unit {
              color: @failureColor;
            }
            .num {
              color: @failureColor;
            }
          }
          .condition {
            color: @failureColor;
          }
        }
        .info {
          .name {
            color: @failureColor;
          }
          .term {
            color: @failureColor;
          }
        }
        .type {
          background-color: @failureColor * 1.07;
        }
      }
      .state-box {
        background-color: @failureColor * 0.945;
      }
    }
  }
  .color-cash {
    color: @cashColor;
  }
  .color-discount {
    color: @discountColor;
  }
  .bg-cash {
    background-color: @cashColor;
  }
  .bg-discount {
    background-color: @discountColor;
  }
}
</style>
