<template>
  <el-card :shadow="shadow"
           :body-style="bodyStyle"
           :class="extendClass">
    <template slot="header">
      <div v-if="mkCardType === 'simply'">
        <slot name="header">
          {{ header }}
        </slot>
        <i class="el-icon-arrow-up"
           v-if="mkBodySwitch && mkCardType === 'simply'"
           v-show="vif"
           @click="vif = false" />
        <i class="el-icon-arrow-down"
           v-if="mkBodySwitch && mkCardType === 'simply'"
           v-show="!vif"
           @click="vif = true" />
      </div>
      <slot name="header"
            v-else>
        <div>
          {{ header }}
        </div>
      </slot>
    </template>
    <slot v-if="mkBodyVif && vif" />
  </el-card>
</template>
<script>
import ElCard from 'mk-element/packages/card';

export default {
  name: 'mk-card',
  props: {
    header: {
      type: String
    },
    shadow: {
      type: String,
      default: 'always'
    },
    mkCardType: {
      type: String,
      default: ''
    },
    mkBodyPadding: {
      type: Number,
      default: 0
    },
    mkBodyVif: {
      type: Boolean,
      default: true
    },
    mkBodySwitch: {
      type: Boolean,
      default: false
    },
    mkBodyVifStart: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      vif: true
    };
  },
  components: {
    ElCard
  },
  created() {
    this.vif = this.mkBodyVifStart;
  },
  computed: {
    bodyStyle() {
      return { padding: `${this.mkBodyPadding}px` };
    },
    extendClass() {
      return {
        'mk-card-simply': this.mkCardType === 'simply',
        'mk-card-line': this.mkCardType === 'line'
      };
    }
  }
};
</script>
