<template>
  <section class="AiFold">
    <div class="flex">
      <div class="expand mar-r8" :class="arrow" @click="collapse=!collapse"/>
      <div class="flex title fill">
        <div v-if="!$slots.title" v-text="title"/>
        <slot name="title" v-else/>
      </div>
    </div>
    <div class="content" :class="{collapse}">
      <slot/>
    </div>
  </section>
</template>
<script>
export default {
  name: "AiFold",
  props: {
    title: String,
    expand: Boolean
  },
  data() {
    return {
      collapse: true
    }
  },
  computed: {
    arrow: v => v.collapse ? 'el-icon-arrow-right' : 'el-icon-arrow-down'
  },
  methods: {},
  created() {
    if (this.expand) this.collapse = false
  }
}
</script>
<style scoped lang="scss">
.AiFold {
  padding: 10px;
  border-bottom: 1px solid #000;

  .title {
    width: 100%;
  }

  .content {
    box-sizing: border-box;
    height: initial;
    overflow: hidden;
    padding-top: 8px;

    &.collapse {
      height: 0;
      padding-top: 0;
    }
  }

  .expand {
    text-align: center;
    cursor: pointer;

    &:hover {
      opacity: .8;
    }
  }
}
</style>
