<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  height: 40px;
  margin: 10px;
}
.content {
  width: 900px;
}
.tips {
  width: 100%;
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
.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 {
  margin: 10px;
  width: 201px;
  height: 310px;
  background: #f9f9f9;
  border-radius: 8px;
}
.nav-item {
  width: 100px;
  margin: 0 10px;
  text-align: center;
}
.border-bottom {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background-color: $primary;
  margin: -8px auto 0 auto;
}
.img {
  width: 201px;
    margin-bottom: -6px;
}
</style>
<template>
  <div class="content q-ma-lg bg-white">
    <div class="q-ma-lg">
      <div class="tips flex">
        <div
          @click="changeCouponType(item)"
          class="nav-item cursor-pointer"
          v-for="item in ['可使用', '已使用', '已过期']"
          :key="item"
        >
          {{ item }}
          <div :class="selectedKey === item ? 'border-bottom' : ''"></div>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="card" v-for="item in 10" :key="item">
          <div class="bg-blue">
            <div class="white text-center f16 q-pt-sm">CYN</div>
            <div class="white text-center f26">10</div>
            <div class="white text-center">
              <span>限用品類：</span><span>滿2000可用</span>
            </div>
            <div class="use text-center q-pb-sm">
              <span>限用品類：</span><span>滿2000可用</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>滿2000可用</span>
            </div>
            <div class="q-my-sm">
              <span class="text-grey-6">限用品類：</span><span>滿2000可用</span>
            </div>
            <div class="flex flex-center q-mt-xl">
              <q-btn color="primary" unelevated outline  label="立即使用"></q-btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedKey: "可使用",
      form: {
        lastName: "",
        firstName: "",
      },
      model: "",
      date: "",
      options: [],
    };
  },
  methods: {
    changeCouponType(item) {
      this.selectedKey = item;
    },
    submit() {
      const verifyArr = ["fastName", "lastName"];
      verifyArr.forEach((item) => {
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
        if (item.$refs[item].hasError) {
          this.formHasError = true;
        }
      });
      if ((this.formHasError = true)) {
        return;
      }
    },
  },
};
</script>