<template>
  <el-container class="layout">
      <el-header v-if="setting.north.visible" class="vertical north" :height="setting.north.isCollapsed?setting.resize.size:setting.north.size">
        <div class="north" v-show="!setting.north.isCollapsed" :style="{height:'calc(100% - '+this.setting.resize.size+')'}" >
          <slot name="north" >顶部区域north</slot>
        </div>
        <div v-if="setting.north.resize" class="resize resize_vertical" :style="{height:setting.resize.size}"
             @mousedown="dragStart($event,'north')" >
          <div v-if="setting.north.showCollapse" class="resize_btn" :style="{width:setting.resize.collapseSize}"
               :class="{collapse:setting.north.isCollapsed}"
               @click="collapse($event,'north')" @mousedown="stopEvent"></div>
        </div>
      </el-header>
      <el-container class="middle" ref="middle">
        <el-aside v-if="setting.west.visible" class="horizontal west" :width="setting.west.isCollapsed?setting.resize.size:setting.west.size">
          <div class="west" v-show="!setting.west.isCollapsed" :style="{width:'calc(100% - '+this.setting.resize.size+')'}">
            <slot name="west">左侧侧边栏west</slot>
          </div>
          <div v-if="setting.west.resize" class="resize resize_horizontal" :style="{width:setting.resize.size}"
               @mousedown="dragStart($event,'west')" >
            <div v-if="setting.west.showCollapse" class="resize_btn" @click="collapse($event,'west')" @mousedown="stopEvent"
                 :class="{collapse:setting.west.isCollapsed}"
                 :style="{height:setting.resize.collapseSize,width:setting.resize.size,top:'calc(50% - '+this.setting.resize.collapseSize+'/2)'}"></div>
          </div>
        </el-aside>
        <el-container class="center" ref="center">
          <slot>容器模式center</slot>
        </el-container>
        <el-aside v-if="setting.east.visible" class="horizontal east" name="east" :width="setting.east.isCollapsed?setting.resize.size:setting.east.size">
          <div v-if="setting.east.resize" class="resize resize_horizontal" :style="{width:setting.resize.size}"
               @mousedown="dragStart($event,'east')" >
            <div v-if="setting.east.showCollapse" class="resize_btn" @click="collapse($event,'east')" @mousedown="stopEvent"
                 :class="{collapse:setting.east.isCollapsed}"
                 :style="{height:setting.resize.collapseSize,width:setting.resize.size,top:'calc(50% - '+this.setting.resize.collapseSize+'/2)'}"></div>
          </div>
          <div class="east" v-show="!setting.east.isCollapsed" :style="{width:'calc(100% - '+this.setting.resize.size+')'}">
            <slot name="east">右侧侧边栏east</slot>
          </div>
        </el-aside>
      </el-container>
      <el-footer v-if="setting.south.visible" class="vertical south" :height="setting.south.isCollapsed?setting.resize.size:setting.south.size">
        <div v-if="setting.south.resize" class="resize resize_vertical" :style="{height:setting.resize.size}"
             @mousedown="dragStart($event,'south')"  >
          <div v-if="setting.south.showCollapse" class="resize_btn" @mousedown="stopEvent"
               :class="{collapse:setting.south.isCollapsed}"
               :style="{width:setting.resize.collapseSize}" @click="collapse($event,'south')"></div>
        </div>
        <div class="south" v-show="!setting.south.isCollapsed" :style="{height:'calc(100% - '+this.setting.resize.size+')'}" >
          <slot name="south" >底部区域south</slot>
        </div>
      </el-footer>
  </el-container>
