<template>
  <MyAnimate :enter="enter" :leave="leave">
    <div class="my-card">
      <component :is="card" :title="title" v-bind="$attrs">
        <slot />
      </component>
    </div>
  </MyAnimate>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import MyAnimate from '../MyAnimate/my-animate.vue'
import mode1 from './mode-1.vue'
import mode2 from './mode-2.vue'
import mode3 from './mode-3.vue'
import mode4 from './mode-4.vue'
import modeBorder from './mode-border.vue'
import modeBorder2 from './mode-border2.vue'
import '../main.styl'

type ModeType = '1' | '2' | '3' | '4' | 'border' | 'border2'

export default defineComponent({
  name: 'MyCard',
  displayName: 'm-card',
  components: {
    MyAnimate,
    mode1,
    mode2,
    modeBorder,
  },
  props: {
    title: {
      type: String as PropType<string>,
      default: '',
    },
    mode: {
      type: String as PropType<ModeType>,
      default: '4',
    },
    enter: {
      type: String as PropType<string>,
      default: 'fadeInLeft',
    },
    leave: {
      type: String as PropType<string>,
      default: 'fadeOutLeft',
    },
  },
  setup(props) {
    const card = computed(() => {
      switch (props.mode) {
        case '1':
          return mode1
        case '2':
          return mode2
        case '3':
          return mode3
        case '4':
          return mode4
        case 'border':
          return modeBorder
        case 'border2':
          return modeBorder2
        default:
          return mode1
      }
    })
    return {
      card,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.my-card
  $full()
  // width initial
  // height initial
  overflow hidden
  z-index 10
  :deep(.card-wrapper)
    $full()
    // padding .05rem .1rem
    position relative
  :deep(.card-title)
    max-height .2rem
  :deep(.card-content)
    height calc(100% - .2rem)
    overflow-y auto
    overflow-x hidden
    // $blur()
</style>
