<template>
  <a-layout style="height: inherit">
    <a-layout-header :style="headerStyle" v-if="config?.options.showLabel">{{
      config?.options.label
    }}</a-layout-header>
    <a-layout>
      <a-layout-sider
        :width="config?.options.leftWidth"
        :style="siderStyle"
        v-if="config?.options.showLeft"
      >
        <DraggableItem
          :list="siderList"
          :level="curLevel"
          @add="handleSider"
          @copy="handleSiderCopy"
          @delete="handleSiderDelete"
        />
      </a-layout-sider>
      <a-layout-content
        ref="conRef"
        :style="contentStyle"
        v-if="config?.options.showRight"
        @scroll="handleScroll"
      >
        <DraggableItem
          :list="contentList"
          :level="curLevel"
          @add="handleContent"
          @copy="handleContentCopy"
          @delete="handleContentDelete"
        />
      </a-layout-content>
    </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', 'addSider', 'conScroll']);
  const props = defineProps({ config: Object, active: Boolean, level: Number });
  const contentList = 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 headerStyle = 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 contentStyle = computed(() => {
    return {
      textAlign: 'left',
      minHeight: 120,
      borderColor: props.active ? '#7dbcea' : '#ddd',
      borderWidth: '1px',
      borderStyle: preview ? 'solid' : 'dashed',
      backgroundColor: '#fff',
      borderRadius: preview && props.level === 1 ? '0 0 16px ' : '0',
      paddingBottom: '16px',
      overflowY: preview ? 'auto' : 'none',
    };
  });

  const siderStyle = computed(() => {
    return {
      textAlign: 'left',
      minHeight: 120,
      borderColor: props.active ? '#7dbcea' : '#ddd',
      borderWidth: '1px',
      borderStyle: preview ? 'solid' : 'dashed',
      backgroundColor: '#fff',
      overflowY: preview ? 'auto' : 'none',
      borderRadius: preview && props.level === 1 ? '0 0 0 16px ' : '0',
    };
  });
  watch(
    () => contentList.value,
    (val) => {
      emit('addContent', val);
    },
    { deep: true },
  );
  watch(
    () => siderList.value,
    (val) => {
      emit('addSider', val);
    },
    { deep: true },
  );

  function handleContent(event) {
    handdleAdd(1, event);
    emit('addContent', contentList.value);
  }
  function handleSider(event) {
    handdleAdd(2, event);
    emit('addSider', siderList.value);
  }
  function handdleAdd(type, event) {
    const list = JSON.parse(JSON.stringify(type == 1 ? contentList.value : siderList.value));
    const { newIndex } = event;

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

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

    if (type == 1) {
      contentList.value.splice(newIndex, 1, list[newIndex]);
    } else {
      siderList.value.splice(newIndex, 1, list[newIndex]);
    }
  }
  function handleCopy(type, child) {
    const key = buildUUID().replaceAll('-', '');
    let obj = {
      ...toRaw(cloneDeep(child)),
      key,
    };
    if (type == 1) {
      contentList.value.push(obj);
    } else {
      siderList.value.push(obj);
    }
  }
  function handleSiderCopy(e) {
    handleCopy(2, e);
    emit('addSider', siderList.value);
  }
  function handleContentCopy(e) {
    handleCopy(1, e);
    emit('addContent', contentList.value);
  }
  function handleSiderDelete(e) {
    siderList.value.splice(e, 1);
    emit('addSider', siderList.value);
  }
  function handleContentDelete(e) {
    contentList.value.splice(e, 1);
    emit('addContent', contentList.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>
