<template>
  <section style="width: 100%;height: 100%;background: #fff">
    <van-cell-group style="border-bottom: 10px solid #fafafa">
      <van-cell title="车牌号" is-link>
        <template>
          <p @click="show = true" style="color: #1989fa">{{carNum}}</p>
          <van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>
        </template>
      </van-cell>
      <van-cell title="适用停车场" value="万达停车场"/>
      <van-cell title="卡类别" value="小型车月卡"/>
      <van-cell title="卡名称" value="万达月卡"/>
      <van-cell title="生效时间" is-link>
        <template>
          <p @click="showDate = true" style="color: #1989fa"> {{valueStart}}</p>
        </template>
      </van-cell>
      <van-cell title="失效时间" value="2023-10-20"/>

      <van-cell title="购买数量">
        <template>
          <van-stepper v-model.number="cardNum" theme="round" button-size="22" disable-input/>
        </template>
      </van-cell>
    </van-cell-group>


    <van-popup v-model="showDate" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
        v-show="showDate"
        v-model="currentDate"
        type="date"
        title="选择生效日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmDate"
        @cancel="cancelDate"
      />
    </van-popup>


    <van-cell-group style="border-bottom: 10px solid #fafafa">
      <van-cell title="单价">
        <template>
          <p style="font-size: 16px;font-weight: 600;color: #000;">3420.00元</p>
        </template>
      </van-cell>


      <van-cell title="单价">
        <template>
          <p style="font-size: 16px;font-weight: 600;color: #f00;">20.00元</p>
        </template>
      </van-cell>


      <van-cell title="支付金额">
        <template>
          <p style="font-size: 16px;font-weight: 600;color: #000;">3420.00元</p>
        </template>
      </van-cell>

    </van-cell-group>


    <div class="leftRightPadding" style="margin-top: 34px">
      <!--<mt-button type="danger" size="large"></mt-button>-->
      <van-button type="info" block>购买</van-button>
    </div>

  </section>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "buyVipCard",
  data() {
    return {
      carNum: "京A1231",
      show: false,
      actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2025, 10, 11),
      currentDate: new Date(2023, 10, 11),
      valueStart: "2023-10-01",
      showDate: false,
      cardNum: 1
    };
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.carNum = item.name;
      Toast(item.name);
    },
    confirmDate(val) {
      console.log(val);
      this.valueStart = val;
      this.showDate = false;
    },
    cancelDate() {
      this.showDate = false;
    }
  }
};
</script>

<style scoped>
  .order-line-bold {
    background: #fafafa;
    height: 12px;
    margin-top: 12px;
    padding: 0px;
    overflow: hidden;
  }
</style>
