<script setup lang="ts">
import type { TableConfig } from './store/formDesignStore';

import { watch } from 'vue';

import { storeToRefs } from 'pinia';

import AttributePanel from './components/AttributePanel.vue';
import DesignCanvas from './components/DesignCanvas.vue';
import MaterialPanel from './components/MaterialPanel.vue';
import { useFormDesignStore } from './store/formDesignStore';

const LEFT_PANEL_WIDTH = 288;
const RIGHT_PANEL_WIDTH = 306;

const props = defineProps<{
  dataSource?: TableConfig[];
  /** 当前表单编码，用于按钮「生成单据」动作绑定模板 */
  formCode?: string;
  /** 表单物理库连接 code（与 FormMeta.db_config 一致） */
  formDbConfig?: string;
}>();

const store = useFormDesignStore();
const { leftPanelCollapsed, rightPanelCollapsed } = storeToRefs(store);

// 监听数据源变化，更新 Store
watch(
  () => props.dataSource,
  (val) => {
    if (val) {
      store.setDataSource(val);
    }
  },
  { immediate: true, deep: true },
);
</script>

<template>
  <div
    class="form-design-container bg-background-deep flex h-full w-full overflow-hidden"
    :class="
      leftPanelCollapsed && rightPanelCollapsed ? 'gap-0' : 'gap-3'
    "
  >
    <!-- Left: Material Panel -->
    <div
      class="h-full flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out"
      :style="{
        width: leftPanelCollapsed ? '0px' : `${LEFT_PANEL_WIDTH}px`,
      }"
    >
      <div class="h-full" :style="{ width: `${LEFT_PANEL_WIDTH}px` }">
        <MaterialPanel />
      </div>
    </div>

    <!-- Center: Design Canvas -->
    <div class="relative h-full min-w-0 flex-1 overflow-hidden">
      <DesignCanvas />
    </div>

    <!-- Right: Attribute Panel -->
    <div
      class="h-full flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out"
      :style="{
        width: rightPanelCollapsed ? '0px' : `${RIGHT_PANEL_WIDTH}px`,
      }"
    >
      <div class="h-full" :style="{ width: `${RIGHT_PANEL_WIDTH}px` }">
        <AttributePanel :form-code="formCode" :form-db-config="formDbConfig" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.form-design-container {
  /* Ensure container takes full height relative to its parent */
  height: 100%;
}
</style>
