<template>
  <div
    class="coupon"
    :class="{
      used: detail.usageStatus == 1,
      exp: detail.usageStatus == 2,
      disable: isEdit ? isDisabled : '',
    }"
    v-if="detail"
    @click="checkItem(detail)"
  >
    <span class="sdot" v-if="detail.issuanceType == 0"
      >{{ detail.canBeGetNum }} <span class="text">张</span></span
    >
    <!-- 
    <span class="edot"></span> -->
    <div class="couponWrap">
      <div class="couponPrice">
        <img
        v-if="isDisabled"
          class="couponIcon couponIcon1"
          :src="isEdit||(detail.usageStatus == 2||detail.usageStatus == 1)? dis_img : img"
          alt=""
        />
          <img
          v-else
          class="couponIcon"
          :src="!isEdit? dis_img : img"
          alt=""
        />

        <div class="descWrap">
          <!--  detail.couponName || detail.name  -->
          <div class="title">{{detail.typeDetail | coupontypeDetailType}}</div>
          <div class="desc">
            <!-- <span>{{ detail.typeDetail | coupontypeDetailType }}</span> -->
            <span>满{{ detail.fullAmount }}</span
            ><span>减{{ detail.faceValue }}</span>
          </div>
        </div>
      </div>
      <div class="time" v-if="detail.issuanceType != 0">
        有效期: {{ dayjs(detail.useStartDate).format("YYYY.MM.DD") }} 至
        {{ dayjs(detail.useDeadlineDate).format("YYYY.MM.DD") }}
      </div>
      <div
        class="time"
        v-if="detail.issuanceType == 0 && detail.effectiveType == 'DAYS'"
      >
        自领取
        <span style="color: #ff761a">{{ detail.deadline }}</span> 日内有效
      </div>
      <div
        class="time"
        v-if="detail.issuanceType == 0 && detail.effectiveType == 'TIME_BUCKET'"
      >
        有效期: {{ dayjs(detail.effectiveStartTime).format("YYYY.MM.DD") }} 至
        {{ dayjs(detail.effectiveExpireTime).format("YYYY.MM.DD") }}
      </div>
    </div>
    <div class="line">
      <img src="./icons/line.png" alt="" />
    </div>
    <div class="detail van-hairline--left">
      <!-- couponCodeId -->
      <div class="amount">{{ detail.faceValue }}</div>
      <van-checkbox
        :name="detail.couponCodeId"
        :disabled="isDisabled"
        v-if="isEdit && !isDisabled && detail.issuanceType != 0"
        class="checkItem"
        ref="checkItem"
      ></van-checkbox>
      <div class="expgetBtn getBtn" v-if="!isEdit && detail.usageStatus == 2">
        已失效
      </div>
      <div class="usedgetBtn getBtn" v-if="!isEdit && detail.usageStatus == 1">
        已使用
      </div>
      <div
        class="getBtn"
        v-if="isEdit && detail.issuanceType == 0"
        @click="getCoupon(detail)"
      >
        领取
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { manualIssueCoupon } from "./api";
export default {
  props: {
    detail: {
      type: Object,
      default: null,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      img: require("./icons/bg.png"),
      dis_img: require("./icons/dis_bg.png"),
    };
  },
  methods: {
    dayjs,
    checkItem(detail) {
      if (!this.isDisabled) this.$refs.checkItem.onClick(detail);
    },
    async getCoupon(detail) {
      try {
        const res = await manualIssueCoupon({ couponId: detail.id });
        this.$toast({
          message: "领取成功",
          forbidClick: true,
          // onOpened
          onClose: () => {
            this.$emit("getList");
          },
        });
      } catch (e) {
        this.$emit("getList");
        console.log(e);
      }
    },
  },
  computed: {
    isdisabled() {
      return this.isDisabled;
    },
  },
};
</script>

