<template>
  <div class="coupon">
    <div class="recharge_coupon_bottom" v-if="couponList.length">
      <div class="recharge_coupon_bottom_item" v-for="(item,index) in couponList" :key="index">
        <div class="recharge_coupon_bottom_left">
          <div class="recharge_coupon_bottom_left_num">
            <span v-if="item.type == 1 || item.type == 3">¥</span>
            <span class="num" v-if="item.type == 1 || item.type == 3">{{item.money}}</span>
            <span class="num" v-if="item.type == 2">{{item.discount}}</span>
            <span v-if="item.type == 2">折</span>
          </div>
          <div class="recharge_coupon_bottom_sub">
            <span v-if="item.type == 2">最高减{{ item.maxDiscount }}元</span>
            <span v-if="item.type == 1">满{{ item.limitFee }}元可用</span>
          </div>
        </div>
        <div class="recharge_coupon_bottom_middle">
          <div></div>
        </div>
        <div class="recharge_coupon_bottom_right">
          <div class="recharge_coupon_bottom_date">
            <div>{{item.name}}</div>
            <div>有效期：{{item.validStartTime}} - {{item.validEndTime}}</div>
          </div>
          <div class="recharge_coupon_bottom_number">
            <span>x{{item.num}}张</span>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else style="padding-top:10%;" description="暂无可用优惠券"></el-empty>
  </div>
</template>

<script>
import { getCouponList, getCouponExplain } from "../../api/amount.js";
import tool from "../../api/tool.js";
export default {
  name: "couponIndex",
  data() {
    return {
      couponList: [],
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.getCouponList();
  },
  methods: {
    showType(type) {
      let name = "";
      // v.type === 1 ? '满减劵' : '折扣券'
      switch (type) {
        case 1:
          name = "满减劵";
          break;
        case 2:
          name = "折扣券";
          break;
        case 3:
          name = "立减劵";
          break;
        default:
          break;
      }
      return name;
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.couponList = [];
      this.getCouponList();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.couponList = [];
      this.getCouponList();
    },
    getCouponList() {
      getCouponList({ status: 0, isNew: 1 }).then((res) => {
        if (res.code === 200) {
          this.couponList = res.data.data.map((v) => {
            v.validStartTime = tool.getFormatDate(
              new Date(v.validStartTime),
              "yyyy.MM.dd"
            );
            v.validEndTime = tool.getFormatDate(
              new Date(v.validEndTime),
              "yyyy.MM.dd"
            );
            return v;
          });
          this.total = res.data.totalNums || 0;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon {
  height: calc(100vh - 184px);
  background-color: #fff;
  .recharge_coupon_bottom {
    padding: 15px 17px;
    display: flex;
    flex-wrap: wrap;
    .recharge_coupon_bottom_item {
      width: 410px;
      height: 72px;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;
      margin-right: 24px;
      .recharge_coupon_bottom_left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 110px;
        margin-top: 10px auto;
        text-align: center;
        border-radius: 8px;
        background-color: #fff;
        padding: 10px 0;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        .recharge_coupon_bottom_left_num {
          span {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 20px;
            margin-left: 2px;
            color: #ec1414;
          }
          .num {
            font-size: 26px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ec1414;
          }
        }

        .recharge_coupon_bottom_sub {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 20px;
          color: #666666;
        }
      }
      .recharge_coupon_bottom_middle {
        display: flex;
        align-items: center;
        div {
          height: 100%;
          padding: 10px 0;
          height: 55px;
          border-right: 1px dashed #ec1414;
          box-sizing: border-box;
        }
      }
      .recharge_coupon_bottom_right {
        border-radius: 8px;
        background-color: #fff;
        flex: 1;
        position: relative;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        .recharge_coupon_bottom_date {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 25px;
          color: #333333;
          div:last-child {
            height: 20px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 20px;
            color: #999999;
          }
        }
        .recharge_coupon_bottom_number {
          display: flex;
          align-items: center;
          span {
            width: 63px;
            height: 22px;
            line-height: 22px;
            border: 1px solid #ec1414;
            border-radius: 18px;
            text-align: center;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ec1414;
            cursor: pointer;
            &:hover {
              background-color: #ec1414;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
</style>
