<template>
  <div class="f-layout-v" :class="{ collapsed: collapsed }">
    <Split ref="split" v-model="spl" mode="vertical">
      <div slot="top" class="split-pane split-pane-top" v-show="spl != 0">
        <slot name="top"></slot>
        <div
          class="navbar-collapse"
          @click="onCollapse"
          v-show="collapsed && arrow"
        >
          <div class="navbar-collapse-bg"></div>
          <i
            class="iconfont icon-expand8-copy navbar-collapse-arrow__bottom"
          ></i>
        </div>
      </div>
      <div slot="bottom" class="split-pane split-pane-bottom">
        <slot name="bottom"></slot>
        <div
          class="navbar-collapse"
          @click="onCollapse"
          v-show="!collapsed && arrow"
        >
          <div class="navbar-collapse-bg"></div>
          <i class="iconfont icon-expand8-copy "></i>
        </div>
      </div>
    </Split>
  </div>
</template>

<script>
export default {
  name: "f-layout-v",
  props: {
    split: {
      type: [Number, String],
      default: 0.5
    },
    arrow: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    spl(v) {
      this.$emit("change", v);
    },
    collapsed(v) {
      this.$emit("change", v);
    }
  },
  data() {
    return {
      spl: this.split,
      collapsed: false
    };
  },
  methods: {
    onCollapse() {
      this.collapsed = !this.collapsed;
      this.init();
    },
    init() {
      this.spl = this.collapsed ? 1 : this.split;
    }
  },
  mounted() {
    this.$refs.split.computeOffset = function() {
      if (!this.$refs.outerWrapper) return;
      this.offset =
        ((this.valueIsPx
          ? this.px2percent(
              this.value,
              this.$refs.outerWrapper[this.offsetSize]
            )
          : this.value) *
          10000) /
        100;
    }.bind(this.$refs.split);
  }
};
</script>

<style lang="less">
.f-layout-v {
  height: 100%;
  background-color: #fff;
  .ivu-split-trigger-bar-con.vertical {
    display: none;
  }
  .ivu-split-trigger-bar-con {
    z-index: 101;
  }

  &.collapsed {
    .ivu-split-trigger-con {
      display: none;
    }
    .split-pane-bottom {
      padding-left: 0;
    }
  }
  .split-pane {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
  }
  .split-pane-bottom {
    padding-top: 5px;
    .navbar-collapse {
      position: absolute;
      top: 5px;
      height: 20px;
      width: 50px;
      line-height: 20px;
      z-index: 9;
      left: 50%;
      margin-left: -25px;
      cursor: pointer;
      overflow: hidden;
      &-bg {
        left: 0;
        position: absolute;
        border-left: 9px solid transparent;
        border-top: none;
        border-top: 13px solid #f7f7f7;
        border-right: 9px solid transparent;
        width: 100%;
        transition: all 0.2s ease;
      }

      &:hover {
        .navbar-collapse-bg {
          border-left: 8px solid transparent;
          border-top: none;
          border-top: 20px solid #f7f7f7;
          border-right: 8px solid transparent;
        }
        .iconfont {
          top: 0;
        }
      }

      .iconfont {
        z-index: 100;
        position: absolute;
        transition: all 0.2s ease;
        top: -5px;
        width: 100%;
        text-align: center;
      }
    }
  }

  .split-pane-top {
    .navbar-collapse {
      position: absolute;
      height: 20px;
      width: 50px;
      line-height: 20px;
      z-index: 9;
      bottom: 0;
      left: 50%;
      margin-left: -25px;
      cursor: pointer;

      &-arrow__bottom {
        transform: rotate(180deg);
      }

      &-bg {
        bottom: 0;
        position: absolute;
        border-left: 9px solid transparent;
        border-top: none;
        border-bottom: 13px solid #f7f7f7;
        border-right: 9px solid transparent;
        width: 100%;
        transition: all 0.2s ease;
      }

      &:hover {
        .navbar-collapse-bg {
          border-left: 8px solid transparent;
          border-top: none;
          border-bottom: 20px solid #f7f7f7;
          border-right: 8px solid transparent;
        }
        .iconfont {
          bottom: 0px;
        }
      }

      .iconfont {
        z-index: 100;
        position: absolute;
        transition: all 0.2s ease;
        bottom: -5px;
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>
