<template>
  <div class="el-collapse-box" :class="{'is-active': isActive}">
    <div class="el-collapse-box__header" @click="handleHeaderClick">
      <i class="el-collapse-box__header__arrow el-icon-arrow-right"></i>
      <slot name="title">{{title}}</slot>
    </div>
    <el-collapse-transition>
      <div class="el-collapse-box__wrap" v-show="isActive">
        <div class="el-collapse-box__content">
          <slot></slot>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
  import Emitter from 'element-ui/src/mixins/emitter';

  export default {
    name: 'ElCollapseBox',

    componentName: 'ElCollapseBox',

    mixins: [Emitter],

    components: { ElCollapseTransition },

    data() {
      return {
        isActive: false
      };
    },

    props: {
      title: String,
      active: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      active: {
        immediate: true,
        handler(val) {
          this.isActive = val;
        }
      }
    },

    methods: {
      handleHeaderClick() {
        this.isActive = !this.isActive;
        this.$emit('update:active', this.isActive);
      }
    }

  };
</script>
