<template>
    <div class="fx-page-layout">
      <div v-if="$slots.header" class="page-layout-section page-layout-header" :class="{ transparent }">
        <slot name="header"></slot>
      </div>
      <div class="page-layout-section page-layout-body">
        <div ref="contentElm" class="page-layout-content" :class="{ transparent }">
          <slot :width="contentSize.width" :height="contentSize.height" :width-px="contentSize.widthPx" :height-px="contentSize.heightPx"></slot>
        </div>
      </div>
      <div v-if="$slots.footer" class="page-layout-section page-layout-footer" :class="{ transparent }">
        <slot name="footer"></slot>
      </div>
      <div class="page-layout-extra">
        <slot name="extra"></slot>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: 'FxPage',
  };
  </script>
  <script setup lang="ts">
  import { onMounted, reactive, ref, nextTick, onUnmounted } from 'vue';
  import { watch } from 'vue';
  const props = defineProps({
    transparent: Boolean,
    isResolveSize: Boolean,
  });
  const contentElm = ref();
  const contentSize = ref({
    x:0,
    y:0,
    width: 0,
    height: 0,
    widthPx: '0',
    heightPx: '0',
  });
  
  const emit = defineEmits(['resolve']);

  const resolveSize = () => {
    let { offsetWidth: width, offsetHeight: height } = contentElm.value;
    // if (props.transparent) {
    //   width -= 32;
    //   height -= 32;
    // }
    var {x,y} = contentElm.value.getBoundingClientRect()
    contentSize.value = {
      x,
      y,
      width,
      height,
      widthPx: `${width}px`,
      heightPx: `${height}px`,
    };
    emit!("resolve", contentSize.value)
    console.log("contentSize.value----------------------55555555555555")
  };
  
  watch(
    () => props.transparent,
    () => {
      resolveSize();
    },
  );
  
  watch(
    () => props.isResolveSize,
    () => {
      resolveSize();
    },
  );
  
  onMounted(() => {
    window.addEventListener('resize', resolveSize);
    resolveSize();
  });
  
  onUnmounted(() => window.removeEventListener('resize', resolveSize));
  </script>
  
  <style lang="less">
  .fx-page-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .page-layout-section {
      flex-grow: 0;
      flex-shrink: 0;
      // position: relative;
      z-index: 1;
      // background-color: #fff;
      padding: 6px 8px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      overflow: visible;
  
      &.transparent {
        background-color: transparent !important;
        box-shadow: none;
  
        &.page-layout-header::after {
          content: '';
          display: block;
          position: absolute;
          z-index: 0;
          height: 0;
          top: auto;
          right: 0;
          bottom: 0;
          left: 0;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #fff;
        }
  
        &.page-layout-footer::before {
          content: '';
          display: block;
          position: absolute;
          z-index: 0;
          height: 0;
          top: 0;
          right: 0;
          bottom: auto;
          left: 0;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #fff;
        }
      }
    }
  
    .page-layout-body {
      flex-grow: 1;
      flex-shrink: 1;
      z-index: 0;
      padding: 0;
      margin: 0px 0 0px 0px;
      // padding-right: 8px;
      // background-color: #ffffff;
      position: relative;
  
      .vxe-table--render-wrapper{
        background: none;
      }
      .vxe-table--render-default .vxe-table--body-wrapper table{
        background: #FFFFFF;
      }
      .vxe-table--body .col--seq{
        background: #ffffff;
        border-bottom: 1px solid var(--vxe-ui-table-border-color);
        border-right: 1px solid var(--vxe-ui-table-border-color);
      }
      .vxe-table--body .col--last{
        // background: #ffffff;
        // border-bottom: 1px solid var(--vxe-ui-table-border-color);
      }
  
      .page-layout-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: -1px;
        padding-right: 0px;
        // min-height: 100%;
        // border-radius: 4px;
        overflow-y: auto;
        overflow-x: hidden;
        background-clip: content-box;
        // border: 16px solid #fff;
        // border-right-color: transparent;
  
        &::-webkit-scrollbar {
          width: 16px;
          background: transparent;
        }
  
        &::-webkit-scrollbar-thumb {
          border-radius: 8px;
          border: 2px solid transparent;
          background-clip: content-box;
          background-color: var(--td-scrollbar-color);
        }
  
        &.transparent {
          background-color: transparent !important;
          padding: 0;
        }
      }
    }
    .page-layout-extra {
      height: 0;
      overflow: hidden;
    }
  }
  </style>
  