<template>
  <div class="coupon-section">
    <div :class="classes">
      <div :class="contentClass">
        <p class="value"><span>{{item.coupon_value_str}}</span></p>
        <p class="threshold" v-if="item.use_rule">{{item.use_rule}}</p>
      </div>

      <div class="coupon-right">
        <p class="title">
          <span :class="typeClass"> [{{item.catalog_name}}] </span>
          {{item.coupon_name}}
        </p>

        <p class="time">{{item.coupon_validity}}</p>

        <p class="use-intro" v-if="item.notes" @click="onClickTip">
          <span class="show-intro-btn">使用说明</span>
          <span :class="introClass"></span>
        </p>

        <span class="tip"></span>
      </div>

      <template v-if="item.usedOvertimeOrInValid">
        <div class="stamp overtime-stamp" v-if="item.is_overtime === 'Y'"></div>
        <div class="stamp invalid-stamp" v-if="item.is_invalid === 'Y'"></div>
        <div class="stamp used-stamp" v-if="item.is_used"></div>
      </template>

      <template v-else>
        <a :href="item.useNowLink" class="use-now">立即使用</a>
        <span class="top-tip" v-if="item.is_overdue_soon === 'Y'"></span>
      </template>
    </div>

    <ul class="coupon-intro" v-if="show">
      <li v-for="(it, index) in item.notes" :key="index">{{it}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CouponItem',
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  mounted() {
    console.log(this.item);
  },
  data() {
    return {
      show: false
    };
  },
  methods: {
    onClickTip() {
      this.show = !this.show;
    }
  },
  computed: {
    classes() {
      return ['coupon', {
        'coupon-overtime': this.item.is_overtime === 'Y',
        'coupon-invalid': this.item.is_invalid === 'Y',
        'coupon-used': this.item.is_used
      }];
    },
    contentClass() {
      if (this.item.usedOvertimeOrInValid) {
        return ['coupon-left'];
      } else {
        return ['coupon-left', {
          'coupon-left-shop': this.item.catalog === 100,
          'coupon-left-activity': this.item.catalog === 200,
          'coupon-left-freight': this.item.catalog === 300,
        }];
      }
    },
    typeClass() {
      return [{
        'type-shop': this.item.catalog === 100,
        'type-activity': this.item.catalog === 200,
        'type-freight': this.item.catalog === 300,
      }];
    },
    introClass() {
      if (this.show) {
        return ['iconfont', 'icon-up'];
      } else {
        return ['iconfont', 'icon-downn'];
      }
    }
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
  .coupon-section {
    margin-bottom: 20px;
  }

  .coupon {
    position: relative;
    width: 710px;
    height: 200px;
    margin: 0 auto;

    .coupon-left {
      width: 200px;
      height: 200px;
      background-image: url("~statics/image/coupon/overtime.png");
      background-size: 100% 100%;
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .coupon-left > p {
      color: #fc5960;
      font-size: 24px;

      > span {
        font-size: 60px;
        font-weight: 600;
      }
    }

    .coupon-left-activity {
      background-image: url("~statics/image/coupon/activity.png");
    }

    .coupon-left-freight {
      background-image: url("~statics/image/coupon/freight.png");

      > p {
        color: #000;
      }

      > p > span {
        font-size: 48px;
        font-weight: 600;
      }
    }

    .coupon-left-shop {
      background-image: url("~statics/image/coupon/shop.png");

      > p {
        color: #ffa72e;
      }
    }

    .coupon-right {
      width: 510px;
      height: 200px;
      background-color: #fff;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      float: left;
      padding: 22px;
      font-size: 22px;
      color: #b0b0b0;
      position: relative;
      white-space: initial;

      .type-shop,
      .type-activity,
      .type-freight {
        font-weight: 500;
      }

      .type-shop {
        color: #efaf46;
      }

      .type-activity {
        color: #fc5960;
      }

      .type-freight {
        color: #222;
      }

      .title {
        width: 370px;
        font-size: 24px;
        color: #444;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .time {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      .use-intro {
        position: absolute;
        bottom: 22px;
      }

      .tip {
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .use-now {
      font-size: 22px;
      position: absolute;
      width: 130px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #444;
      border-radius: 25px;
      background-color: #fff;
      color: #444;
      bottom: 20px;
      right: 20px;
    }

    .stamp {
      position: absolute;
      width: 126px;
      height: 114px;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      background-size: 100% 100%;
    }

    .overtime-stamp {
      background-image: url("~statics/image/coupon/timeout.png");
    }

    .used-stamp {
      background-image: url("~statics/image/coupon/used.png");
    }

    .invalid-stamp {
      background-image: url("~statics/image/coupon/invalid.png");
    }

    .top-tip {
      width: 84px;
      height: 84px;
      background-image: url("~statics/image/coupon/top-tip.png");
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .freight-coupon {
    > .coupon-left {
      font-size: 48px;
    }
  }

  .coupon-invalid,
  .coupon-used,
  .coupon-overtime {
    > .coupon-left > p {
      color: #b0b0b0;
    }

    > .coupon-right > .title {
      color: #b0b0b0;

      & > .type-activity {
        color: #b0b0b0;
      }

      & > .type-freight {
        color: #b0b0b0;
      }

      & > .type-shop {
        color: #b0b0b0;
      }
    }
  }

  .coupon-intro {
    background: rgba(255, 255, 255, 0.7);
    margin: -12px auto 0;
    padding: 36px 22px 22px;
    width: 710px;

    li {
      font-size: 22px;
      color: #444;
    }
  }

  .no-conpon-now {
    text-align: center;
    padding-top: 262px;
    color: #b0b0b0;

    .icon-not {
      width: 208px;
      height: 130px;
      background-image: url("~statics/image/coupon/not.png");
      background-size: 100% 100%;
      margin: auto auto 30px;
    }

    p {
      font-size: 28px;
    }
  }

  .used-tip {
    display: flex;

    span {
      color: #b0b0b0;
      font-size: 24px;
    }

    hr {
      width: 160px;
      border: none;
      border-bottom: 1px solid #e0e0e0;
    }
  }

  .hide {
    display: none;
  }
</style>