<template>
  <div class="collapse" :class="classes">
    <div class="collapse-hd">
      <div class="collapse-icon" @click="toggle">
        <i class="el-icon-remove-outline" v-if="isActive"></i>
        <i class="el-icon-circle-plus-outline" v-else></i>
      </div>
      <div class="collapse-title">
        <slot name="title">{{ title }}</slot>
      </div>
    </div>
    <div class="collapse-bd" v-show="isActive">
      <slot>{{ content }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: { type: Boolean, default: false },
    title: { type: String },
    content: { type: String }
  },
  data() {
    return {
      isActive: false
    }
  },
  computed: {
    classes() {
      return { 'is-active': this.isActive }
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive
      this.$emit('input', this.isActive)
    }
  }
}
</script>

<style lang="scss" scoped>
.collapse {
  margin-top: 10px;
}
.collapse-hd {
  display: flex;
  font-size: 14px;
  line-height: 20px;
  color: #222;
}

.collapse-icon {
  margin-right: 6px;
  font-size: 14px;
  cursor: pointer;
  color: #999;
}
.collapse-bd {
  padding-left: 20px;
  color: #666;
  p {
    color: #666 !important;
  }
}
</style>
