<template>
  <div class="fc-style">
    <a-layout class="fc-container">
      <a-layout-content class="fc-main">
        <a-layout>
          <a-layout-sider theme="light" :width="300" class="cg-container">
            <div class="components h-full">
              <div style="height: calc(100% - 50px); overflow-y: auto; padding: 0 10px">
                <a-collapse
                  v-model:activeKey="state.componentGroupKey"
                  :bordered="false"
                  expand-icon-position="right"
                  ghost
                >
                  <a-collapse-panel v-for="(item, index) in state.componentList" :key="index + 1">
                    <template #header><NodeHead :nodeName="item.title" /> </template>
                    <ComponentGroup :fields="item.fields" :list="item.list" />
                  </a-collapse-panel>
                </a-collapse>
              </div>
            </div>
          </a-layout-sider>
          <a-layout class="center-container">
            <a-layout-content id="layoutId" :class="{ 'widget-empty': widgetForm }">
              <div class="awf-container-center">
                <div class="widget-form-container relative" ref="widgetFormRef">
                  <div
                    v-if="widgetForm.length <= 0"
                    class="widget-none mt-50 absolute left-0 right-0"
                  >
                    <SvgIcon name="table-layout" :size="54" style="fill: #ddd" />
                    <p class="text-xl">{{ t('从左侧拖拽布局和组件') }}</p>
                  </div>
                  <div>
                    <DraggableItem
                      :list="widgetForm"
                      :level="1"
                      @copy="handleCopyClick"
                      @delete="handleDeleteClick"
                      @add="handleMoveAdd"
                      @click-table="handleTableClick"
                    />
                  </div>
                </div>
              </div>
            </a-layout-content>
          </a-layout>
          <a-layout-sider theme="light" class="widget-config-container" :width="320">
            <a-layout class="layout-height">
              <div v-if="widgetFormSelect" class="layout-property-height">
                <NodeHead :nodeName="widgetFormSelect.typeName" class="property-node-head" />
                <TableLayoutOption
                  v-if="
                    widgetFormSelect.type == 'table-layout' &&
                    tablecellData &&
                    Object.keys(tablecellData).length > 0
                  "
                />
                <PropertyOption v-else :widgetForm="widgetForm" />
              </div>
              <div class="widget-none" v-else>
                <SvgIcon name="tool" :size="44" />
                <p>{{ t('请先拖入组件后再查看组件属性') }}</p>
              </div>
            </a-layout>
          </a-layout-sider>
        </a-layout>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
  import {
    reactive,
    PropType,
    watchEffect,
    provide,
    inject,
    onMounted,
    ref,
    toRaw,
    watch,
  } from 'vue';

  import ComponentGroup from '/@/components/Designer/src/components/ComponentGroup.vue';

  import DraggableItem from './components/draggableItem.vue';
  import PropertyOption from './PropertyOption.vue';
  import TableLayoutOption from './TableLayoutOption.vue';
  import * as antd from '../types/index';

  import { SvgIcon } from '/@/components/Icon';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { buildUUID } from '/@/utils/uuid';
  import { cloneDeep } from 'lodash-es';
  import { isFirstLevel, TableCell } from '../types/index';
  import { notification } from 'ant-design-vue';

  const { t } = useI18n();

  const props = defineProps({
    generateJson: {
      type: Boolean,
      default: true,
    },
    basicLayout: {
      type: Array as PropType<Array<string>>,
      default: () => ['vertical', 'horizontal', 'normal', 'table-layout'],
    },
    customLayout: {
      type: Array as PropType<Array<string>>,
      default: () => ['collapse', 'panel', 'tab'],
    },
    basicComponent: {
      type: Array as PropType<Array<string>>,
      default: () => ['tree', 'search', 'list', 'form', 'chart', 'iframe', 'button'],
    },
  });
  const refreshFieldObj = ref<object>({});
  provide('refreshFieldObj', refreshFieldObj);
  const widgetForm = inject('widgetForm', ref<any>([]));
  const widgetFormSelect = ref();
  const state = reactive({
    componentGroupKey: ['1', '2', '3'],
    componentList: [
      {
        title: t('页面布局'),
        fields: props.basicLayout,
        list: antd.basicLayout,
      },
      {
        title: t('自定义布局组件'),
        fields: props.customLayout,
        list: antd.customLayout,
      },
      {
        title: t('页面组件'),
        fields: props.basicComponent,
        list: antd.basicComponent,
      },
    ],
  });

  onMounted(() => {
    if (!widgetFormSelect.value) {
      setWidgetFormSelect(widgetForm.value);
    }
  });
  watch(
    () => widgetForm,
    () => {},
    { deep: true },
  );
  const tablecellData = ref<TableCell>();
  const tdIndex = ref('');
  provide('tableCell', tablecellData);
  provide('tdIndex', tdIndex);
  provide('selectWidget', widgetFormSelect);
  watchEffect(() => {});
  const handleMoveAdd = (event: any) => {
    const list = JSON.parse(JSON.stringify(widgetForm.value));
    const { newIndex } = event;

    if (!isFirstLevel.includes(list[newIndex].type)) {
      notification.warning({
        message: t('提示'),
        description: t('该组件只能在其它布局组件中使用'),
      });
      widgetForm.value.splice(newIndex, 1);
      return;
    }
    const key = buildUUID().replaceAll('-', '');

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

    widgetForm.value.splice(newIndex, 1, list[newIndex]);
    widgetFormSelect.value = list[newIndex];
  };
  function handleCopyClick(child) {
    const key = buildUUID().replaceAll('-', '');
    let obj = {
      ...toRaw(cloneDeep(child)),
      key,
    };
    widgetForm.value.push(obj);
  }
  function handleDeleteClick(idx) {
    widgetForm.value.splice(idx, 1);
    if (widgetForm.value.length <= 0) {
      widgetFormSelect.value = null;
    }
  }
  function handleTableClick() {}
  const setWidgetFormSelect = (json) => {
    if (json?.length) {
      widgetFormSelect.value = json[0];
    }
  };
