<template>
  <template v-if="['Grid'].includes(schema.component) && schema.type == 'subTable'">
    <a-table
      class="sub-table"
      :columns="subTableColumns"
      :data-source="subTableList"
      :pagination="false"
      style="width: 100%"
    >
      <template #headerCell="{ column, record }">
        <template v-if="column.key === 'setting'">
          <PlusOutlined class="icon-button" @click="addListItem" />
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'setting'">
          <DeleteOutlined class="icon-button" @click="delListItem(column, record)" />
        </template>
        <template v-else>
          <FormItem :data="column" :record="record" />
        </template>
      </template>
    </a-table>
  </template>
  <template v-else-if="['Grid'].includes(schema.component)">
    <Row class="grid-row">
      <Col
        class="grid-col"
        v-for="(colItem, index) in schema.columns"
        :key="index"
        :span="colItem.span"
      >
        <FormRender
          v-for="(item, k) in colItem.children"
          :key="k"
          :schema="item"
          :formData="formData"
          :formConfig="formConfig"
          :setFormModel="setFormModel"
        />
      </Col>
    </Row>
  </template>
  <template v-else-if="['Tabs'].includes(schema.component)">
    <a-tabs style="width: 100%">
      <a-tab-pane v-for="(colItem, index) in schema.componentProps.options" :tab="colItem.label" :key="index">
        <FormRender
          v-for="(item, k) in colItem.children"
          :key="k"
          :schema="item"
          :formData="formData"
          :formConfig="formConfig"
          :setFormModel="setFormModel"
        />
      </a-tab-pane>
    </a-tabs>
  </template>
  <VFormItem
    v-else
    :formConfig="formConfig"
    :schema="schema"
    :formData="formData"
    :setFormModel="setFormModel"
    @change="emit('change', { schema: schema, value: $event, subTableList: subTableList })"
    @submit="emit('submit', schema)"
    @reset="emit('reset')"
  >
    <template
      v-if="schema.componentProps && schema.componentProps.slotName"
      #[schema.componentProps!.slotName]
    >
      <slot :name="schema.componentProps!.slotName"></slot>
    </template>
  </VFormItem>
</template>
<script setup lang="ts">
  import { ref, PropType } from 'vue';
  import { IVFormComponent, IFormConfig } from '../../../typings/v-form-component';
  import VFormItem from '../../VFormItem/index.vue';
  import { Row, Col } from 'ant-design-vue';
  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { v4 as uuidv4 } from 'uuid';
  import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue';

  const props = defineProps({
    formData: {
      type: Object,
      default: () => ({}),
    },
    schema: {
      type: Object as PropType<IVFormComponent>,
      default: () => ({}),
    },
    formConfig: {
      type: Object as PropType<IFormConfig>,
      default: () => [] as IFormConfig[],
    },
    setFormModel: {
      type: Function as PropType<(key: string, value: any) => void>,
      default: null,
    },
  });
  const emit = defineEmits(['change', 'submit', 'reset']);

  let subTableColumns = ref([
    {
      dataIndex: 'setting',
      key: 'setting',
    },
  ]);
  let subTableId = ref(null);
  let subTableData = ref([]);
  let subTableList = ref([]);
  props.formConfig.schemas.forEach((item) => {
    if (item.type === 'subTable') {
      subTableId.value = item.field;
      let tableData = [];
      item.columns.forEach((itemColumn) => {
        itemColumn.children.forEach((itemColumnChild) => {
          tableData.push(itemColumnChild);
          subTableColumns.value.push({
            key: itemColumnChild.field,
            title: itemColumnChild.label,
            dataIndex: itemColumnChild.field,
            ...itemColumnChild,
          });
        });
      });
      subTableData.value = tableData;
    }
  });
  const addListItem = () => {
    let keyValue = uuidv4();
    let emptyItem = { key: keyValue };
    subTableData.value.map((item) => {
      if (item.component == 'InputGuid') {
        emptyItem[item.field] = keyValue;
      } else {
        emptyItem[item.field] = '';
      }
    });

    subTableList.value.push(emptyItem);
  };
  const delListItem = (column, record) => {
    subTableList.value = subTableList.value.filter((item) => item.key != record.key);
  };
</script>

<style>
  .v-form-render-item {
    overflow: hidden;
  }
</style>
