<template>  
  <div class="aos-panel clearfix">
    <div class="aos-panel-title" v-if="showTitle" :class="{'aos-panel-title-no-border': noBorder}">
      <div class="aos-panel-left clearfix">
        <span v-if="showNameBorder" class="aos-panel__title-name-border"></span>
        <span class="aos-panel-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>
        <i
          v-for="(icon,index) in iconLeft"
          v-show="typeof icon.show === 'undefined' || icon.show"
          :key="index"
          :title="'点击图标'+icon.title+'表单'"
          class="aos-panel-icon-left"
          :class="'el-icon-'+icon.icon"
          @click="handleIconClick(icon,index)"
        ></i>
        <span class="aos-panel__info" v-if="info && showInfo">
          <i class="el-icon-info"></i><span class="aos-panel__info-content">{{info}}</span>
        </span>
        <slot name="panel-left" class="aos-panel-title-icon"></slot>
      </div>
      <div class="aos-panel-right clearfix">
        <i
          v-for="(icon,index) in iconRight"
          v-show="typeof icon.show === 'undefined' || icon.show"
          :key="index"
          :title="icon.title"
          :class="'el-icon-'+icon.icon"
          @click="handleIconClick(icon,index)"
        ></i>
        <slot name="panel-right"></slot>
        <div @click="formPanelClick" :title="'点击'+panelIconType+'当前表单'" class="aos-panel-right-arrow" v-show="showExpandIcon">
          <span>
            {{panelIconType}}
          </span>
          <i
          class="el-icon-arrow-down aos-panel-down-arrow"
          :class="{'active': isActive}">
          </i>
        </div>
      </div>
    </div>
    <el-collapse-transition>
      <div class="aos-panel-body" v-show="showIconDown">
        <slot></slot>
        <div class="aos-panel-body-footer clearfix" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
import ElCollapseTransition from 'aos-element/src/transitions/collapse-transition';
export default {
  name: "AosPanel",
  components: {
    ElCollapseTransition
  },
  data() {
    return {
      showIconDown: true,
      isActive: false,
      panelIconType: '收起',
      showTitle: false
    };
  },
  props: {
    title: "",
    iconLeft: {
      type: Array,
      default: function(){
        return []
      }
    },
    iconRight: {
      type: Array,
      default: function(){
        return []
      }
    },
    // 不显示标题下下划线
    noBorder: {
      type: Boolean,
      default: true
    },
    // 是否显示标题边框
    showNameBorder: {
      type: Boolean,
      default: false
    },
    showExpandIcon: {
      type: Boolean,
      default: false
    },
    // 提示信息
    info: {
      type: String,
      default: ''
    },
    showInfo: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    formPanelClick() {
      this.showIconDown = !this.showIconDown;
      if(this.showIconDown){
        this.panelIconType = '收起';
        this.isActive = false;
      } else {
        this.panelIconType = '展开';
        this.isActive = true;
      }
    },
    handleIconClick(icon,data){
      this.$emit('panel-'+icon.icon+'-click',icon,data);
    }
  },
  created() {
    if(this.title || (this.iconLeft && this.iconLeft.length) || (this.iconRight && this.iconRight.length) || this.showExpandIcon){
      this.showTitle = true;
    }
  },
};
</script>
