<template>
    <div :class="['el-basic-template', 'el-basic-template-4-0', size ? 'el-basic-template-4-0--' + size : '']" :style="wrapperStyle">
        <!-- 头部 -->
        <div class="el-basic-template-header">
            <!-- 标题区域 -->
            <div class="el-basic-template-header-left" v-if='hasTitle || title'>
                <slot v-if="hasTitle" name="title"></slot>
                <div class="el-basic-template-header-left-title" v-else>
                    {{ title }}
                </div>
            </div>
            <!-- 交互区 -->
            <div class="el-basic-template-header-right">
                <!-- 靠近标题的交互区 -->
                <div class='el-basic-template-header-right-action-left'>
                    <slot name="actionLeft"></slot>
                </div>
                <!-- 头部右侧的交互区 -->
                <div v-if='hasActionRight' class='el-basic-template-header-right-action-right'>
                    <slot name="actionRight"></slot>
                </div>
            </div>
        </div>
        <!-- 主体区域 -->
        <div class="el-basic-template-content">
            <!-- 左侧，树区域 -->
            <el-scrollbar
                ref='contentLeft'
                class="el-basic-template-content-left"
                :class="{
                    'background-fuzzy': isFuzzy,
                }"
                :style="{
                  width: dragWidth || useContentLeftWidth,
                  minWidth: useContentLeftMinWidth,
                  maxWidth: useContentLeftMaxWidth
                }"
                v-if="hasTree"
            >
              <div class='el-basic-template-content-left-container'>
                <slot name="tree"></slot>
              </div>
            </el-scrollbar>
            <!-- 右侧，表格和筛选区域 -->
            <div
                ref="contentRight"
                class="el-basic-template-content-right"
                :class="{ 'has-left-tree': hasTree }"
                :style='{
                  width: `calc(100% - ${dragWidth || useContentLeftWidth})`,
                  minWidth: `calc(100% - ${useContentLeftMaxWidth})`,
                  maxWidth: `calc(100% - ${useContentLeftMinWidth})`,
                }'
            >
                <div class="el-basic-template-content-handle" ref="resizeHandle" v-show="resizeable && hasTree"></div>
                <!-- 表格筛选条件区域 -->
                <div class="el-basic-template-content-right-filter" v-if="hasFilterLeft || hasFilterRight">
                    <!-- 筛选区左侧 -->
                    <!-- 不能缺少时，使用v-if去除，会使flex布局错误 -->
                    <div ref="filterLeft" class="el-basic-template-content-right-filter-left">
                        <slot name="filterLeft"></slot>
                    </div>
                    <!-- 筛选区右侧 -->
                    <div class="el-basic-template-content-right-filter-right" v-if="hasFilterRight">
                        <slot name="filterRight"></slot>
                    </div>
                </div>
                <!-- 表格区域 -->
                <el-scrollbar class="el-basic-template-content-right-default" v-if="hasDefault">
                    <div class='el-basic-template-content-right-default-container' ref="default">
                        <slot :max-height="maxHeight"></slot>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>