</template>
<script>
import resize from '../utils/mixins/resize';
export default {
    name: "ContainerLayout",
    mixins: [resize],//监听外部框架的大小改变事件
    components: {
    },
    computed:{
        // eastHeight(){
        //   console.log("触发变化！！！")
        //   return this.setting.south.isCollapsed?this.setting.resize.size:this.setting.south.size
        // }
    },
    props: {
        options: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            dragClass:null,
            setting: {
                resize:{
                  size:'6px',
                  collapseSize:'60px'
                },
                north: {
                    minSize:0,
                    maxSize:null,
                    size:'150px',
                    resize: true,
                    visible: false,
                    showCollapse: true,
                    isCollapsed:false
                },
                south: {
                    minSize:0,
                    maxSize:null,
                    size:'180px',
                    resize: true,
                    visible: false,
                    showCollapse: true,
                    isCollapsed:false
                },
                west: {
                    minSize:100,
                    maxSize:300,
                    size:'150px',
                    resize: true,
                    visible: false,
                    showCollapse: true,
                    isCollapsed:false
                },east: {
                    minSize:100,
                    maxSize:300,
                    size:'180px',
                    resize: true,
                    visible: false,
                    showCollapse: true,
                    isCollapsed:false
                }
            }
        }
    },
    created() {
        this.$core.merge(true, this.setting, this.options);
    },
    mounted() {
        this.resize();
    },
    methods: {
        percentWidthToNumber(name){
            if(this.setting[name].size.indexOf("%")>0) {
              return  this.$el.clientWidth *parseInt(this.setting[name].size) / 100;
            }
            return Number.parseInt(this.setting[name].size);
        },percentHeightToNumber(name){
            if(this.setting[name].size.indexOf("%")>0) {
                return  this.$el.clientHeight * parseInt(this.setting[name].size) / 100;
            }
            return Number.parseInt(this.setting[name].size);
        },checkSize(name){
            if(this.setting[name].size=="auto")
              return;
            let size=((["south","north"].indexOf(name)>=0)?this.percentHeightToNumber(name):this.percentWidthToNumber(name));
            if(this.setting[name].maxSize!=null){
              let max=parseInt(this.setting[name].maxSize);
              if (size>max)
                  size=max;
            }
            this.setting[name].size = size + "px";
        },updateLayout(options){
            this.$core.merge(true,this.setting,options);
            this.$nextTick(()=>{
                if(this.setting.north.visible)
                    this.checkSize("north");
                if(this.setting.south.visible)
                    this.checkSize("south");
                if(this.setting.west.visible)
                    this.checkSize("west");
                if(this.setting.east.visible)
                    this.checkSize("east");
                this.resize();
            });
        },stopEvent(e){
            e.cancelBubble=true;
        },collapse(e,name){
            this.setting[name].isCollapsed=!this.setting[name].isCollapsed;
            this.$nextTick(()=>{
                this.resize();
            });
        },dragStart(e,name){
            if(this.setting[name].visible&&this.setting[name].resize&&!this.setting[name].isCollapsed) {
                let size=Number.parseInt(this.setting[name].size);
                switch (name) {
                    case "north":
                    case "south":
                        this.setting[name].containSize=this.$refs.middle.$el.clientHeight;
                        if(this.setting[name].size.indexOf("%")>0)
                          size=e.currentTarget.parentElement.parentElement.clientHeight *size/100;
                        break;
                    default:
                        this.setting[name].containSize=this.$refs.center.$el.clientWidth;
                        if(this.setting[name].size.indexOf("%")>0)
                          size=e.currentTarget.parentElement.parentElement.clientWidth *size/100;
                        break;
                }
                this.setting.draging = {x: e.x, y: e.y,name:name,
                    size:size,
                    minSize:Number.parseInt(this.setting[name].minSize),
                    maxSize:Number.parseInt(this.setting[name].maxSize)};
                document.addEventListener("mousemove",this.dragMove);
                document.addEventListener("mouseup",this.dragEnd);
            }
        },dragMove(e){
            e.preventDefault();
            let draging=this.setting.draging;
            if(draging){
                let newSize=-1;
                switch (draging.name) {
                    case "north": {
                        let offset = e.y - draging.y;
                        newSize = draging.size + offset;
                        break;
                    }
                    case "south": {
                        let offset = e.y - draging.y;
                        newSize = draging.size - offset;
                        break;
                    }
                    case "west":{
                        let offset = e.x - draging.x;
                        newSize = draging.size + offset;
                        break;
                    }
                    case "east":
                        let offset = e.x - draging.x;
                        newSize = draging.size - offset;
                        break;
                    default:
                        break;
                }
                if(this.setting[draging.name].maxSize == null) {//如果没有限制最大,那么按区域面积限制
                    if(newSize>draging.size+this.setting[draging.name].containSize){
                        this.$core.debug().log("超过允许最大size",newSize,draging.size,this.setting[draging.name].containSize);
                        return;
                    }
                }
                if(newSize>0&&e.x!=0&&e.y!=0){ //先暂时用0来判断松开拖动的问题
                  this.setting.draging.newSize=newSize;
                  this.resizeLayout(e,draging.name);          //立刻更新界面
                }
            }
        },dragEnd(e){
            if(this.setting.draging) {
                if(this.setting.draging.name) {
                    this.resizeLayout(e,this.setting.draging.name);
                }
                delete this.setting.draging;
                this.dragClass=null;
            }
            document.removeEventListener("mousemove",this.dragMove);
            document.removeEventListener("mouseup",this.dragEnd);
        },resize(e){
            this.$emit("resize", e);
        },resizeLayout(e,name){
            if(name && this.setting.draging&&this.setting.draging.newSize!=this.setting.draging.size) {
                let draging=this.setting.draging;
                let newSize = this.setting.draging.newSize;
                if ((this.setting[name].minSize != null && newSize < draging.minSize))
                    newSize = draging.minSize;
                if ((this.setting[name].maxSize != null && newSize > draging.maxSize)) {
                    newSize = draging.maxSize;
                }
                if (newSize >= 0) {
                    this.setting[name].size = newSize + "px";
                    this.$emit("resize", e);
                }
            }
        }
    }
}
</script>