<template>
  <div class="layout-item" :class="itemClass" :style="itemConf.styleInner">
    <div v-if="resize&&type!=='content'" class="bar" @mousedown.stop="moveStart"></div>
    <slot></slot>
  </div>
</template>
<script>
import _ from 'underscore'
export default {
  name: 'kyb-layout-item',
  props: {
    type: String,
    resize: Boolean,
    size: String
  },
  data: function() {
    let s = {}
    let isLeftOrRight = this.type === 'left' || this.type === 'right'
    let conf = {
      _uid: this._uid,
      type: this.type
    }
    if (this.type !== 'center') {
      let sizeType = isLeftOrRight ? 'width' : 'height'
      // console.log("sizeType", sizeType, this.size, this.type);
      s[sizeType] = this.size + 'px'
      conf.size = parseInt(this.size)
      conf.resize = this.resize
    }
    conf.styleInner = s
    return {
      itemConf: conf
    }
  },
  created: function() {
    // console.log("--- start emit:", this);
    this.$parent.$emit('item-init', this)
  },
  beforeDestroy() {
    this.$parent.$emit('item-delete', this)
  },
  computed: {
    itemStyle() {
      let m = {}
      _.each(this.itemConf.styleInner, (v, k) => {
        m[k] = v !== 'auto' ? v + 'px' : v
      })
      console.log('0000000', m)
      return m
    },
    styleInner1111: function() {
      let s = this.styleInfo ? this.styleInfo : {}
      let isLeftOrRight = this.type === 'left' || this.type === 'right'
      let sizeType = isLeftOrRight ? 'width' : 'height'
      s[sizeType] = this.size + 'px'
      return s
    },
    itemClass: function() {
      return (this.resize ? 'resize' : 'no-resize') + ' ' + this.type
    }
  },
  methods: {
    btn() {
      // console.log(this.itemConf.styleInner);
      this.itemStyle.width = 600 * Math.random() + 'px'
      // console.log(this.itemConf.styleInner);
      this.$forceUpdate()
    },
    moveStart(event) {
      let t =
        this.type === 'left' || this.type === 'right' ? 'clientX' : 'clientY'
      this.itemConf.mouseStart = event[t]
      this.$parent.$emit('item-bar-mousedown', this.itemConf)
    }
  }
}
</script>
<style lang="stylus">
$bar-size = 5px;

.layout-item {
  position: absolute;
  translate: all 0.5s;
}

.layout-item.center {
  overflow: auto;
}

.layout-item.resize> .bar {
  content: '';
  position: absolute;
  background: $grey-3;
  opacity: 0.9;
  border: 1px solid $grey-4;
}

.body--dark .layout-item.resize> .bar {
  background: black;
  border: 1px solid black;
}

.layout-item.no-resize.left {
  border-right: 1px solid $grey-3;
  box-shadow: 0 0 2px $grey-3;
}

.layout-item.no-resize.right {
  border-left: 1px solid $grey-3;
  box-shadow: 0 0 2px $grey-3;
}

.layout-item.no-resize.top {
  border-bottom: 1px solid $grey-3;
  box-shadow: 0 0 2px $grey-3;
}

.layout-item.no-resize.bottom {
  border-top: 1px solid $grey-3;
  box-shadow: 0 0 2px $grey-3;
}

.layout-item.left.resize {
  padding-right: $bar-size;
}

.layout-item.right.resize {
  padding-left: $bar-size;
}

.layout-item.top.resize {
  padding-bottom: $bar-size;
}

.layout-item.bottom.resize {
  padding-top: $bar-size;
}

.layout-item.left> .bar, .layout-item.right> .bar {
  top: 0;
  bottom: 0;
  width: $bar-size;
  cursor: col-resize;
}

.layout-item.left> .bar {
  right: 0;
}

.layout-item.right> .bar {
  left: 0;
}

.layout-item.top> .bar, .layout-item.bottom> .bar {
  right: 0;
  left: 0;
  height: $bar-size;
  cursor: row-resize;
}

.layout-item.top> .bar {
  bottom: 0;
}

.layout-item.bottom> .bar {
  top: 0;
}
</style>