<script>
import { templateProps } from '../../config';
import { addDragHandle } from '@ued_fpi/element-ui/src/utils/dragHandle';
import { getStyle, getRect } from '@ued_fpi/element-ui/src/utils/util';
import ElBackground from '@ued_fpi/element-ui/packages/background';
import ElScrollbar from '@ued_fpi/element-ui/packages/scrollbar';
export default {
  name: 'ThemeTemplate3_3',
  props: templateProps,
  data() {
    return {
      maxHeight: null,
      timer: false, // 是否存在定时器
      dragWidth: null // 拖拽后左侧树的宽度
    };
  },
  computed: {
    // 当前控件尺寸
    size() {
      return (this.$ELEMENT || {}).size;
    },
    // 是否自定义title
    hasTitle() {
      return this.$slots.title || this.$scopedSlots.title;
    },
    // 是否有头部左侧交互
    hasActionLeft() {
      return this.$slots.actionLeft || this.$scopedSlots.actionLeft;
    },
    // 是否有头部右侧交互
    hasActionRight() {
      return this.$slots.actionRight || this.$scopedSlots.actionRight;
    },
    // 是否有左侧树
    hasTree() {
      return this.$slots.tree || this.$scopedSlots.tree;
    },
    // 是否有左侧过滤条件
    hasFilterLeft() {
      return this.$slots.filterLeft || this.$scopedSlots.filterLeft;
    },
    // 是否有右侧过滤条件
    hasFilterRight() {
      return this.$slots.filterRight || this.$scopedSlots.filterRight;
    },
    // 是否有默认填充
    hasDefault() {
      return this.$slots.default || this.$scopedSlots.default;
    },
    // 主题样式
    wrapperStyle() {
      return {
        paddingTop: this.offsetTop
        // backgroundImage: `url(${this.bgUrl})`,
      };
    },
    // 左侧树默认宽度
    useContentLeftWidth() {
      // 没有左侧树时，不适用设定的默认值
      if (!this.hasTree) return '0px';
      // 默认宽度
      const width = {
        mini: '176px',
        mediun: '224px',
        default: '240px',
        ...this.treeSlotWidth
      };
      return width[this.size] || width.default;
    },
    // 左侧树默认最小宽度
    useContentLeftMinWidth() {
      // 没有左侧树时，不适用设定的默认值
      if (!this.hasTree) return '0px';
      // 默认宽度
      const width = {
        mini: '176px',
        mediun: '224px',
        default: '240px',
        ...this.treeSlotMinWidth
      };
      return width[this.size] || width.default;
    },
    // 左侧树默认最大宽度
    useContentLeftMaxWidth() {
      // 没有左侧树时，不适用设定的默认值
      if (!this.hasTree) return '0px';
      // 默认宽度
      const width = {
        mini: '50%',
        mediun: '50%',
        default: '50%',
        ...this.treeSlotMaxWidth
      };
      return width[this.size] || width.default;
    }
  },
  components: {
    ElBackground,
    ElScrollbar
  },
  mounted() {
    if (this.$refs.default) {
      this.getTableMaxH();
      window.addEventListener('resize', this.resizeFunc, false);
    }
    addDragHandle(this.$refs.resizeHandle, (dx, dy, tickDx) => {
      // 边界判断交给了css的minWidth和maxWidth
      this.dragWidth = (parseInt(getStyle(this.$refs.contentLeft.$el).width, 10) + tickDx) + 'px';
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeFunc, false);
  },
  methods: {
    // 计算table表单高度
    getTableMaxH() {
      // 获取属性值,转换为数字,无法转换则为0
      const getAttrsValueToNumber = (ele, attr) => {
        return (parseInt(getStyle(ele)[attr], 10) || 0);
      };
      // default总高度
      let height =
        window.innerHeight -
        getRect(this.$refs.default).top -
        getAttrsValueToNumber(this.$refs.default, 'paddingTop') -
        getAttrsValueToNumber(this.$refs.default, 'paddingBottom') -
        getAttrsValueToNumber(this.$refs.default, 'marginTop') -
        getAttrsValueToNumber(this.$refs.default, 'marginBottom');
      // 查找所有的直接子元素
      for (let i = 0; i < this.$refs.default.children.length; i++) {
        const item = this.$refs.default.children[i];
        // 是否存在className，防止split报错
        if (item.className.length < 0 || item.className.split(' ').filter(x => this.tableClass.includes(x))
          .length === 0) {
          // 如果是包含指定类名，跳过
          height =
              height -
              getAttrsValueToNumber(item, 'height') -
              getAttrsValueToNumber(item, 'paddingTop') -
              getAttrsValueToNumber(item, 'paddingBottom') -
              getAttrsValueToNumber(item, 'marginTop') -
              getAttrsValueToNumber(item, 'marginBottom');
        }
      }
      this.maxHeight = height;
      this.$emit('contentResize', height);
    },
    // 窗口监听设置表格高度
    resizeFunc() {
      if (this.timer) return;
      this.timer = true;
      setTimeout(() => {
        this.timer = false;
        this.getTableMaxH();
      }, 100);
    }
  }
};
</script>
