<template>
  <div class="app-container">
    <page-search
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleSearch"
    />
    <page-content
      ref="pageContentRef"
      pageName="/system/dept"
      :contentTableConfig="contentTableConfig"
      rowKey="deptId"
      :isExport="false"
      :listData="listData"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
      @delBtnClick="handleSubmit"
    >
    <template #deptstatus="{ row }">
      <el-tag :type="row.status === '1' ? 'error' : 'success'">{{ row.status === '1' ? '禁用' : '启用' }}</el-tag>
    </template>  
    </page-content>
    <page-modal
      :defaultInfo="defaultInfo"
      ref="pageModalRef"
      pageName="/system/dept"
      :modalConfig="modalConfigRef"
      @submit="handleSubmit"
    ></page-modal>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'
import useSelectStore from '@/store/commonSelect/common'
import { onMounted } from 'vue';

import { getPageListData } from '@/api/main/system/system'

export default defineComponent({
  name: 'Dept',
  components: {
    PageSearch,
    PageContent,
    PageModal
  },
  setup() {
    const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()

    // 1.处理逻辑
    const newCallback = () => {}
    const editCallback = () => {}
    const listData = ref({
      total: 0,
      list: [],
    });

    const { proxy } = getCurrentInstance();

    onMounted(async ()=>{
      init();
    });

    const init = async (params = {}) => {
      const { data } = await getPageListData('/system/dept', {
        pageNum: 1,
        pageSize: 9000,
        ...params,
      });

      // 遍历成树
      const trees = proxy.handleTree(data, "deptId");

      listData.value = {
        total: trees.length,
        list: trees,
      };
      console.log(trees, 'data111');
      pageContentRef.value.setPageData(trees.length, trees);
    }

    // 2.动态添加部门和角色列表
    const modalConfigRef = computed(() => {
      const DeptItem = modalConfig.formItems.find(
        (item) => item.field === 'parentId'
      )
      DeptItem.options = useSelectStore().deptListData
      return modalConfig
    })

    // 3.调用hook获取公共变量和函数
    const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
      usePageModal(newCallback, editCallback)

    function handleSubmit () {
      init();
    }

    function handleSearch(params) {
        init(params);
    }
    
    return {
      handleSearch,
      handleSubmit,
      searchFormConfig,
      contentTableConfig,
      pageContentRef,
      handleResetClick,
      handleQueryClick,
      modalConfigRef,
      pageModalRef,
      defaultInfo,
      handleNewData,
      handleEditData
    }
  }
})
</script>
