<template>
  <div class="item-container">
    <div :class="['coupon-item', !isCannot && 'cannot-coupon']">
      <div class="coupon-name"><img class="coupon-icon" :src="couponItem.iconUrl" alt="" /></div>
      <div class="coupon-content">
        <div class="info">
          <div class="price-info">
            <p class="price"><span class="symbol">¥</span>{{ couponItem.faceValue }}</p>
            <span class="tip">{{ couponItem.limitDesc }}</span>
          </div>
          <div class="text">
            <p class="title">{{ couponItem.name }}</p>
            <text class="time">
              {{ couponItem.couponValidTime || "-" }}
            </text>
            <p class="details-info-btn" @click="handleDetailsInfo">
              详细信息
              <text
                class="change-info iconfont"
                :class="showDetailsInfo ? 'icon-arrow-up' : 'icon-arrow-down'"
              />
            </p>
          </div>
        </div>
        <div class="coupon-right">
          <button class="btn" type="primary" @click="toUse(couponItem.navUrl)">
            {{ couponItem.notEffective === 1 ? "先逛逛" : "立即使用" }}
          </button>
          <div v-if="couponItem.notEffective === 2" class="overdueText">即将过期</div>
        </div>
      </div>
      <div class="coupon-type">
        <img v-if="getCouponTypeImg.length" class="img" :src="getCouponTypeImg" alt="info" />
      </div>
    </div>
    <template v-if="showDetailsInfo">
      <div class="bg" />
      <div class="details-info">
        {{ couponItem.description }}
      </div>
    </template>
  </div>
</template>
<script>
import { jumpToUrl } from "@/mixins/common";
import { parseTime } from "@/utils/index";
const COUPON_IMAGE = {
  0: "https://img.lkbang.net/tenant/notEffective.png",
  1: "https://img.lkbang.net/tenant/gift-already.png",
  2: "https://img.lkbang.net/tenant/gift-overdue.png"
};
export default {
  filters: {
    dateFormat(val) {
      return parseTime(val.split(" ")[0], "{y}.{m}.{d}");
    }
  },
  props: {
    couponItem: {
      type: Object,
      default: () => {}
    },
    isCannot: {
      type: Boolean,
      default: true
    },
    isUse: {
      type: Boolean,
      default: true
    },
    currentTab: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      showDetailsInfo: false
    };
  },
  computed: {
    getCouponTypeImg() {
      const currentTab = this.currentTab;
      if (currentTab === 0 && this.couponItem?.notEffective !== 1) {
        return "";
      }
      return COUPON_IMAGE[currentTab];
    }
  },
  methods: {
    toUse(url) {
      if (this.$config("yxm")) {
        // 羊小咩
        jumpToUrl(url);
        return;
      }
      // 青海移动逻辑
      uni.switchTab({
        url: "/pages/index/index"
      });
    },
    handleDetailsInfo() {
      this.showDetailsInfo = !this.showDetailsInfo;
    }
  }
};
</script>

<style lang="scss" scoped>
.item-container {
  margin-bottom: 20rpx;
}
.coupon-item {
  position: relative;
  font-size: 24rpx;
  background: #fff;
  overflow: hidden;
  border-radius: 12rpx;
  height: 180rpx;
}
.coupon-name {
  position: absolute;
  left: 0;
  top: 0;
  .coupon-icon {
    width: 88rpx;
    height: 32rpx;
    display: block;
  }
}

.coupon-type {
  position: absolute;
  right: 20rpx;
  top: -30rpx;
  // display: none;
  .img {
    width: 120rpx;
    height: 120rpx;
    display: block;
  }
}
.coupon-content {
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20rpx 0 25rpx;
  justify-content: space-between;
  .info {
    flex: 1;
    display: flex;
    align-items: center;
    padding-right: 10rpx;
  }
  .price-info {
    width: 140rpx;
    margin-right: 34rpx;
    text-align: center;
    color: #ec3333;
    .price {
      text-align: center;
      font-size: 40rpx;
      /* #ifndef MP-ALIPAY */
      margin-bottom: 14rpx;
      /* #endif */
      /* #ifdef MP-ALIPAY */
      margin-top: 14rpx;
      /* #endif */
      font-weight: bold;
    }
    .symbol {
      font-size: 24rpx;
    }
  }
  .text {
    .title {
      font-size: 28rpx;
      color: #333333;
      /* margin-bottom: 7px; */
    }
    .time {
      color: #666666;
      /* margin-bottom: 7px; */
    }
    .details-info-btn {
      color: #999999;
      display: flex;
      align-items: center;
    }
    .change-info {
      color: $white;
      font-size: 16rpx;
      width: 20rpx;
      display: inline-block;
      line-height: 20rpx;
      text-align: center;
      margin-left: 10rpx;
      background-color: #ccc;
      border-radius: 50%;
    }
  }
}
.bg {
  opacity: 0.04;
  height: 20rpx;
  background-image: linear-gradient(180deg, #000000 26%, rgba(0, 0, 0, 0) 100%);
}
.details-info {
  background: #fff;
  padding: 20rpx;
  margin-top: -16rpx;
  font-size: 24rpx;
  color: #999999;
  box-sizing: border-box;
  box-sizing: border-box;
}
.btn {
  width: 164rpx;
  display: block;
  height: 48rpx;
  border-radius: 44rpx;
  font-size: 24rpx;
  line-height: 48rpx;
  padding: 0 !important;
  background: $background-primary;
  z-index: 10;
  border: 0;
}

.cannot-coupon {
  color: #666666 !important;
  .price-info {
    color: #666666 !important;
  }
  .title {
    color: #666666 !important;
  }

  .details-info-btn {
    color: #666666 !important;
  }
  .coupon-type {
    display: block;
  }
  .btn {
    display: none;
  }
}
.overdueText {
  width: 88rpx;
  height: 28rpx;
  border-radius: 6rpx;
  background-color: #fbe7e7;
  color: #ee0a24;
  font-size: 20rpx;
  line-height: 28rpx;
  margin-top: 15rpx;
  text-align: center;
}
.coupon-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
