<template>
  <div class="item-container">
    <div class="item-icon">
      <span class="icon" />
      <ul v-if="showProgress" class="progress-line">
        <li v-for="(e, i) in 15" :key="i" />
      </ul>
    </div>
    <div class="item-content">
      <div class="img-box">
        <img :src="prize.prizeImg" />
        <div class="back">{{ prizeTypeMap[prize.prizeType] }}</div>
      </div>
      <div class="prize-info">
        <div class="prize-fir">
          <span>{{ prize.prizeNum }}</span>
          {{ prize.prizeName }}
        </div>
        <div class="prize-sed">满{{ prize.orderMoney }}元可领奖品</div>
        <div class="prize-trd">
          <div>奖品剩余：{{ prize.prizeSurplusCnt }} 份</div>
          <div
            @click="() => $emit('receive', prize)"
            class="prize-btn"
            v-lz-click="'14'"
          >
            {{ prize.prizeStatus === 2 ? "已领取" : "领取" }}
            <div
              class="disable-mask"
              @click.stop="() => disableText(prize.prizeStatus)"
              v-if="disableBtn(prize.prizeStatus)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showProgress: {
      type: Boolean,
      default: false
    },
    prize: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      prizeTypeMap: {
        1: "京豆",
        2: "优惠券",
        3: "实物",
        4: "积分",
        5: "专享价",
        6: "红包",
        7: "礼品卡",
        8: "京东E卡",
        9: "plus会员卡",
        10: "爱奇艺会员卡",
        11: "积分"
      },
      // 1：不满足条件；2：已经领取过；3：奖品已经领光
      statusText: {
        1: "不满足条件领取条件哦~",
        2: "已经领取过~",
        3: "手慢了，奖品已领光~"
      }
    };
  },
  methods: {
    disableBtn(status) {
      //  && status !== 1 && status !== 2 && status !== 3
      return status !== 0;
    },
    disableText(status) {
      this.$toast(this.statusText[status]);
    }
  }
};
</script>

<style lang="scss" scoped>
.item-container {
  width: 100%;
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 0.2rem;

  .item-icon {
    width: 0.53rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .icon {
      display: inline-block;
      height: 0.18rem;
      width: 0.18rem;
      background: rgb(234, 73, 52);
      border-radius: 50%;
    }

    .progress-line {
      position: absolute;
      top: calc(0.16rem + 100%);
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      gap: 0.11rem;
      flex-direction: column;
      li {
        height: 0.04rem;
        width: 0.04rem;
        background: rgb(234, 73, 52);
        border-radius: 50%;
      }
    }
  }

  .item-content {
    width: 6.3rem;
    height: 2.44rem;
    background-color: #fff;
    border-radius: 0.1rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0 0.2rem;

    .prize-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex-grow: 1;
      color: rgb(38, 38, 38);
      font-weight: 600;
      .prize-fir {
        span {
          font-weight: normal;
          font-size: 0.6rem;
          color: rgb(242, 39, 12);
        }
        margin-bottom: 0.1rem;
      }
      .prize-sed {
        margin-bottom: 0.3rem;
        font-size: 0.24rem;
        color: rgb(51, 51, 51);
      }
      .prize-trd {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.01rem;
        width: 100%;
        color: rgb(102, 102, 102);

        .prize-btn {
          width: 1.5rem;
          height: 0.5rem;
          background: linear-gradient(90deg, #f2270c 0%, #ff6420 100%);
          border-radius: 0.25rem;
          font-size: 0.24rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          z-index: 0;
          overflow: hidden;

          .disable-mask {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            background: rgba($color: #ffffff, $alpha: 0.5);
          }
        }
      }
    }

    .img-box {
      width: 2rem;
      height: 2rem;
      border: 2px solid #ff3633;
      border-radius: 0.1rem;
      position: relative;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
      }
      .back {
        width: 2rem;
        height: 0.7rem;
        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/138524/9/21064/8976/619cdd47E1819f3a9/140f4a58e373a32d.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        bottom: -2px;
        left: -2px;
        text-align: center;
        padding-top: 0.32rem;
        font-size: 0.24rem;
        color: #fff;
      }
    }

    &::after {
      content: "";
      position: absolute;
      height: 0.16rem;
      width: 0.16rem;
      top: 50%;
      left: -0.08rem;
      transform: translate(0, -50%) rotate(45deg);
      background-color: #fff;
      border-radius: 0 0 0 0.05rem;
    }
  }
}
</style>
