<template>
  <div>
    <Modal v-model="modalShow" title="单据列表" :width="600">
      <div class="card-container">
        <div class="card" v-for="item in billList" :key="item.value" @click="handleCardClick(item.value)">
          <Card>
            <h3>{{item.title}}</h3>
          </Card>
        </div>
      </div>
    </Modal>

    <typeBill ref="billRef"></typeBill>
  </div>
</template>
<script>
import typeBill from './typesBill.vue'

export default {
  components: {
    typeBill,
  },
  props: {
    billList: Array,
  },
  data() {
    return {
      modalShow: false,
    }
  },
  methods: {
    handleCardClick(val) {
      this.$refs.billRef.modal_visible = true
      this.$refs.billRef.templateName = val
      this.$refs.billRef.init = true
      this.$refs.billRef.state = ''

      this.$nextTick(() => {
        this.modalShow = false
      })
    },
  },
}
</script>
<style scoped lang="less">
.card-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  cursor: pointer;
  .card {
    margin-bottom: 10px;
    /deep/ .ivu-card {
      h3 {
        height: 21px;
        width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
