<template>
  <ul class="comp-list-wrapper">
    <li class="list"  v-for="(item, index) in dataList" :key="index">
      <section class="item">
        <div class="left">
          <p class="name" :class="{'status': !item.disabled}">{{item.couponName}}</p>
          <div class="other">
            <p v-if="item.validTimeType == 2" class="time-end" :class="{'status': !item.disabled}">
              <span v-if="item.couponStatus == 1">距离到期仅剩<span class="coupon-pc"> {{item.validLeftDays}} </span>天</span>
              <span v-else>领取后{{item.validTimeSpan}}天内有效</span>
            </p>
            <p v-else class="time-end" :class="{'status': !item.disabled}">{{parseTime(item.startTime)}} 至 {{parseTime(item.expireTime)}}</p>
            <p v-show="!item.isAll" class="rules">
              <span :class="{'status': !item.disabled}" @click.prevent.stop="toggleRules(item)">使用规则</span>
              <img v-if="!item.showRules" src="../../images/coupon/arrow-down.png" alt="">
              <img v-else src="../../images/coupon/arrow-up.png" alt="">
            </p>
            <article v-show="!item.disabled" class="status-wrapper">
              <img v-if="item.isAll && item.couponStatus == 3" src="../../images/coupon/status-lw.png" alt="">
              <img v-if="item.isAll && item.couponStatus == 6" src="../../images/coupon/status-sy.png" alt="">
              <img v-if="item.isAll && item.couponStatus == 5" src="../../images/coupon/status-sx.png" alt="">

              <img v-if="!item.isAll && item.couponStatus == 6" src="../../images/coupon/status-sy.png" alt="">
              <img v-if="!item.isAll && (item.couponStatus == 3 || item.couponStatus == 5)" src="../../images/coupon/status-gq.png" alt="">

              <!-- <img v-else-if="item.couponStatus == 4" src="../../images/coupon/status-gq.png" alt="">
              <img v-else-if="item.couponStatus == 5" src="../../images/coupon/status-gq.png" alt="">
              <img v-else-if="item.couponStatus == 6" src="../../images/coupon/status-gq.png" alt=""> -->
            </article>            
          </div>
        </div>
        <div class="right" :class="{'around': !item.disabled}" @click="revieveOrUse(item)">
          <div class="top">
            <p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': !item.disabled}">{{yuan(item.discountAmount)}}</span></p>
            <p class="desc" :class="{'opacity': !item.disabled}">满{{yuan(item.requiredTotalFee)}}元可用</p>
          </div>
          <span v-show="item.disabled && item.couponStatus != 4" class="btn coupon-pc">{{getBtnText(item)}}</span>
          <span v-show="item.disabled && item.couponStatus == 4" class="btn-no">未开始</span>
        </div>
      </section>
      <section v-show="item.showRules" class="rule-list">
        <p v-html="item.couponExplain"></p>
      </section>
    </li>
  </ul>
</template>
<script>
import { convertToYuan, parseTime } from "@/utils"
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showBtn: true,
    }
  },
  methods: {
    // 点击切换规则
    toggleRules(item) {
      console.log(item);
      item.showRules = !item.showRules;
    },

    // 转换按钮的文案
    getBtnText(item) {
      if( item.couponStatus == 0 || item.couponStatus == 1) {
        return item.couponStatus == 0 ? "立即领取" : "去使用";
      } else {
        return ""
      }
    },

    // 领取或使用
    revieveOrUse(item) {
      this.$emit("revieveOrUse", item);
    },

    // 显示元
    yuan(fen) {
      return convertToYuan(fen);
    },

    // parseTime
    parseTime(time) {
      return parseTime(time, '{yyyy}-{mm}-{dd}');
    }
  },
}
</script>
<style lang="less" scoped>
.comp-list-wrapper {
  font-size: 14px;
  padding: 0 15px 30px;
  .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    // height: 115px;
    justify-content: space-between;
    padding: 15px;
    margin: 12px 0;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.05);
    .item {
      display: flex;
      flex-direction: row;
      width: 100%;
      // height: 115px;
      justify-content: space-between;
      .left {
        position: relative;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 210px;
        height: 88px;
        .name {
          font-size: 15px;
          font-weight: 700;
          color: #373839;
          line-height: 1.4;
        }
        .other {
          font-size: 12px;
          color: #676869;
          p {
            line-height: 1.6;
          }
          .rules {
            display: flex;
            flex-direction: row;
            align-items: center;
            img {
              margin-left: 2px;
              width: 12px;
            }
          }
          .status-wrapper {
            position: absolute;
            top: 10px;
            left: 150px;
            img {
              width: 75px;
              height: 75px;
            }
          }
        }
      }
      .right {
        height: 88px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        &.around {
        justify-content: space-around;
        }
        .top {
          display: flex;
          flex-direction: column;
          .symbol {
            margin-right: 2px;
            font-size: 12px;
          }
          .price {
            height: 30px;
            line-height: 30px;
            font-weight: 700;
            font-size: 30px;
          }
          .desc {
            font-size: 11px;
            color: #676869;
          }
        }
        .btn {
          display: flex;
          width: 76px;
          height: 28px;
          line-height: 28px;
          justify-content: center;
          align-items: center;
          // border: 1px solid #FB5B52;
          border-radius: 14px;
          font-size: 12px;
          font-weight: 700;
          color: #fff;
          background: #FB5B52;
        }
        .btn-no {
          display: flex;
          width: 70px;
          height: 25px;
          justify-content: center;
          align-items: center;
          line-height: 25px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: 700;
          color: #979899;;
          background: #F0F1F2;
        }
      }
    }
    .rule-list {
      margin-top: 15px;
      padding-top: 15px;
      padding-bottom: 5px;
      border-top: 1px solid #F0F1F2;
      color: #979899;
      font-size: 12px;
    }
  }
  .coupon-pc {
    font-weight: 700;
    color: #FB5B52;
  }
  .opacity {
    opacity: 0.6;
  }
  .status {
    color: #979899 !important;
  }
}
</style>