<template>
  <a-layout
    :style="{
      height: 'inherit',
      overflowY: 'hidden',
      borderRadius: preview && level === 1 ? '16px' : 0,
    }"
  >
    <a-layout-header :style="titleStyle" v-if="config?.options.showLabel"
      >{{ config?.options.label }}
    </a-layout-header>
    <a-layout
      ref="conRef"
      :style="{ height: `calc(100% - 40px)`, overflowY: 'auto' }"
      @scroll="handleScroll"
    >
      <a-layout-header :style="headerStyle" v-if="config?.options.showTop">
        <DraggableItem
          :list="headerList"
          :level="curLevel"
          :minHeight="
            config?.options.topHeight === '' ? '100px' : config?.options.topHeight - 4 + 'px'
          "
          @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-footer :style="footerStyle" v-if="config?.options.showBottom">
        <DraggableItem
          :list="footerList"
          :level="curLevel"
          :minHeight="
            config?.options.bottomHeight === '' ? '100px' : config?.options.bottomHeight - 4 + 'px'
          "
          @add="handleFooter"
          @copy="handleFooterCopy"
          @delete="handleFooterDelete"
        />
      </a-layout-footer>
    </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', 'addHeader', 'addFooter', 'conScroll']);
  const props = defineProps({ config: Object, active: Boolean, level: Number });
  const contentList = ref(props.config?.layout[1]?.list || []);
  const headerList = ref(props.config?.layout[0]?.list || []);
  const footerList = ref(props.config?.layout[2]?.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:
        props.config?.options.topHeight === '' ? 'auto' : props.config?.options.topHeight + 'px',
      borderColor: props.active ? '#7dbcea' : '#ddd',
      borderWidth: '1px',
      borderStyle: preview ? 'solid' : 'dashed',
      backgroundColor: '#fff',
      overflow: 'auto',
      padding: 0,
      minHeight: props.config?.options.topHeight === '' ? '100px' : 'auto',
    };
  });

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

  const footerStyle = computed(() => {
    return {
      textAlign: 'left',
      height:
        props.config?.options.bottomHeight === ''
          ? 'auto'
          : props.config?.options.bottomHeight + 'px',
      borderColor: props.active ? '#7dbcea' : '#ddd',
      borderWidth: '1px',
      borderStyle: preview ? 'solid' : 'dashed',
      backgroundColor: '#fff',
      overflow: 'auto',
      padding: 0,
      borderRadius: preview && props.level === 1 ? '0 0 16px 16px' : '0',
      minHeight: props.config?.options.bottomHeight === '' ? '100px' : 'auto',
    };
  });
  watch(
    () => contentList.value,
    (val) => {
      emit('addContent', val);
    },
    { deep: true },
  );
  watch(
    () => footerList.value,
    (val) => {
      emit('addFooter', val);
    },
    { deep: true },
  );
  watch(
    () => headerList.value,
    (val) => {
      emit('addHeader', val);
    },
    { deep: true },
  );

  function handleFooter(event) {
    handdleAdd(3, event);
    emit('addFooter', footerList.value);
  }
  function handleContent(event) {
    handdleAdd(2, event);
    emit('addContent', contentList.value);
  }
  function handleHeader(event) {
    handdleAdd(1, event);
    emit('addHeader', headerList.value);
  }
  function handdleAdd(type, event) {
    const list = JSON.parse(
      JSON.stringify(
        type == 1 ? headerList.value : type == 2 ? contentList.value : footerList.value,
      ),
    );
    const { newIndex } = event;

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

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

    if (type == 1) {
      headerList.value.splice(newIndex, 1, list[newIndex]);
    } else if (type == 2) {
      contentList.value.splice(newIndex, 1, list[newIndex]);
    } else {
      footerList.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) {
      headerList.value.push(obj);
    } else if (type == 2) {
      contentList.value.push(obj);
    } else {
      footerList.value.push(obj);
    }
  }
  function handleHeaderCopy(e) {
    handleCopy(1, e);
    emit('addHeader', headerList.value);
  }
  function handleContentCopy(e) {
    handleCopy(2, e);
    emit('addContent', contentList.value);
  }
  function handleFooterCopy(e) {
    handleCopy(3, e);
    emit('addFooter', footerList.value);
  }
  function handleHeaderDelete(e) {
    headerList.value.splice(e, 1);
    emit('addHeader', headerList.value);
  }
  function handleContentDelete(e) {
    contentList.value.splice(e, 1);
    emit('addContent', contentList.value);
  }
  function handleFooterDelete(e) {
    footerList.value.splice(e, 1);
    emit('addFooter', footerList.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>
