<template>
<div class="coupon-wrapper" @click="onClick">
  <div class="title">优惠券<span class="desc">{{data.desc}}</span></div>
  <div><span class="red">{{data.coupon_amount_str}}</span><i class="iconfont iconright icon-right"></i></div>
</div>
</template>

<script>
export default {
  name: 'OrderCoupon',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="scss" scoped>
.coupon-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 32px;
  display: flex;
  align-items: center;
}

.desc {
  font-size: 24px;
  color: #3f3f3f;
  margin-left: 10px;
}

.red {
  color: #d0021b;
  font-size: 28px;
  margin-right: 10px;
}

.icon-right {
  font-size: 24px;
  color: #999;
}

</style>