<template>
  <view class="coupon">
    <view class="contain" :class="{ dis: disabled }">
      <view class="left">
        <view class="title">
          <u-tag :text="couponProperty" v-if="couponProperty" type="error" plain />
          <text>{{ couponName }}</text>
        </view>
        <view v-if="validTime">{{ validTime }}</view>
        <view v-if="couponNote" class="more" @click.stop="toggleNoteVisible">
          <text>使用说明</text>
          <u-icon :name="!noteVisible ? 'arrow-down' : 'arrow-up'"></u-icon>
        </view>
      </view>
      <view class="right">
        <view class="circle-top-left"></view>
        <view
          class="circle-bottom-left"
          :class="{ 'circle-bottom-bg': noteVisible }"
          :style="{ '--note-bg-color': couponNoteBgColor }"
        ></view>
        <view>
          <view class="price"><span class="small">¥</span>{{ couponAmount }}</view>
          <view class="center" v-if="minCost">{{ minCost }} </view>
        </view>
        <view v-if="showUseBtn && !disabled" class="btn" @click="useBtnClick">立即使用</view>
        <!-- 自定义右侧部分按钮 -->
        <slot name="right-btn"></slot>
        <!-- 自定义右侧部分文字 -->
        <slot name="right-text"></slot>
      </view>
    </view>
    <view v-if="noteVisible" class="more-detail" :style="{ '--note-bg-color': couponNoteBgColor }">
      {{ couponNote }}
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'Coupon',
  props: {
    // 是否显示立即使用按钮
    showUseBtn: {
      type: Boolean,
      default: true,
    },
    // 卡券名称
    couponName: {
      type: String,
      default: null,
    },
    // 有效时间
    validTime: {
      type: String,
      default: null,
    },
    // 卡券使用说明
    couponNote: {
      type: String,
      default: null,
    },
    // 卡券金额
    couponAmount: {
      type: Number,
      default: 0,
    },
    // 使用门槛
    minCost: {
      type: String,
      default: null,
    },
    // 卡券类型
    couponProperty: {
      type: String,
      default: null,
    },
    // 禁用状态
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      noteVisible: false,
      couponNoteBgColor: '#eee',
    };
  },
  computed: {
    ...mapState({
      primaryColor: state => state.primaryColor,
    }),
  },
  methods: {
    useBtnClick() {
      this.$emit('useBtnClick');
    },
    toggleNoteVisible() {
      this.noteVisible = !this.noteVisible;
    },
  },
};
</script>

<style scoped lang="scss">
$coupon-bg: #fff5f4;

.coupon {
  border: 2px solid transparent;
  margin: 10px;
  .icon {
    display: none;
  }
  .contain.dis {
    background-color: #d8d8d8;
    color: #7e7e7e;
  }
  .contain {
    display: flex;
    border-radius: 5px;
    position: relative;
    background: $coupon-bg;
    overflow: hidden;
    flex: 1;
    .left {
      flex: 1;
      font-size: 14px;
      color: #666;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 15px;
        color: #333;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        .tip {
          display: flex;
          justify-content: center;
          padding: 0 3px;
          height: 25px;
          line-height: 25px;
          font-size: 13px;
          border-radius: 4px;
          align-items: center;
          margin-right: 10px;
          border: 1px solid;
        }
      }
      .more {
        color: #999;
        margin-top: 5px;
        display: flex;
        align-items: center;
      }
    }
    .right {
      font-size: 14px;
      color: #333;
      width: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      border-left: 2rpx dashed #ddd;
      padding: 10px;
      .price {
        text-align: center;
        font-size: 24px;
        color: #ed4630;
        font-weight: bold;
        .small {
          font-size: 14px;
          font-weight: normal;
        }
      }
      .center {
        text-align: center;
      }
      .btn {
        padding: 4px 10px;
        background: linear-gradient(left, #ff0000, #ffa231);
        border-radius: 20px;
        text-align: center;
        color: #fff;
        font-size: 26rpx;
        margin-top: 10px;
      }
      .circle-top-left {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 100%;
        top: -5px;
        left: -5px;
      }
      .circle-bottom-left {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 100%;
        bottom: -5px;
        left: -5px;
      }
      .circle-bottom-bg {
        background-color: var(--note-bg-color);
      }
    }
    .img-used {
      position: absolute;
      top: -20px;
      right: 85px;
      width: 100px;
      height: 100px;
    }
  }
  .more-detail {
    font-size: 13px;
    text-align: justify;
    padding: 10px;
    margin-top: -5px;
    border-radius: 0 0 5px 5px;
    color: #777;
    background-color: var(--note-bg-color);
  }
}
</style>
