<template>
  <lrlayout class="l-tab-page">
    <template #left>
        <lrPanel style="padding-right:0;" >
            <template #title>
                {{$t('分类')}}
                <div class="tree-setting-btn">
                    <Tooltip placement="top" title="设置">
                      <span><SettingOutlined style="color:blue" /></span>
                    </Tooltip>
                </div>
            </template>
            <BasicTree ref="asyncExpandTreeRef" 
              treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData 
               :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'itemValue', title: 'itemName' }"
              :defaultExpandAll="true" @select="handleSelect" />
        </lrPanel>
    </template>

    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <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"> 新增 </a-button>
        
      </template>
    </BasicTable>

    <FormModal @submitsuccess="submitsuccess" @register="registerModal" v-if="formModalVisible"   />

  </lrlayout>  
 
</template>
 
<script lang="ts" setup>

  import { onMounted, ref, nextTick, unref,reactive } from 'vue';

  import { BasicTable, useTable, TableAction } from '@/components/Table';

  


  import { getFormGroupList,getFormsTypeList } from '@/api/formdesign/index';
 
  
  
  import { SettingOutlined } from '@ant-design/icons-vue';
  import lrlayout from '@/components/lrLayout';
  import lrPanel from '@/components/lrPanel';

 
  import FormModal from './FormModal.vue';

 

  import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree'; 

  import { useModal } from '/@/components/Modal';

  import { columns, searchFormSchema } from './form.data';

 

  const [registerModal, { openModal }] = useModal();
  
 
  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 formModalVisible = ref(true)
  const searchInfo = reactive < Recordable > ({});
 
  const treeData = ref < TreeItem[] > ([]);
  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);

  async function fetch() {
    treeData.value = (await getFormsTypeList({code:'FormSort'})) as unknown as TreeItem[];
    // 展开全部
    nextTick(() => {
      unref(asyncExpandTreeRef)?.expandAll(true);
    });
  }
  function handleSelect(keys) {
    treeData.value.forEach(item =>{
      if(keys[0] == item.f_ItemId){
        searchInfo.f_Category = item.f_Category;
      }
    })
    
    reload();
  }
  
  function handleEdit(record: Recordable) {
    formModalVisible.value = true
    openModal(true,record);   
  }
  function handleDelete(record: Recordable) {
    // openAccountModal(true, {
    //   record,
    // });
  }

  function handleAddForm() {
    formModalVisible.value = true
    openModal(true, {});
  }
  
  function submitsuccess(){
    reload()
    formModalVisible.value = false
  }
  

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