<template>
  <div style="height: 100%;display: flex;flex-direction: column;">
    <div style="flex: 1;overflow-y: auto;padding: 15px">
      <div  class="noCardData" v-if="cardList.length == 0">
        <p>您目前没有任何会员卡,</p>
        <p>请绑定车牌通过认证后再购买会员卡!</p>
      </div>

      <div v-else>
        <div class="cardBg"  v-for="(i ,index) in cardList">
          <ul class="cardList">
            <li>
              会员卡- {{i.cardType=='1'?'年卡':(i.cardType=='2'?'半年卡':(i.cardType=='3'?'季卡':(i.cardType=='4'?'月卡':(i.cardType=='5'?'日卡':''))))}}
            </li>
            <li>
              绑定车牌号： {{ i.carNumber }}
            </li>
            <li>
              有效时间段： {{i.effDate}} 至 {{i.expDate}}
            </li>
            <li>
              卡名称： {{ i.cardName }}
            </li>
          </ul>
        </div>
        <!--cardType=='1'?'年卡':(cardType=='2'?'半年卡':(cardType=='3'?'季卡':(cardType=='4'?'月卡':(cardType=='5'?'日卡':''))))-->


      </div>



    </div>
    <x-button type="primary" @click.native="$router.push({path:'buyCard'})">购买会员卡</x-button>
  </div>
</template>

<script>
import { queryVipCardsByCustId } from "@/api/cards/cards";
export default {
  name: "Cards",
  data() {
    return {
      cardList: []
    };
  },
  mounted() {
    this.queryVipCardsByCustId();
  },
  methods: {
    queryVipCardsByCustId: function() {
      let jsondata = this.$utils.commonParams();
      jsondata.sign = this.$utils.signObject(jsondata);
      queryVipCardsByCustId(jsondata).then(data => {
        console.log(data);
        if (data.code == 0) {
          let res = data.data;
          this.cardList = res
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .noCardData {
    padding-top: 130px;
    background: url("../../assets/images/cards/nodata.png") no-repeat center 0;
    background-size: 121px 100px;
    text-align: center;
  }

  .cardBg {
    width: 100%;
    height: 150px;
    background: #26a2ff url("../../assets/images/cards/cards.png") no-repeat 20px 20px;
    background-size: 90% 90%;
    border-radius: 8px;
    margin-bottom: 15px;
  }
  .cardList{
    padding: 20px 0 0 20px;
    color: #fff;
    li{
      line-height: 30px;
    }
  }

</style>
