<template>
  <div v-if="columns.length > 1">
    <a-table
      class="sub-table"
      :columns="columns"
      :data-source="tableData"
      :pagination="false"
      :scroll="scrollValue"
    >
      <!-- v-if="props.data.multiterm" -->
      <template #headerCell="{ column, record }">
        <template v-if="column.key === 'setting'">
          <PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'setting'">
          <DeleteOutlined
            class="icon-button"
            @click="delListItem(column, record)"
            v-if="!isDetail"
          />
        </template>
        <template v-else>
          <FormItem :data="column" :record="record" />
        </template>
      </template>
    </a-table>
    <!-- <BasicForm ref="subTableRef" @register="registerForm"  @change="changeData" v-else /> -->
  </div>
</template>
<script lang="ts" setup>
  import { v4 as uuidv4 } from 'uuid';
  import { onMounted, ref, watch } from 'vue';
  import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue';
  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { subTableStore } from '@/store/modules/subTable';
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicForm, useForm } from '@/components/Form';
  import dayjs from 'dayjs';

  const { createMessage } = useMessage();
  const subTableDataStore = subTableStore();
  const scrollValue = ref();
  const columns: any = ref([
    {
      dataIndex: 'setting',
      key: 'setting',
      fixed: 'left',
      width: 60,
    },
  ]);
  const tableData: any = ref([]);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    tabsKey: {
      type: String,
      default: '',
    },
  });
  const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
  const userName = localStorage.getItem('fireUserLoginName');
  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
    useForm({
      labelWidth: 100,
      schemas: columns,
      showActionButtonGroup: false,
      baseColProps: { lg: 24, md: 24 },
    });

  onMounted(() => {
    subTableDataStore.getTableData.forEach((element) => {
      if (element.parentFileId == props.data.parentFileId) {
        tableData.value = element.child;
      }
    });
  });
  props.data.child.forEach((element) => {
    if (
      !['createuser', 'modifyuser', 'createtime', 'modifytime'].includes(element.type) &&
      element.component != 'InputGuid'
    ) {
      columns.value.push({
        ...element,
      });
    }
  });
  watch(
    () => tableData.value,
    (newVal) => {
      subTableDataStore.setSingleData(props.data.parentFileId, newVal);
    },
    { deep: true },
  );

  scrollValue.value = { x: (columns.value.length - 1) * 140, y: 300 };

  const addListItem = () => {
    if (!props.data.multiterm && tableData.value.length >= 1) {
      createMessage.error('单行模式，只允许一条数据!');
      return;
    }
    let keyValue = uuidv4();
    let emptyItem = { key: keyValue };
    props.data.child.map((item) => {
      if (item.component == 'InputGuid') {
        emptyItem[item.field] = keyValue;
      } else if (item.type == 'createuser' || item.type == 'modifyuser') {
        emptyItem[item.field] = userName;
      } else if (item.type == 'createtime' || item.type == 'modifytime') {
        emptyItem[item.field] = nowTime.value;
      } else {
        emptyItem[item.field] = '';
      }
    });
    tableData.value.push(emptyItem);
  };
  const delListItem = (column, record) => {
    tableData.value = tableData.value.filter((item) => item.key != record.key);
  };
  function getData() {
    return tableData.value;
  }
  defineExpose({
    getData,
  });
  function changeData() {
    console.log(tableData.value);
  }
</script>
