<template>
  <div class="aos-panel-contain clearfix">
    <div class="aos-panel-contain-title">
      <span @click="formPaneContainlClick" class="aos-panel-contain-title-name">
        <transition name="fade">
          <i class="el-icon-arrow-down" v-if="showIconDown"></i>
          <i class="el-icon-arrow-up" v-else></i>
        </transition>
        {{title}}
      </span>
      <slot name="title"></slot>
    </div>
    <div v-if="showIconDown">
      <slot></slot>
    </div>
    <div class="aos-panel-contain-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AosPanelContain',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
      showIconDown: true
    }
  },
  methods: {
    formPaneContainlClick(){
      this.showIconDown = !this.showIconDown;
    }
  }
}
</script>
