<template>
  <n-scrollbar x-scrollable content-class="flex h-full !w-full bg-[var(--text-n9)]" content-style="min-width: 800px">
    <div class="crm-form-design--left"><fieldComponents @select="handleFieldSelect" /></div>
    <div class="crm-form-design--center">
      <div class="crm-form-design--center-content">
        <formComposition ref="formCompositionRef" v-model:list="list" v-model:field="field" :form-config="formConfig" />
      </div>
    </div>
    <div class="crm-form-design--right"><formAttrConfig v-model:field="field" :form-config="formConfig" /></div>
  </n-scrollbar>
</template>

<script setup lang="ts">
  import { NScrollbar } from 'naive-ui';

  import { FormConfig } from '@lib/shared/models/system/module';

  import fieldComponents from './components/fieldComponents.vue';
  import formAttrConfig from './components/formAttrConfig/index.vue';
  import formComposition from './components/formComposition.vue';

  import { FormCreateField } from '../crm-form-create/types';

  const list = defineModel<FormCreateField[]>('fieldList', {
    required: true,
  });
  const formConfig = defineModel<FormConfig>('formConfig', {
    required: true,
  });

  const field = ref<FormCreateField>();
  const formCompositionRef = ref<InstanceType<typeof formComposition>>();

  function handleFieldSelect(item: FormCreateField) {
    formCompositionRef.value?.addItem(item);
  }

  watch(
    () => formConfig.value.layout,
    (layout) => {
      list.value.forEach((item) => {
        item.fieldWidth = 1 / layout;
      });
    }
  );
</script>

<style lang="less" scoped>
  .crm-form-design--left,
  .crm-form-design--right {
    @apply h-full overflow-hidden;

    width: 280px;
    background-color: var(--text-n10);
  }
  .crm-form-design--left {
    padding: 16px;
  }
  .crm-form-design--center {
    @apply h-full flex-1 bg-transparent;

    padding: 16px;
    .crm-form-design--center-content {
      @apply h-full;

      border-radius: var(--border-radius-small);
      background-color: var(--text-n10);
    }
  }
</style>
