<template>
  <div class="discounts">
    <div class="flex-h" :class="{'opacity' : data.useType == '已失效' || data.useType == '已使用', 'gray': data.useType == '已使用'}" @click="toDetail">
      <div class="card-left">
        <div class="title">
          <i class="iconfont icon-youhuiquan"></i>
          <div>{{data.title}}</div>
        </div>
        <div class="desc">{{data.desc}}</div>
        <div class="time">有效期至{{data.time}}</div>
      </div>
      <div class="card-right">
        <img :src="logo" alt="" width="100%" height="100%">
        <div class="btn" @click.stop="toUse" v-if="data.useType == '未使用' && !data.hideBtn">去使用</div>
      </div>
      <div class="tag" :class="{'gray-location' : data.useType == '已使用'}">
        <span>{{data.tag}}</span>
      </div>
    </div>
    <div class="useType">
      <img :src="used" v-if="data.useType == '已使用'" width="100%" height="100%">
      <img :src="failure" v-if="data.useType == '已失效'" width="100%" height="100%">
    </div>
  </div>
</template>

<script>
import logo from '../../common/icon/logo-t.png'
import used from '../../common/icon/already.png'
import failure from '../../common/icon/inv.png'
export default {
  props: ['data'],
  data () {
    return {
      logo,
      used,
      failure
    }
  },
  methods: {
    toUse () {
      this.$emit('toUse', this.data)
    },
    toDetail () {
      this.$emit('toDetail', this.data)
    }
  }
}
</script>

<style lang="scss" scoped>
.discounts {
  padding: 0.15rem 0.2rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 0.1rem 0px rgba(193, 204, 217, 0.5);
  border-radius: 0.08rem;
  margin-bottom: 0.2rem;
  position: relative;
  overflow: hidden;
  .flex-h {
    &.opacity {
      opacity: 0.5;
    }
    &.gray {
      filter: grayscale(100%);
    }
    .card-left {
      flex: 1;
      display: flex;
      flex-flow: column nowrap;
      .title {
        display: flex;
        align-items: center;
        i {
          padding-right: 0.08rem;
          color: #ff7c1c;
          font-weight: bold;
          font-size: 0.2rem;
        }
        div {
          font-size: 0.16rem;
          font-weight: bold;
          color: rgba(50, 54, 69, 1);
        }
      }
      .desc {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 0.12rem;
        color: rgba(128, 128, 128, 1);
      }
      .time {
        font-size: 0.12rem;
        color: rgba(128, 128, 128, 1);
      }
    }
    .card-right {
      width: 0.9rem;
      height: 0.9rem;
      position: relative;
      .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-25%, -50%);
        color: #ff7c1c;
        width: 0.62rem;
        text-align: center;
        padding-bottom: 0.02rem;
        border: 1px solid #ff7c1c;
        border-radius: 0.2rem;
        z-index: 2;
      }
    }

    .tag {
      position: absolute;
      background: linear-gradient(
        45deg,
        rgba(255, 105, 0, 1) 0%,
        rgba(255, 136, 0, 0.76) 100%
      );
      opacity: 0.85;
      width: 0.6rem;
      height: 0.6rem;
      transform: rotate(45deg);
      bottom: -0.3rem;
      right: -0.3rem;
      &.gray-location {
        background: rgba(189, 189, 189, 1);
      }
      span {
        position: absolute;
        top: 0.22rem;
        left: -0.03rem;
        font-size: 0.12rem;
        color: #fff;
        transform: rotate(-90deg);
      }
    }
  }
  .useType {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    width: 0.76rem;
    height: 0.76rem;
  }
}

@media screen and (max-width: 320px) {
  .tag {
    span {
      top: 0.2rem !important;
      left: -0.05rem !important;
    }
  }
}
</style>
