<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 in list" @click="LinkBuyCard">
      <van-cell >
        <template #title>
          <span style="font-size: 20px;font-weight: 600;">年卡</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:'',
      list:[]
    }
  },
  created(){
    this.plNo = this.$route.query.plNo
    console.log(this.plNo)
    this.queryVipCardByPlNo()
  },

  methods:{
    LinkBuyCard(){
      this.$router.push({
          name: "buyVipCard"
        }
      );
    },
    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
      });
    }
  }
};
</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>
