<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%"
      v-if="subTableId"
      :scroll="scrollValue"
    >
      <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="['Card'].includes(schema.component)">
    <a-row class="grid-row" style="width: 100%; padding: 10px">
      <a-col class="grid-col" :span="schema.colProps.span">
        <a-card
          :title="schema.label"
          :class="
            schema.shadow === 'always'
              ? 'card-always'
              : schema.shadow === 'hover'
                ? 'card-hover'
                : ''
          "
        >
          <a-row class="grid-row">
            <a-col
              class="grid-col"
              v-for="(colItem, index) in schema.columns"
              :key="index"
              :span="colItem.span"
            >
              <template v-for="(item, k) in colItem.children" :key="k">
                <FormRender
                  :schema="item"
                  :formData="formData"
                  :formConfig="formConfig"
                  :setFormModel="setFormModel"
                />
              </template>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-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>
  <template v-else-if="['CardGroup'].includes(schema.component)">
    <div style="width: 100%">
      <div style="display: flex">
        {{ schema.label }}
        <div style="margin-left: 10px">
          <a-radio-group
            v-model:value="noTitleKey"
            :options="schema.componentProps.options"
          />
        </div>
      </div>
      <template v-for="(item, index) in schema.componentProps.options" :key="index">
        <a-card style="width: 100%" v-show="noTitleKey === item.value">
          <FormRender
            v-for="(childItem, k) in item.children"
            :key="k"
            :schema="childItem"
            :formData="formData"
            :formConfig="formConfig"
            :setFormModel="setFormModel"
          />
        </a-card>
      </template>
    </div>
  </template>
  <template v-else>
    <VFormItem
      v-if="(isCreateOrModifyComponent && schema.display) || !isCreateOrModifyComponent"
      :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>
</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,
    },
  });
  console.log('itemitem', props.formConfig)
  const emit = defineEmits(['change', 'submit', 'reset']);
  const scrollValue = ref();
  const isCreateOrModifyComponent = [
    'createuser',
    'createtime',
    'modifyuser',
    'modifytime',
  ].includes(props.schema.type);
  let subTableColumns = ref([
    {
      dataIndex: 'setting',
      key: 'setting',
      fixed: 'left',
      width: 60,
    },
  ]);
  let subTableId = ref(null);
  let subTableData = ref([]);
  let subTableList = ref([]);
  const noTitleKey = ref('0')
  if(props.schema.component === 'CardGroup'){
    noTitleKey.value = props.schema.componentProps.options[0].value
  }

  // if (props.formConfig.schemas) {
  //   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,
  //             width: 120,
  //             ...itemColumnChild,
  //           });
  //         });
  //       });
  //       scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
  //       subTableData.value = tableData;
  //     }else{
  //     }
  //   });
  // }

  console.log("props.schema",props.schema)

  if (props.schema) {
    if(props.schema.type === "subTable"){
      subTableId.value = props.schema.field
      let tableData = [];
      props.schema.columns.forEach((itemColumn) => {
          itemColumn.children.forEach((itemColumnChild) => {
            tableData.push(itemColumnChild);
            subTableColumns.value.push({
              key: itemColumnChild.field,
              title: itemColumnChild.label,
              dataIndex: itemColumnChild.field,
              width: 120,
              ...itemColumnChild,
            });
          });
        });
        scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
        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;
  }
  /* .card-always{
    border-color: transparent;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
  }
  .card-hover{
    transition: box-shadow 0.2s, border-color 0.2s;
  }
  .card-hover:hover{
    border-color: transparent;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
  } */
</style>
