<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  margin: 10px;
}
.content {
  width: 900px;
}
.tips {
  width: 100%;
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
.bg-grey {
  background: #aaa;
  border-radius: 8px 8px 0 0;
  .use {
    color: #fff !important;
  }
}
.bg-blue {
  background: #70b1fa;
  border-radius: 8px 8px 0 0;
  .use {
    color: #67cac2;
  }
}
.bg-red {
  background: #ee727d;
  border-radius: 8px 8px 0 0;
  .use {
    color: #6f242b;
  }
}
.bg-yellow {
  background: #f2c16b;
  border-radius: 8px 8px 0 0;
  .use {
    color: #8a5d10;
  }
}
.bg-green {
  background: #67cac2;
  border-radius: 8px 8px 0 0;
  .use {
    color: #195954;
  }
}
.card-pc {
  width: 201px;
}
.card {
  margin: 10px;
  height: 310px;
  background: #f9f9f9;
  border-radius: 8px;
}
.nav-item {
  width: 33%;
  max-width: 100px;
  // margin: 0 10px;
  text-align: center;
}
.border-bottom {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--q-color-primary);
  margin: -8px auto 0 auto;
}
.img {
  width: 201px;
  margin-bottom: -6px;
}
.deadline {
  width: 68px;
  height: 68px;
  background: #ffea01;
  border-radius: 8px 0 0 0;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  .text {
    transform: translate(-5px, 10px) rotate(315deg);
  }
}
.circle {
  width: 24px;
  height: 10px;
  border-radius: 0 0 14px 14px;
  background: #f9f9f9;
}
.circle-pc {
  left: 88px;
}
.circle-mobile {
  left: calc(50% - 12px)
}
// .circle:after {
//   content: '.';
//   display: block;
//   height: 0;
//   clear: both;
//   visibility: hidden;
// }
</style>
<template>
  <div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
    <div class="q-ma-lg">
      <div class="tips flex">
        <div
          @click="changeCouponType(item)"
          class="nav-item cursor-pointer"
          v-for="item in statusMap"
          :key="item.key"
        >
          {{ item.label }}
          <div :class="CouponTimeStatus === item.key ? 'border-bottom' : ''"></div>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="card" v-for="item in couponList" :key="item.id" :class="$q.platform.is.desktop ? 'card-pc': 'full-width'">
          <div class="bg-blue relative" :class="[colorMap[item.couponsUseScope], {'bg-grey': CouponTimeStatus !== 1}]">
            <div v-if="item.IsEnd" class="absolute deadline">
              <div class="text f12">即將過期</div>
            </div>
            <div class="absolute circle" :class="$q.platform.is.desktop ? 'circle-pc': 'circle-mobile'"></div>
            <div class="white text-center f16 q-pt-lg">CYN</div>
            <div class="white text-center f26">{{ item.denomination }}</div>
            <div class="white text-center">
              <span>满{{ item.useCondition }}可用</span>
            </div>
            <div class="use text-center q-pt-sm">
              <span>{{ item.effectDate }}</span
              >-<span>{{ item.expirationDate }}</span>
            </div>
            <img class="img" src="../../assets/img/coupon.png" />
          </div>
          <div class="q-pa-sm">
            <div class="q-my-sm">
              <span class="text-grey-6">限用品類：</span
              ><span>{{ useScopeMap[item.couponsUseScope] }}</span>
            </div>
            <div class="q-my-sm">
              <span class="text-grey-6">券碼編號：</span
              ><span>{{ item.activateCode }}</span>
            </div>
            <div class="flex flex-center q-mt-lg">
              <q-btn :disable="CouponTimeStatus !== 1"
                color="primary"
                @click="useCoupon(item)"
                unelevated
                outline
                label="立即使用"
              ></q-btn>
            </div>
          </div>
        </div>
      </div>
        <div v-if="!couponList.length " class="text-center q-my-xl">
          <none-data
          iconType="order"
          title="沒有找到您的優惠券信息哦"
          subtitle=""
        ></none-data>
        </div>
    </div>
    <div v-show="pageCount" class="mt flex justify-end">
      <q-pagination
        v-model="current"
        :max="pageCount"
        direction-links
        color="primary"
        active-color="primary"
        :max-pages="5"
        @input="pageChange"
      />
    </div>
  </div>
</template>
<script>
import noneData from 'src/components/common/noneData.vue'
export default {
  components: {
    noneData
  },
  data() {
    return {
      couponList: [],
      current: 1,
      pageCount: 0,
      couponsType: 1, // 优惠券类型 1：抵用券，2：折扣卷
      CouponTimeStatus: 1, // 优惠券状态（b2b）1-可使用，2-已使用，3-已过期
      CouponsUseScope: 1, // 平台1:全场通用,2:团队,3:签证,4:机票,5:门票,6:车辆,7:自由行,8:当地游
      useScopeMap: {
        1: "全场通用",
        2: "团队",
        3: "签证",
        4: "机票",
        5: "门票",
        6: "车辆",
        7: "自由行",
        8: "当地游",
      },
      statusMap: [{key: 1, label: "可使用", },{key: 2, label: "已使用",},{key: 3, label: "已过期"}],
      colorMap: {
        1: "bg-blue",
        2: "bg-blue",
        3: "bg-red",
        4: "bg-yellow",
        5: "bg-green",
        6: "bg-green",
        7: "bg-red",
        8: "bg-yellow",
      }
    };
  },
  mounted() {
    this.getCouponList();
  },
  methods: {
    useCoupon(coupon) {
      const id = coupon.couponsType - 1
      if(id) {
      this.CommonJump('/search', {categoryId: id})
      } else {
      this.CommonJump('/index')
      }
    },
    pageChange(value) {
      this.current = value;
      this.getCouponList();
    },
    changeCouponType(item) {
      this.CouponTimeStatus = item.key;
      this.current = 1
      this.pageCount = 0
      this.couponList = []
      this.getCouponList()
    },
    getCouponList() {
      this.apipost(
        "GetMyCouponPageList_post",
        { pageIndex: this.current, pageSize: 10, CouponTimeStatus: this.CouponTimeStatus },
        (res) => {
          if (res.data.resultCode == 1) {
            const { count, pageData, pageCount } = res.data.data;
            this.count = count;
            this.pageCount = pageCount;
            this.couponList = pageData;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
  },
};
</script>