<template>
  <div class="collapse">
    <el-form @keydown.enter.native.prevent="handleScreen">
      <div class="btn_box">
        <div><slot name="left_btn" /></div>
        <div class="btn_box_right_box">
          <slot name="right_btn" />
          <el-button
            v-if="comLength"
            :type="btnOptions.type"
            :size="btnOptions.size"
            :icon="btnOptions.icon"
            :plain="btnOptions.plain"
            :round="btnOptions.round"
            :circle="btnOptions.circle"
            :loading="btnOptions.loading"
            :disabled="btnOptions.disabled"
            @click="handleCollapse"
            >{{ (isGlobal ? vIsCollapse : isCollapse) ? '展开' : '折叠' }}</el-button
          >
        </div>
      </div>
      <div :class="(isGlobal ? vIsCollapse : isCollapse) ? 'search_box' : ''">
        <slot name="search"></slot>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Collapse',
  props: {
    // isGlobal为true 全局同一状态 ，isGlobal为false局部状态
    isGlobal: {
      type: Boolean,
      default: true
    },
    // screenForm长度比实际展示长度大时 isShow:false隐藏折叠按钮
    isShow: {
      type: Boolean,
      default: true
    },
    // 折叠
    isCollapse: {
      type: Boolean,
      default: true
    },
    // 搜索参数
    screenForm: {
      type: Object,
      required: true,
      default: {}
    },
    //搜索函数名称
    screenFnName: {
      type: String,
      default: ''
    },
    // 按钮配置
    btnOptions: {
      type: Object,
      default: () => {
        return {
          type: 'primary',
          size: 'mini',
          icon: '',
          plain: false,
          round: false,
          circle: false,
          loading: false,
          disabled: false
        }
      }
    }
  },
  computed: {
    ...mapState({
      vIsCollapse: state => state.user.isCollapse
    }),
    comLength() {
      return this.isShow && Object.keys(this.screenForm).length > 4
    }
  },
  methods: {
    // 折叠处理
    handleCollapse() {
      if (!this.isGlobal) {
        // 组件内状态
        this.$parent.isCollapse = !this.isCollapse
      } else {
        // 全局统一状态
        this.$store.dispatch('user/setStatus', this.isCollapse)
      }
    },
    // enter键搜索
    handleScreen() {
      const parent = this.$parent
      // 动态函数执行搜索
      if (this.screenFnName) {
        parent[this.screenFnName]()
        return
      }
      // 不传props： screenFnName 时执行 searchFn, submitScreenForm
      const { searchFn, submitScreenForm } = parent
      searchFn && searchFn()
      submitScreenForm && submitScreenForm()
    }
  }
}
</script>

<style scoped lang="scss">
.btn_box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  &_right_box {
    display: flex;
    .el-button {
      margin-left: 10px;
    }
  }
}
.search_box {
  height: 37px;
  overflow: hidden;
  transition: all 0.3s;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
