<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, nextTick, unref,reactive } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getFormGroupList,getBaseConfigList } from '@/api/formdesign/index';
  import { columns, searchFormSchema } from './index.data';
  import { cloneDeep } from 'lodash-es';
  import VformRender from '../../form-design/components/VformRender/index.vue';
  import {  IFormConfig,IToolbarMethods } from '../../form-design/typings/v-form-component';

  const eFormPreview = ref<null | IToolbarMethods>(null);
  
  const [registerTable, { reload, getSelectRows }] = useTable({
    title: '表单列表',
    api: getFormGroupList,
    rowKey: 'f_Id',
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    beforeFetch: (data) => {
      // 接口请求前 参数处理
      var temp = {
        page: data.page,
        limit: data.limit,
        keyWord: data.key,
        category: data.f_Category
      };
      return temp;
    },
    afterFetch: (data) => {    
      
    },
    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) {
      
  }
  function handleDelete(record: Recordable) {
    // openAccountModal(true, {
    //   record,
    // });
  }
  function getPublicForm(){
    getBaseConfigList({ id: "ed985a1e-b007-43d1-af14-be4e44018c8b" }).then((res: AreaRespVO[]) =>{
      let obj = JSON.parse(res.scheme.scheme)
      console.log('res',obj.formInfo)
      formConfig.value.schemas = obj.formInfo.schemas
    })
  }
  //表单填写数据
  function renderdata(e){
    console.log('renderdata',e)
  }
  
  onMounted(() => {
    getPublicForm()
  })
</script>