<template>
  <div :class="['ts-element',cardThemeClass,cardSideClass]">
    <div class="ts-element__title" v-if="title">{{title}}</div>
    <div class="ts-element__content">
      <slot name="content"></slot>
    </div>
    <div class="ts-element__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
import create from '../utils/create-basic'
import VcLoading from '../loading/index.vue'
import VcChatIcon from '../icon/index.vue'
export default create({
  name: 'base',
  props: {
    title: String,
    themeType: {
      type: String,
      default: 'default'
    },
    sideType: {
      type: String,
      default: 'right'
    }
  },
  computed: {
    cardThemeClass () {
      return 'ts-element--' + this.themeType
    },
    cardSideClass () {
      return 'ts-element--' + this.sideType
    }
  },
  components: {
    VcLoading,
    VcChatIcon
  },
  directives: {
    color: {
      bind: function (el, binding) {
        el.style.color = 'red'
      },
      inserted: function (el) {
        el.style.display = 'block'
      }
    }
  }
})
</script>
