<template>
  <div class="aos-panel-lease clearfix">
    <div class="aos-panel-lease-title" v-if="showTitle" :class="{'aos-panel-lease-title-no-border': noBorder}">
      <div class="aos-panel-lease-left clearfix">
        <span class="aos-panel-lease-title-name">
          {{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-lease-icon-left"
          :class="'el-icon-'+icon.icon"
          @click="handleIconClick(icon,index)"
        ></i>
        <slot name="panel-left" class="aos-panel-lease-title-icon"></slot>
      </div>
      <div class="aos-panel-lease-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-lease-right-arrow" v-show="showExpandIcon">
          <!-- <span>
            {{panelIconType}}
          </span> -->
          <i
          class="el-icon-arrow-down aos-panel-lease-down-arrow"
          :class="{'active': isActive}">
          </i>
        </div>
      </div>
    </div>
    <el-collapse-transition>
      <div class="aos-panel-lease-body" v-show="showIconDown">
        <slot></slot>
        <div class="aos-panel-lease-body-footer clearfix">
          <slot name="footer"></slot>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
import ElCollapseTransition from 'aos-element/src/transitions/collapse-transition';
export default {
  name: "AosPanelLease",
  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
    },
    showExpandIcon: {
      type: Boolean,
      default: false
    }
  },
  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>
