<template>
  <div class="coupon">
    <div class="list">
      <div class="item" v-for="(v,i) in couponList" :key="i">
        <div class="top-content">
          <div class="money" v-if="v.type === 1">
            <span class="samll-size">￥</span>
            <span class="big-size">{{v.money}}</span>
          </div>
          <div class="money" v-if="v.type === 2">
            <span class="big-size">{{v.discount}}</span>
            <span class="samll-size">折</span>
          </div>
          <div class="man-jian" v-if="v.type === 2">最高可减{{v.maxDiscount}}元</div>
          <div class="man-jian" v-if="v.type === 1">{{v.name}}</div>
          <div class="time">{{v.validStartTime}} - {{v.validEndTime}}</div>
        </div>
        <div class="bottom">
          <div class="lei-xing">
            类型：<span>{{v.type === 1 ? '满减劵' : '折扣券'}}</span>
          </div>
          <div class="lei-xing">
            数量：<span>{{Number(v.num)}}张</span>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin-top: 20px;">
      <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getCouponList, getCouponExplain } from "../../api/amount.js";
import tool from '../../api/tool.js'
export default {
  data() {
    return {
      couponList: [],
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.getCouponList();
  },
  methods: {
    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 - 274px);
  background-color: #fff;
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-right: 20px;
      .top-content {
        width: 244px;
        height: 166px;
        background: url(../../../static/image/coupon-bg.png) no-repeat;
        background-size: cover;
        text-align: center;
        box-sizing: border-box;
        padding: 30px;
        .money {
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffffff;
          .samll-size {
            font-size: 22px;
          }
          .big-size {
            font-size: 40px;
          }
        }
        .man-jian {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
        .time {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #28888a;
          margin-top: 30px;
        }
      }
      .bottom {
        padding: 10px;
        .lei-xing {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
          margin-bottom: 4px;
          span {
            color: #999;
          }
        }
      }
    }
  }
}
</style>
