<template>
  <a-layout style="height: inherit">
    <a-layout-header :style="titleStyle" v-if="config?.options.showLabel">{{
      config?.options.label
    }}</a-layout-header>
    <a-layout :style="{ height: `calc(100% - 40px)` }">
      <a-layout-sider
        :style="siderStyle"
        v-if="config?.options.showLeft"
        :width="config?.options.leftWidth"
      >
        <DraggableItem
          :list="siderList"
          :level="curLevel"
          @add="handleSider"
          @copy="handleSiderCopy"
          @delete="handleSiderDelete"
        />
      </a-layout-sider>
      <a-layout
        ref="conRef"
        style="height: 100%; overflow-y: auto; background: #fff"
        @scroll="handleScroll"
      >
        <a-layout-header :style="headerStyle">
          <DraggableItem
            :list="headerList"
            :level="curLevel"
            @add="handleHeader"
            @copy="handleHeaderCopy"
            @delete="handleHeaderDelete"
          />
        </a-layout-header>
        <a-layout-content :style="contentStyle">
          <DraggableItem
            :list="contentList"
            :level="curLevel"
            @add="handleContent"
            @copy="handleContentCopy"
            @delete="handleContentDelete"
          />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script setup lang="ts">
  import { computed, inject, ref, toRaw, watch } from 'vue';
  import DraggableItem from './draggableItem.vue';

  import { buildUUID } from '/@/utils/uuid';
  import { cloneDeep } from 'lodash-es';

  const emit = defineEmits(['addContent', 'addFooter', 'addSider', 'conScroll']);
  const props = defineProps({ config: Object, active: Boolean, level: Number });
  const contentList = ref(props.config?.layout[2]?.list || []);
  const headerList = ref(props.config?.layout[1]?.list || []);
  const siderList = ref(props.config?.layout[0]?.list || []);
  let preview = inject('preview') as boolean;
  const curLevel = ref((props.level || 1) + 1);
  const conRef = ref();

  const titleStyle = computed(() => {
    return {
      textAlign: 'left',
      color: '#000',
      height: '40px',
      paddingInline: 10,
      lineHeight: '40px',
      borderColor: props.active ? '#7dbcea' : '#ddd',
      borderWidth: '1px',
      borderStyle: preview ? 'solid' : 'dashed',
      backgroundColor: '#fff',
      borderRadius: preview && props.level === 1 ? '16px 16px 0 0' : '0',
    };
  });
  const headerStyle = computed(() => {
    return {
      textAlign: 'left',
      color: '#000',
      height: 'auto',
      minHeight: 100,
      borderColor: props.active ? '#7dbcea' : '#ddd',
      borderWidth: '1px',
      borderStyle: preview ? 'solid' : 'dashed',
      backgroundColor: '#fff',
    };
  });

  const contentStyle = computed(() => {
    return {
      textAlign: 'left',
      minHeight: preview ? 'auto' : 120,
      borderColor: props.active ? '#7dbcea' : '#ddd',
      borderWidth: '1px',
      borderStyle: preview ? 'solid' : 'dashed',
      backgroundColor: '#fff',
      borderRadius: preview && props.level === 1 ? '0 0 16px 0 ' : '0',
    };
  });

  const siderStyle = computed(() => {
    return {
      textAlign: 'left',
      minHeight: 120,
      borderColor: props.active ? '#7dbcea' : '#ddd',
      borderWidth: '1px',
      borderStyle: preview ? 'solid' : 'dashed',
      backgroundColor: '#fff',
      overflowX: 'auto',
      borderRadius: preview && props.level === 1 ? '0 0 0 16px' : '0',
    };
  });
  watch(
    () => contentList.value,
    (val) => {
      emit('addFooter', val);
    },
    { deep: true },
  );
  watch(
    () => siderList.value,
    (val) => {
      emit('addSider', val);
    },
    { deep: true },
  );
  watch(
    () => headerList.value,
    (val) => {
      emit('addContent', val);
    },
    { deep: true },
  );
  function handleSider(event) {
    handdleAdd(1, event);
    emit('addSider', siderList.value);
  }
  function handleContent(event) {
    handdleAdd(3, event);
    emit('addFooter', contentList.value);
  }
  function handleHeader(event) {
    handdleAdd(2, event);
    emit('addContent', headerList.value);
  }
  function handdleAdd(type, event) {
    const list = JSON.parse(
      JSON.stringify(
        type == 1 ? siderList.value : type == 2 ? headerList.value : contentList.value,
      ),
    );
    const { newIndex } = event;

    const key = buildUUID().replaceAll('-', '');

    list[newIndex] = {
      ...toRaw(list[newIndex]),
      key,
    };

    if (type == 1) {
      siderList.value.splice(newIndex, 1, list[newIndex]);
    } else if (type == 2) {
      headerList.value.splice(newIndex, 1, list[newIndex]);
    } else {
      contentList.value.splice(newIndex, 1, list[newIndex]);
    }
    //selectWidget.value = list[newIndex];
  }
  function handleCopy(type, child) {
    const key = buildUUID().replaceAll('-', '');
    let obj = {
      ...toRaw(cloneDeep(child)),
      key,
    };
    if (type == 1) {
      siderList.value.push(obj);
    } else if (type == 2) {
      headerList.value.push(obj);
    } else {
      contentList.value.push(obj);
    }
  }
  function handleHeaderCopy(e) {
    handleCopy(2, e);
    emit('addContent', headerList.value);
  }
  function handleContentCopy(e) {
    handleCopy(3, e);
    emit('addFooter', contentList.value);
  }
  function handleSiderCopy(e) {
    handleCopy(1, e);
    emit('addSider', siderList.value);
  }
  function handleHeaderDelete(e) {
    headerList.value.splice(e, 1);
    emit('addContent', headerList.value);
  }
  function handleContentDelete(e) {
    contentList.value.splice(e, 1);
    emit('addFooter', contentList.value);
  }
  function handleSiderDelete(e) {
    siderList.value.splice(e, 1);
    emit('addSider', siderList.value);
  }
  function handleScroll() {
    if (conRef.value) {
      const { scrollTop, scrollHeight, clientHeight } = conRef.value.$el;
      if (scrollTop + clientHeight >= scrollHeight) {
        // 已经滚动到底部

        emit('conScroll', 'bottom');
      } else if (scrollTop === 0) {
        emit('conScroll', 'top');
      } else if (scrollTop + clientHeight < scrollHeight) {
        emit('conScroll', 'center');
      }
    }
  }
</script>
