<template>
  <div class="auto select-overspread">
    <modal :show.sync="show"  v-ref:modal large backdrop="false" >
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="cancel"><span>&times;</span></button>
        <h3 class="modal-title">卡信息 (此卡无用户信息)</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="flex">
          <div class="row">
            <label class="col-sm-2">卡号:</label>
            <span class = "col-sm-3">{{cardinfo.CardID}}</span>
          </div>
          <div class="row">
            <label class="col-sm-2">厂名:</label>
            <span class = "col-sm-3">{{cardinfo.Factory}}</span>
          </div>
          <div class="row">
            <label class="col-sm-2">气量:</label>
            <span class = "col-sm-3">{{cardinfo.Gas}}</span>
          </div>
          <div class="row">
            <label class="col-sm-2">金额:</label>
            <span class = "col-sm-3">{{cardinfo.Money}}</span>
          </div>
          <div class="row">
            <label class="col-sm-2">写卡次数:</label>
            <span class = "col-sm-3">{{cardinfo.Times}}</span>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-primary"  @click='confirm()'>确认</button>
        <!-- <button type="button" class="btn btn-default" @click='cancel()'>取消</button> -->
      </footer>
    </modal>
  </div>
</template>
<script>
export default {
  title: '卡信息',
  props: ['show', 'cardinfo'],
  methods: {
    cancel  () {
      this.show = false
    },
    confirm () {
      this.show = false
    }
  }
}
</script>
