<template>
  <Draggable
    :style="
      tableConfig
        ? {
            height:
              tableConfig.height || tableConfig.height === 0 ? tableConfig.height + 'px' : '100%',
            minHeight: (tableConfig.height || '42') + 'px',
            overflow: 'auto',
            padding: '10px',
          }
        : { minHeight: minHeight || '200px' }
    "
    class="widget-col-list"
    :class="
      preview && level === 1
        ? 'h-full overflow-y-auto widget-col-list-view'
        : level === 1
        ? ' pb-9'
        : ''
    "
    item-key="key"
    ghostClass="ghost"
    handle=".drag-widget"
    :animation="200"
    :group="{ name: 'people' }"
    :no-transition-on-drag="true"
    :list="list"
    :disabled="preview ? true : false"
    @add="handleColMoveAdd($event)"
  >
    <template #item="{ element: childElement, index: childIndex }">
      <div
        v-if="
          preview && level === 1 ? childElement.key && childIndex == prePage - 1 : childElement.key
        "
        :style="{
          height: ['vertical', 'normal', 'horizontal', 'table-layout'].includes(childElement.type)
            ? 'inherit'
            : 'auto',
        }"
      >
        <AntdWidgetFormItem
          :key="childElement.key"
          :element="childElement"
          :level="level"
          class="drag-widget"
          @add-content="
            (val) => {
              childElement.layout[1].list = val;
            }
          "
          @add-sider="
            (val) => {
              childElement.layout[0].list = val;
            }
          "
          @add-header="
            (val) => {
              childElement.layout[0].list = val;
            }
          "
          @add-footer="
            (val) => {
              childElement.layout[2].list = val;
            }
          "
          @add-collapse="
            (val) => {
              childElement.layout = val;
            }
          "
          @click-table="handleTableClick"
          @copy="handleCopyClick(childElement)"
          @delete="handleDeleteClick(childIndex)"
          @add-row="handleAddClick(childElement, 'row')"
          @add-col="handleAddClick(childElement, 'col')"
          @con-scroll="handleChildScroll"
        />
      </div>
    </template>
  </Draggable>
</template>
<script setup lang="ts">
  import { inject, ref } from 'vue';
  import Draggable from 'vuedraggable';
  import AntdWidgetFormItem from '../AntdWidgetFormItem.vue';

  import { watch } from 'vue';

  const props = defineProps({
    list: { type: Array, default: () => [] },
    tableConfig: Object,
    level: Number,
    customHeight: String,
    wheelData: Object,
    minHeight: String,
  });

  let preview = inject('preview') as boolean;

  const emit = defineEmits(['add', 'copy', 'delete', 'clickTable']);

  let prePage = ref(1);

  let allowScroll = ref('');

  watch(
    () => props.wheelData,
    (val) => {
      if (allowScroll.value) allowScroll.value = '';
      if (val?.type == 'down') {
        setTimeout(() => {
          let child = props.list || [];
          if (!allowScroll.value) {
            if (prePage.value < child?.length) {
              prePage.value += 1;
              allowScroll.value = '';
            }
          }
        }, 600);
      } else if (val?.type == 'up') {
        setTimeout(() => {
          if (!allowScroll.value) {
            if (prePage.value > 1) {
              prePage.value -= 1;
              allowScroll.value = '';
            }
          }
        }, 600);
      }
    },
    { deep: true },
  );
  function handleColMoveAdd(e) {
    emit('add', e);
  }
  function handleTableClick(e) {
    emit('clickTable', e);
  }
  function handleCopyClick(e) {
    emit('copy', e);
  }
  function handleDeleteClick(e) {
    emit('delete', e);
  }
  const handleAddClick = (row: any, type: string) => {
    let tdMax = 0;
    row.layout[0].list.forEach((o) => {
      if (o.colspan) {
        tdMax = tdMax + o.colspan;
      } else {
        tdMax += 1;
      }
    });
    if (type == 'row') {
      let lastRow: any = [];
      for (let j = 0; j < tdMax; j++) {
        lastRow.push({
          width: '',
          height: '',
          class: 'tableLayoutTd',
          children: [],
          position: [row.layout.length, j],
        });
      }
      row.layout.push({ list: lastRow });
    } else {
      row.layout.forEach((o, i) => {
        o.list.push({
          width: '',
          height: '',
          class: 'tableLayoutTd',
          children: [],
          position: [i, tdMax],
        });
      });
    }
  };

  function handleChildScroll(e) {
    allowScroll.value = e;
  }
</script>
<style scoped>
  .widget-col-list-view::-webkit-scrollbar {
    width: 0;
    height: 8px;
  }
</style>