<style scoped lang="less">
.coupon.used {
  .couponPrice {
    // &::before {
    //   background: url("./icons/used.png") no-repeat center;
    //   width: 0.43rem;
    //   height: 0.43rem;
    //   top: 0.1rem;
    //   right: 0.16rem;
    //   content: "";
    //   background-size: cover !important;
    //   position: absolute;
    // }
  }
  .getBtn {
    height: 0.24rem;
    line-height: 0.24rem;
    background: rgba(245, 245, 245, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.12rem;
    background: linear-gradient(270deg, #ebebeb 0%, #d0d0d0 100%);
    border-radius: 0.12rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border: none;
  }
}
.coupon.exp {
  .couponPrice {
    // &::before {
    //   background: url("./icons/exp.png") no-repeat center;
    //   width: 0.43rem;
    //   height: 0.43rem;
    //   top: 0.1rem;
    //   right: 0.16rem;
    //   content: "";
    //   background-size: cover !important;
    //   position: absolute;
    // }
  }
  .getBtn {
    height: 0.24rem;
    line-height: 0.24rem;
    background: rgba(245, 245, 245, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.12rem;
    background: linear-gradient(270deg, #ebebeb 0%, #d0d0d0 100%);
    border-radius: 0.12rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border: none;
  }
}
.disable.coupon,
.coupon.used,
.coupon.exp {
  // 禁选状态
  // background: url("./icons/dis_bg.png") no-repeat center;
  background-size: contain;
  background-color: #fff;
  width: 3.5rem;
  height: 1.06rem;

  .time {
    font-size: 0.1rem;
    color: rgba(0, 0, 0, 0.25) !important;
    max-width: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
  }
  .couponPrice {
    .amount {
      color: rgba(0, 0, 0, 0.25);
      &::before {
        content: "¥";
        display: inline-block;
        font-weight: normal;
        color: rgba(0, 0, 0, 0.25);
      }
    }
    .descWrap {
      .title {
        color: rgba(0, 0, 0, 0.25);
        font-weight: 500;
        // font-weight: bold;
      }
      .desc {
        // margin: 0.08rem 0;
        display: flex;
        align-items: center;
        span {
          font-size: 0.13rem;
          color: rgba(0, 0, 0, 0.25);
          // padding: 0 0.02rem;
          display: inline-block;

          // line-height: 1.2;
        }
      }
    }
  }
  .detail {
    .amount {
      position: relative;
      text-align: center;
      color: #adadad;
      font-size: 0.28rem;
      font-weight: bold;
      &::before {
        content: "¥";
        display: inline-block;
        font-weight: normal;
        font-size: 0.14rem;
        margin-right: 0.04rem;
        margin-top: 0.02rem;
        color: #adadad;
      }
    }
  }
}
.coupon {
  // background: url("./icons/bg.png") no-repeat center;
  background-color: #fff;
  background-size: contain;
  width: 3.5rem;
  height: 1.06rem;
  margin: auto;
  margin-top: 0.15rem;
  border-radius: 0.05rem;
  // overflow: hidden;
  // border: 1px solid #FFDCDC;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .line {
     height: 90%;
     overflow: hidden;
    img {
      width: 1px;
     
    }
  }
  .couponWrap {
    padding: 0.2rem 0 0.14rem 0.2rem;
    .time {
      margin-top: 0.14rem;
      font-size: 0.12rem;
      color: #6d7278;
      max-width: 2.4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 0.17rem;
    }
    .couponPrice {
      .couponIcon {
        width: 0.49rem;
        height: 0.49rem;
      }
      // height: 0.62rem;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .descWrap {
      margin-left: 0.12rem;
      width: 1.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .title {
        font-size: 0.14rem;
        line-height: 0.2rem;
        height: 0.2rem;
        color: #1a1a1a;
        font-weight: 600;
        margin-bottom: 0.08rem;
        // font-weight: bold;
      }
      .desc {
        // margin: 0.08rem 0;
        display: flex;
        align-items: center;
        span {
          font-size: 0.13rem;
          color: #6d7278;
          padding: 0 0.02rem;
          display: inline-block;
          font-weight: 400;
          line-height: 0.18rem;
          // line-height: 1.2;
        }
      }
    }
  }
  .getBtn {
    margin: 0 auto;
    width: 0.63rem;
    height: 0.24rem;
    line-height: 0.24rem;
    background: linear-gradient(270deg, #fd9d00 0%, #ff761a 100%);
    border-radius: 0.12rem;
    font-size: 0.12rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .detail {
    // display: flex;
    // flex-direction: column;
    // justify-content: space-around;
    // padding: 0 0.18rem;
    width: 1.14rem;
    position: relative;
    .amount {
      position: relative;
      text-align: center;
      color: #fa6400;
      font-size: 0.28rem;
      font-weight: bold;
      &::before {
        content: "¥";
        display: inline-block;
        font-weight: normal;
        font-size: 0.14rem;
        margin-right: 0.04rem;
        margin-top: 0.02rem;
        color: #fa6400;
      }
    }

    // background: linear-gradient(to left, rgba(255, 160, 160, .1008) 0%, rgba(255,102,102, .14) 100%);

    .checkItem {
      margin: 0 auto;
      justify-content: center;
    }
  }
  .sdot {
    background: linear-gradient(270deg, #fd9d00 0%, #ff761a 100%);
    border-radius: 0px 8px 0px 8px;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 0.07rem;
    height: 0.2rem;
    font-size: 0.12rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    line-height: 0.2rem;
    color: #fff;
    text-align: center;
    .text {
      font-size: 0.1rem;
      line-height: 0.13rem;
    }
  }
}
</style>
