<template>
  <components ref='template' :is='useVersion' v-bind="{...useProps}" @contentResize="contentResize">
    <!-- 标题 -->
    <template slot='title'>
      <slot name='title'></slot>
    </template>
    <!-- 交互区左侧 -->
    <template slot='actionLeft'>
      <slot name='actionLeft'></slot>
    </template>
    <!-- 交互区右侧 -->
    <template slot='actionRight'>
      <slot name='actionRight'></slot>
    </template>
    <!-- 主体左侧 -->
    <template slot='tree'>
      <slot name='tree'></slot>
    </template>
    <!-- 筛选区左侧 -->
    <template slot='filterLeft'>
      <slot name='filterLeft'></slot>
    </template>
    <!-- 筛选区右侧 -->
    <template slot='filterRight'>
      <slot name='filterRight'></slot>
    </template>
    <!-- 主体 -->
    <template slot-scope="scoped">
      <slot :max-height='scoped.maxHeight'></slot>
    </template>
  </components>
</template>
<script>
import { defaultVersion, props, templateProps } from './config';
import v4_0 from './version/v4_0';
export default {
  name: 'ElBasicTemplate',
  props,
  data() {
    return {
      // 透明特效相关
      fuzzyKey: 'theme-fuzzy',
      fuzzyValue: false
    };
  },
  computed: {
    // 需要用到的props
    useProps() {
      const useProps = {};
      Object.keys(templateProps).forEach(item => {
        useProps[item] = this[item];
      });
      return {
        ...useProps,
        isFuzzy: this.fuzzyValue,
        size: this.templateSize
      };
    },
    useVersion() {
      const prefix = 'v';
      let version;
      if (this.version !== '' && this.version !== undefined && this.version !== null) {
        // 指定的version，且version非空
        version = this.version;
      } else {
        // 未指定version，使用全局配置的version
        version = defaultVersion;
      }
      return prefix + version.replace(/\./g, '_');
    },
    templateSize() {
      return this.size || (this.$ELEMENT || {}).size;
    }
  },
  components: {
    v4_0
  },
  methods: {
    /**
     * 主体区域高度变化
    */
    contentResize(height) {
      this.$emit('contentResize', height);
    },
    /**
     * 主动触发主题区域高度计算
    */
    triggerContentHeightRecalculate() {
      try {
        this.$refs.template.getTableMaxH();
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 获取左侧树距离顶部滚动距离
    */
    getTreeScrollDistance() {
      let distance = null;
      try {
        distance = this.$refs.template.$refs.contentLeft.wrap.scrollTop;
      } catch (error) {
        console.log(error);
      }
      return distance;
    },
    /**
     * 设置左侧树距离顶部滚动距离
    */
    setTreeScrollDistance(distance) {
      try {
        this.$refs.template.$refs.contentLeft.wrap.scrollTop = distance;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>