<template>
  <section class="">
    <div class="vipCardBg">
      <!--<ul class="cardTypeList">-->
      <!--<li>年卡</li>-->
      <!--<li>月卡</li>-->
      <!--<li>半年卡</li>-->
      <!--</ul>-->

      <div class="van-ellipsis" style="padding: 20px 0  10px 20px"> {{plName}}</div>
      <div class="van-ellipsis" style="padding: 0 0  0 20px">{{plAddress}}</div>
    </div>
    <van-cell-group inset style="margin-bottom: 10px;" v-for="(i,index) in list" @click="LinkBuyCard(i)" :key="index">
      <van-cell>
        <template #title>
          <span style="font-size: 20px;font-weight: 600;">{{i.cardType | capitalize}}优惠</span>
        </template>
      </van-cell>
      <van-cell :title="i.cardName" center value="立即购买" :label="'单价：'+(i.actPrice/100).toFixed(2)" is-link>
      </van-cell>
    </van-cell-group>

    <!--<van-cell-group inset style="margin-bottom: 10px;">-->
    <!--<van-cell >-->
    <!--<template #title>-->
    <!--<span style="font-size: 20px;font-weight: 600;">年卡</span>-->
    <!--</template>-->
    <!--</van-cell>-->
    <!--<van-cell title="万达月卡cardName" center value="立即购买" label="单价：￥1800.00"  is-link>-->
    <!--</van-cell>-->
    <!--</van-cell-group>-->
  </section>

</template>

<script>

import { queryVipCardByPlNo } from "@/api/card/card";
export default {
  name: "buyCardDetail",
  data() {
    return {
      plNo: "",
      plName: "",
      plAddress: "",
      list: []
    };
  },
  created() {
    this.plNo = this.$route.query.plNo;
    this.plName = this.$route.query.plName;
    this.plAddress = this.$route.query.plAddress;
    console.log(this.plNo);
    this.queryVipCardByPlNo();
  },
  methods: {
    LinkBuyCard(i) {
      this.$router.push({
          name: "buyVipCard",
          query: {
            cardName:i.cardName,
            carType:i.carType,
            cardType:i.cardType,
            actPrice:i.actPrice,
            discValue:i.discValue,
            cardNo:i.cardNo,
            plName:this.plName,
            plNo:this.plNo
          }
        }
      );
    },
    queryVipCardByPlNo() {
      let jsondata = {
        parkNo: this.plNo,
        saleChannel: "2"
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      queryVipCardByPlNo(jsondata).then(response => {
        // console.log(response.data[0].parkList);
        console.log(response);
        this.list = response.data;
      });
    }
  },
  filters: {
    capitalize: function(value) {
      if (value == 1) {
        return "年卡";
      }
      if (value == 2) {
        return "半年卡";
      }
      if (value == 3) {
        return "季卡";
      }
      if (value == 4) {
        return "月卡";
      }
      if (value == 5) {
        return "日卡";
      }
      if (value == 6) {
        return "错峰年卡(周末免费)";
      }
      if (value == 7) {
        return "错峰月卡(周末免费)";
      }
      if (value == 8) {
        return "错峰夜晚包月";
      }
    }
  }
};
</script>

<style scoped lang="less">
  .vipCardBg {
    margin-top: 14px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    /* width: 100%; */
    height: 150px;
    background-image: url('../../assets/images/cards/vipcardbg.png');
    background-repeat: no-repeat;
    /* background-position: center center; */
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    font-size: 16px;
    color: #fff;
  }

  .cardTypeList {
    padding: 20px 0 10px 20px;
    overflow: hidden;
    > li {
      float: left;
      margin-right: 10px;
      padding: 2px 20px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .3);
    }
  }
</style>
