<template>
  <BasicTable @register="registerTable">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '是否删除该数据',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </template>
    <template #toolbar>
      <a-button type="primary" @click="handleAddForm(eFormPreview!)"> 新增 </a-button>
    </template>
  </BasicTable>
  <VformRender ref="eFormPreview" :formConfig="formConfig" @renderdata="renderdata" />
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { BasicTable, useTable, TableAction, BasicColumn } from '@/components/Table';
  import { getFormsDesignData, getFormsPageData } from '@/api/formrender/index';
  import { searchFormSchema } from './index.data';
  import { cloneDeep } from 'lodash-es';
  import VformRender from '../../form-design/components/VformRender/index.vue';
  import { IFormConfig } from '../../form-design/typings/v-form-component';
  import { IToolbarMethods } from '../../form-design/typings/form-type';

  const eFormPreview = ref<null | IToolbarMethods>(null);
  const route = useRoute();
  const paramsId = route.query.id;
  const callColumns: BasicColumn[] = [];
  console.log('callColumns', callColumns);
  console.log('paramsId', paramsId);
  const [registerTable, { reload, setColumns }] = useTable({
    title: '表单列表',
    api: getFormsPageData,
    rowKey: 'f_Id',
    columns: callColumns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    beforeFetch: (data) => {
      console.log('dabefore', data);
      // 接口请求前 参数处理
      var temp = {
        id: 'fb572b6a-5cfd-4763-bdf5-4aa10fa8edb4',
        paginationInputDto: {
          page: data.page,
          rows: data.limit,
          keyWord: data.key,
        },
      };
      return temp;
    },
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 180,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: undefined,
    },
  });

  const formConfig = ref<IFormConfig>({
    // 表单配置
    schemas: [],
    layout: 'horizontal',
    labelLayout: 'flex',
    labelWidth: 100,
    labelCol: {},
    wrapperCol: {},
    currentItem: {
      component: '',
      componentProps: {},
    },
    activeKey: 1,
  });

  const handleAddForm = (Modal: IToolbarMethods) => {
    console.log('formConfig', formConfig);
    const config = cloneDeep(formConfig.value);
    Modal?.showModal(config);
  };
  function handleEdit(record: Recordable) {
    console.log('record', record);
  }
  function handleDelete(record: Recordable) {
    // openAccountModal(true, {
    //   record,
    // });
    console.log('record', record);
  }
  function getPublicForm() {
    let params = {
      code: 'zbzbtest',
    };
    getFormsDesignData(params).then((res: Recordable) => {
      console.log('res', res);
      let columnObj = JSON.parse(res.entity.scheme);
      console.log('res222', columnObj);
      let formArr = ref([]);
      if (columnObj.table.columns) {
        columnObj.table.columns.forEach((item) => {
          callColumns.push({
            title: item.label,
            dataIndex: item.key,
          });
        });
      }
      setColumns(callColumns);
      reload();
      console.log('formArr', formArr);
      console.log('callColumns123', callColumns);
      // formConfig.value.schemas = obj.formInfo.schemas;
    });
  }
  //表单填写数据
  function renderdata(e) {
    console.log('renderdata', e);
  }

  onMounted(() => {
    getPublicForm();
  });
</script>
