<template>
  <view
    :class="[
      'coupon',
      {
        'coupon-active': active,
        disabled: '' + coupon.use_type !== 'undefined' && coupon.use_type !== 1,
        expired: coupon.use_type === 0,
        used: coupon.use_type === 2,
      },
    ]"
  >
    <view :class="['coupon-card', { checked: checked }]" @click="handleClick">
      <view class="coupon-label">
        <view class="coupon-title">
          <text
            v-if="coupon.unit === '元' || coupon.unit === '￥'"
            class="small"
            >&yen;</text
          >
          <text class="big">{{ coupon.reduce }}</text>
          <text
            v-if="coupon.unit !== '元' && coupon.unit !== '￥'"
            class="small"
            >{{ coupon.unit }}</text
          >
        </view>
        <text class="coupon-desc">{{ coupon.satisfy_notice }}</text>
      </view>
      <view class="coupon-body">
        <text class="coupon-title">{{ coupon.coupon_name }}</text>
        <text class="coupon-desc">{{ coupon.date }}</text>
        <view class="rule-btn" @click.stop="active = !active">
          <text class="text">使用规则</text>
          <image class="arrow" src="@/assets/coupon/icon-arrow.png"></image>
        </view>
      </view>
    </view>
    <view class="rule-text" v-html="coupon.rule"></view>
  </view>
</template>

<script>
export default {
  name: "CouponItem",
  props: {
    coupon: {
      type: Object,
      default: () => ({}),
    },
    checked: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: false,
    };
  },

  methods: {
    handleClick() {
      this.$emit("click", this.coupon);
    },
  },
};
</script>

<style lang="scss">
.coupon {
  margin: 0 atuo;
  .coupon-card {
    position: relative;
    z-index: 1;
    width: 690rpx;
    height: 222rpx;
    box-sizing: border-box;
    background: url(@/assets/coupon/bg.png) no-repeat center bottom;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    color: #979797;
    margin: 0 auto 20rpx;

    .coupon-label {
      width: 226rpx;
      height: 164rpx;
      font-weight: 600;
      text-align: center;
      border-right: 2rpx dashed #3d3d53;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .coupon-title {
        font-size: 36rpx;
        color: #4efbff;

        .big {
          font-size: 80rpx;
        }
      }

      .coupon-desc {
        font-size: 28rpx;
        font-weight: 500;
      }
    }

    .coupon-body {
      flex: 1;
      padding: 0 24rpx 0 22rpx;

      .coupon-title {
        display: block;
        height: 48rpx;
        font-size: 34rpx;
        font-weight: 600;
        line-height: 48rpx;
        color: #fff;
        margin-top: 20rpx;
      }
      .coupon-desc {
        display: block;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 34rpx;
        margin-top: 16rpx;
      }
      .rule-btn {
        border-top: 2rpx dashed #3d3d53;
        margin-top: 12rpx;
        padding-top: 14rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
          font-size: 24rpx;
          font-weight: 400;
          color: #9496a5;
          line-height: 34rpx;
        }
        .arrow {
          width: 22rpx;
          height: 14rpx;
        }
      }
    }
    &.checked {
      &::before {
        content: "";
        width: 44rpx;
        height: 44rpx;
        background: url(@/assets/coupon/icon-checked.png) no-repeat center;
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        background-size: contain;
      }
    }
  }
  .rule-text {
    display: none;
    box-sizing: border-box;
    width: 690rpx;
    background: #2c2c38;
    position: relative;
    z-index: 0;
    margin: -20rpx auto 20rpx;
    padding: 24rpx 24rpx 16rpx;
    line-height: 42rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #9496a5;
    &::before {
      content: "";
      position: absolute;
      width: 50%;
      height: 30rpx;
      top: -20rpx;
      left: 25%;
      background: #2c2c38;
    }
  }
  &.coupon-active {
    .coupon-card {
      // background-image: url(@/assets/coupon/bg-active.png);
      .coupon-body {
        .rule-btn {
          .arrow {
            transform: rotate(180deg);
          }
        }
      }
    }

    .rule-text {
      display: block;
    }
  }
  &.disabled {
    .coupon-card {
      background-image: url(@/assets/coupon/bg-expired.png);
      color: #979797;
      .coupon-label {
        border-color: #d1d1d1;
        .coupon-title {
          color: #979797;
        }
      }
      .coupon-body {
        .coupon-title {
          color: #979797;
        }
        .coupon-desc {
          color: #9496a5;
        }
        .rule-btn {
          border-color: #d1d1d1;
          .text {
            color: #9496a5;
          }
        }
      }
    }
    .rule-text {
      color: #979797;
      background: #e4e3e9;
      &::before {
        content: "";
        background: #e4e3e9;
      }
    }
    &.coupon-active {
      .coupon-card {
        // background-image: url(@/assets/coupon/bg-expired-active.png);
        .coupon-body {
          .rule-btn {
            .arrow {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
  &.expired {
    .coupon-card {
      &::after {
        content: "";
        position: absolute;
        width: 156rpx;
        height: 156rpx;
        background: url(@/assets/coupon/icon-expired.png) no-repeat center top;
        background-size: contain;
        right: 0;
        top: 0;
      }
    }
  }
  &.used {
    .coupon-card {
      &::after {
        content: "";
        position: absolute;
        width: 156rpx;
        height: 156rpx;
        background: url(@/assets/coupon/icon-used.png) no-repeat center top;
        background-size: contain;
        right: 0;
        top: 0;
      }
    }
  }
}
</style>
