<script setup lang="ts">
import { ref } from "vue";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageContent } from "/@/components/PageContent";
import searchFormConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import PagePower from "/@/components/PagePower/PagePower.vue";
import ProcessList from "./components/process-list.vue";
import ProcessModal from "./components/process-modal.vue";
import { usePermission } from "/@/hooks/core/usePermission";

defineOptions({
  name: "setActionProcess"
});

const pageName = "setActionProcess";
const { hasPermissionWithCode, permissions } = usePermission(pageName);

const currentProcess = ref<Record<string, any>>({});
const processModalRef = ref<InstanceType<typeof ProcessModal>>(null);

const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
  () => {
    return {
      result: {
        process_id: currentProcess.value.id
      },
      deleteProps: []
    };
  }
);

function handleProcessChange(process) {
  const { id } = process;
  currentProcess.value = process;
  //重新请求
  pageContentRef.value.getPageData({ process_id: id });
}
</script>

<template>
  <div class="main role bg-white">
    <PagePower :is-show="hasPermissionWithCode('001')">
      <div w-full flex>
        <div class="min-w-240px h-[calc(100vh-90px)] process-list__content">
          <ProcessList
            :current-process="currentProcess"
            @change-btn-click="handleProcessChange"
          />
        </div>

        <div flex-1>
          <PageSearch
            class="search"
            :form-config="searchFormConfig"
            @search-btn-click="handleSearchClick"
            @reset-btn-click="handleResetClick"
          />

          <PageContent
            ref="pageContentRef"
            :powers="permissions"
            :content-config="contentConfig"
            @create-btn-click="() => processModalRef.onDisplay()"
            @preview-btn-click="({ id }) => processModalRef.onDisplay(id, true)"
            @update-btn-click="({ id }) => processModalRef.onDisplay(id)"
          />
        </div>
      </div>

      <ProcessModal
        :current-process="currentProcess"
        ref="processModalRef"
        @reload="
          () => pageContentRef.getPageData({ process_id: currentProcess.id })
        "
      />
    </PagePower>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.processs-list__content {
  border-right: 1px solid #dfe6ec;
}

.search {
  padding-left: 20px !important;
}
</style>