</script>
<style scoped lang="less">
  .fc-style {
    height: 100%;
  }

  .layout-height {
    height: 100%;
    background-color: #f0f2f5;

    :deep(.ant-tabs-content-holder) {
      overflow-y: auto;
    }
  }

  .widget-config-container {
    height: 100%;
    border-radius: 16px;
  }

  .layout-property-height {
    height: 100%;
    background: #fff;
    border-radius: 16px;
  }

  .property-node-head {
    padding-left: 10px;
    margin-top: 1px;
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
  }

  .cg-container {
    box-sizing: border-box;

    :deep(.ant-collapse-content-box) {
      padding: 0 !important;
    }

    :deep(.ant-collapse-header) {
      padding-left: 5px !important;
      height: 24px;
      align-items: center !important;
      margin: 10px 0;

      .ant-collapse-arrow {
        right: 2px;
      }
    }

    :deep(.ant-collapse-ghost > .ant-collapse-item) {
      border-bottom: 0 !important;
    }
  }

  :deep(.ant-collapse-no-arrow > .ant-collapse-header) {
    padding-left: 16px !important;
  }

  :deep(.ant-collapse-content-box) {
    padding-top: 0 !important;
  }

  :deep(.ant-tabs) {
    height: 100%;
  }

  :deep(.ant-tabs-content-top) {
    height: 100%;
  }

  .widget-none {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    p {
      margin: 10px;
      color: #cecece;
    }
  }

  :deep(.ant-tabs-nav) {
    margin-bottom: 8px;
  }

  :deep(.ant-radio-group-small .ant-radio-button-wrapper) {
    padding: 3px 10px;
    box-sizing: content-box;
  }

  .fc-container {
    height: 100%;
  }

  .ant-layout.ant-layout-has-sider {
    height: 100%;
  }

  .center-container {
    height: 100%;
    background-color: #fff;
    padding-bottom: 20px;
    box-sizing: border-box;
    border-left: 8px solid #f0f2f5;
    border-right: 8px solid #f0f2f5;
    overflow: auto;
    padding-top: 20px;

    .center-header {
      padding: 10px;
    }
  }

  .components :deep(.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover) {
    border-bottom: 1px solid #f0f0f0;
  }
</style>
