<template>
  <div
    v-if="visiable"
    :class="['owl-card', typeClass]"
    @click="handleClick">
    <div :class="[titleClass]">
      {{title}}
      <span :class="['owl-card-close']" @click="closeCard">x</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'OwlCard',
  props: {
    type: { // default、disabled、light
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
  },
  computed: {
    typeClass () {
      return {
        'owl-card-default': this.type === 'default',
        'owl-card-disabled': this.type === 'disabled',
      }
    },
    titleClass () {
      return {
        'owl-card-title': this.title !== '',
      }
    }
  },
  data () {
    return {
      visiable: true,
    }
  },
  methods: {
    handleClick (event) {
      // console.log( event )
      // if (this.type === 'disabled') {
      //   event.preventDefault()
      //   event.stopPropagation()
      //   return
      // }
      this.$emit('click', event)
    },
    closeCard (event) {
      console.log(event)
      this.visiable = false
    }
  }
}
</script>