<template>
  <div class="xd-edit-layout" id="xd-edit-layout">
    <div class="xd-edit-layout__line"></div>
    <div class="xd-edit-layout__top" v-if="isTop"><slot name="top"></slot></div>
    <xd-full-screen :border="0" padding="0" v-model="isFull" v-if="isScrollFull && isPc" style="background: #f8f8f8">
      <div class="xd-edit-layout__main" :class="{isFull:isFull}">
        <div
          class="xd-edit-layout__left"
          :style="{width: uiWidth}"
          :class="{fixed: width > 0, notFixed: width===0 }"
        >
          <slot name="left"></slot>
        </div>
        <div class="xd-edit-layout__middle">
          <slot name="main"></slot>
        </div>
        <div
          class="xd-edit-layout__right"
          :style="{width: rightWidth}"
          :class="{fixed: width > 0, notFixed: width===0 }"
        >
          <slot name="right"></slot>
        </div>
      </div>
    </xd-full-screen>
    <template v-else>
      <div class="xd-edit-layout__main">
        <div
          class="xd-edit-layout__left"
          :style="{width: uiWidth}"
          :class="{fixed: width > 0, notFixed: width===0 }"
        >
          <slot name="left"></slot>
        </div>
        <div class="xd-edit-layout__middle">
          <slot name="main"></slot>
        </div>
        <div
          class="xd-edit-layout__right"
          :style="{width: uiWidth}"
          :class="{fixed: width > 0, notFixed: width===0 }"
        >
          <slot name="right"></slot>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import {getHeight, getWidth} from "@/utils/xd.common";
import XdFullScreen from "@/components/XdFullScreen.vue";
import {isPlatform} from "@/utils/xd.base";
export default {
  name: "XdEditLayout",
  components:{
    XdFullScreen
  },
  props:{
    isTop: {
      type:Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 0
    },
    isScrollFull:{
      type:Boolean,
      default: false
    }
  },
  data(){
    return {
      fixed:false,
      uiWidth:'auto',
      isFull: false,
      isPc: false,
    }
  },
  computed:{
    rightWidth(){
      if(this.width > 0) {
        return `${this.width + ((this.isFull && this.isScrollFull && this.isPc)?200: 0)}px`
      }
      return  'auto';
    }
  },
  watch:{
    isFull(){
      this.update()
    },
  },
  created() {
    this.isPc = isPlatform().isPc
    if(this.width > 0) {
      this.uiWidth = `${this.width}px`
    };
    this.update();

  },
  methods:{
    update(){
      this.$emit('input', this.isFull)
    }
  }
}
</script>

<style scoped lang="scss">
  .xd-edit-layout {
    width:100%;
    background: #f8f8f8;
    overflow: auto;

    &__line {
      width: 100%;
      height: 1px;
      overflow: hidden;
    }
    &__top {
      border-radius: 4px;
      height: 60px;
      background: #fff;
      box-shadow: 0 0 5px rgba(0,0,0,0.05);
      margin: 15px;
      min-width: 1230px;
    }

    &__main {
      padding: 0 15px;
      height: calc(100vh - 186px);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      min-width: 1260px;

      &.isFull {
        height:100vh;

        & .xd-edit-layout__left,
        & .xd-edit-layout__right,
        & .xd-edit-layout__middle {
          height:100vh;
        }
      }
    }

    .fixed{
      flex-shrink: 0;
    }

    .notFixed {
      flex: 1;
    }


    &__left,&__right {
      background: #fff;
      height: calc(100vh - 186px);
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      overflow: auto;
      //&::-webkit-scrollbar {
      //  height: 0;
      //  width: 0;
      //  color: transparent;
      //}
    }

    &__middle {
      width: 750px;
      background: #fff;
      height: calc(100vh - 186px);
      flex-shrink: 0;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      margin: 0 15px;
      overflow: auto;

      &::-webkit-scrollbar {
        height: 0;
        width: 0;
        color: transparent;
      }
    }
  }
</style>
