<template>
  <div class="coupon" :class="[clazz, {'failure': !status}]">
    <div class="sawtooth">
      <div class="left">
        <div class="price">￥{{options.coupon.amount}}</div>
        <div class="desc">{{options.coupon.name}}</div>
      </div>
      <slot name="left" />
    </div>
    <div class="content">
      <div class="right">
        <div class="title">
          {{options.coupon.name}}
        </div>
        <div class="lifetime" >
          {{expiryDate}} 过期
        </div>
        <div class="control" v-if="status">
          <div class="control-btn" @click="toUse()" v-if="options.status === '1'">
            立即使用
          </div>
          <div class="control-btn" @click="toOrderDetail()" v-else>
            查看详情
          </div>
        </div>
      </div>
      <slot name="right" />
    </div>
  </div>

</template>

<script>
// :price="options.coupon.amount" :price-desc="options.coupon.typeName" :title="options.coupon.name"
//                     :lifetime="options.expiryDate">

import { formatTime } from '@/utils/index';
export default {
  name: 'Coupon',
  props: {
    clazz: {
      type: 'String',
      default: ''
    },
    options: {
      type: 'Object'
    },
    type: {
      type: 'String',
      default: ''
    },
    status: {
      type: 'Boolean',
      default: true
    },
    canUse: {
      type: 'Boolean',
      default: false
    }
  },
  computed: {
    expiryDate() {
      if (this.options.expiryDate) {
        const _data = formatTime(this.options.expiryDate);
        return `${_data.year}-${_data.month}-${_data.day} ${_data.hour}:${_data.minute}`;
      }
      return '';
    }
  },
  methods: {
    toUse() {
      const { options, canUse } = this;
      console.log(canUse)
      if (canUse) {
        this.$emit('use', options);
      } else {
        wx.reLaunch({
          url: `/pages/bundle/main`
        });
      }
    },
    toOrderDetail() {
      const { options } = this;
      wx.navigateTo({
        url: `/pages/orderDetail/main?id=${options.orderId}`
      });
    }
  }

};
</script>

<style lang="stylus" scoped>
.coupon {
  height: 170rpx;
  width: 100%;
  overflow: hidden;
  display: flex;
  font-size: 30rpx;

  .sawtooth {
    background-image: radial-gradient(transparent 0, transparent 10rpx, #e24141 8rpx);
    background-size: 24rpx 16rpx;
    background-position: -14rpx 20rpx;
    position: relative;
    width: 30%;
    height: 100%;
    padding-left: 15rpx;
    box-sizing: border-box;
    color: #fff;

    .left {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;

      .price {
        font-size: 1.5em;
        position: relative;
        left: -2rpx;
        top: -2rpx;
      }

      .desc {
        font-size: 0.8em;
      }
    }
  }

  .sawtooth:before {
    content: ' ';
    display: block;
    background-color: #e24141;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12rpx;
    right: 0;
    z-index: -1;
  }

  .content {
    width: 70%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left-width: 0;
    overflow: hidden;
    padding: 15rpx 20rpx;

    .right {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .lifetime {
      font-size: 0.7em;
      color: #80848f;
      flex: 1;
    }
    .lifetime.used {
      opacity: 0
    }

    .control {
      text-align: right;

      .control-btn {
        font-size: 0.8em;
        padding: 5rpx 18rpx;
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #19be6b;
        display: inline-block;
        border-radius: 20rpx;
      }
    }
  }
}

.coupon.failure {
  .sawtooth {
    background-image: radial-gradient(transparent 0, transparent 10rpx, #c5c8ce 8rpx);
    color: #858585;
  }

  .sawtooth:before {
    background-color: #c5c8ce;
  }
}
</style>
