<!-- @desc:Split面板分割  @auth:周兴  @time:2023/1/29 16:36 -->
<template>
  <Split ref="split" v-model="model" :min="min" :max="max" :mode="mode" :class="hidePaneFlag?'hidden-split-pane':''"
         :style="{height:(height?height+'px':'100%')}"
         style="padding-right: 0 !important;"
         @on-move-start="onMoveStart"
         @on-moving="onMoving"
         @on-move-end="onMoveEnd">
    <div slot="left" class="split-pane-horizontal"  ref="left">
      <slot name="left"></slot>
    </div>
    <div slot="right" class="split-pane-horizontal" ref="right">
      <slot name="right"></slot>
    </div>
    <div slot="top" class="split-pane-vertical">
      <slot name="top"></slot>
    </div>
    <div slot="bottom" class="split-pane-vertical">
      <slot name="bottom"></slot>
    </div>
  </Split>
</template>

<script>
export default {
  name: "dk-split",
  props: {
    // 面板位置
    value: {
      type: [Number, String],
      default: 0.5
    },
    // 类型，可选值为 horizontal 或 vertical
    mode: {
      type: String,
      default: 'horizontal'
    },
    // 最小阈值
    min: {
      type: [Number, String],
      default: '40px'
    },
    // 最大阈值
    max: {
      type: [Number, String],
      default: '40px'
    },
    // 高度
    height: {
      type: [Number, String],
      default: null
    },
  },
  data() {
    return {
      model: null,
      hidePaneFlag: false
    }
  },
  watch: {
    value(n, o) {
      this.model = n;
    },
    model(n,o){
      this.$emit('input',n)
    }
  },
  methods: {
    /**
     *   @desc   : 显示
     *   @date   : 2023/4/12 10:01
     *   @author : 周兴
     */
    showPane(value = 0.5){
      this.model = value;
      this.hidePaneFlag = false;
    },
    /**
     * @desc   : 隐藏
     * @author : 周兴
     * @date   : 2023/3/23 20:51
     * @param  : true(上/左） false(下/右)
     */
    hidePane(flag = true) {
      if(flag){
        this.model = 0;
      }else{
        this.model = 1;
      }
      this.hidePaneFlag = true;
    },
    /**
     * @desc   : 拖拽开始
     * @author : 周兴
     * @date   : 2023/1/29 16:34
     */
    onMoveStart(e) {
      this.$emit('on-move-start', e);
    },
    /**
     * @desc   : 拖拽中
     * @author : 周兴
     * @date   : 2023/1/29 16:35
     */
    onMoving(e) {
      this.$emit('on-moving', e)
      // 如果是列表，需要改变图标的位置
      if (this.$refs['split'] && this.$refs['split'].$children &&
        this.$refs['split'].$children.length > 0) {
        let children = this.$refs['split'].$children;
        this.$emit('input', this.$refs['split'].offset / 100)
        children.forEach(it => {
          // 改变设置图标的位置
          if (it.changeSettingLocation) {
            it.changeSettingLocation();
          }
        })
      }
    },
    /**
     * @desc   : 拖拽结束
     * @author : 周兴
     * @date   : 2023/1/29 16:35
     */
    onMoveEnd(e) {
      this.$emit('on-move-end', e)
    },
  },
  created() {
    this.model = this.value;
  },
  mounted() {
  }
}
</script>

<style scoped>
.split-pane-horizontal {
  padding-right: 0 !important;
}

/deep/.ivu-split-trigger-horizontal{
  margin-top: -3px !important;
}

/deep/.ivu-split-trigger-bar-con.horizontal{
  top: -2px !important;
}

/deep/ .ivu-split-pane.right-pane {
  padding-left: 6px !important;
}

.split-pane-vertical {
  padding-top: 1px;
  padding-bottom: 0px;
}

/deep/ .ivu-split-pane.bottom-pane {
  padding-top: 2px !important;
}


.hidden-split-pane /deep/ .ivu-split-trigger {
  display: none;
}
</style>
