<script setup lang="ts">
import { ref } from "vue";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { usePermission } from "/@/hooks/core/usePermission";
import { PageContent } from "/@/components/PageContent";
import searchConfig from "../company/config/search.config";
import contentConfig from "../company/config/content.config";
import ShareModal from "./components/share-modal.vue";

const pageName = "dataShare";
defineProps({ name: "dataShare" });

const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch();
const { permissions, hasPermissionWithCode } = usePermission(pageName);
const shareModalRef = ref<InstanceType<typeof ShareModal>>(null);

</script>

<template>
  <div class="main role">
    <PagePower :is-show="hasPermissionWithCode('001')">
      <div w-full>
        <PageSearch
          @search-btn-click="handleSearchClick"
          @reset-btn-click="handleResetClick"
          :form-config="searchConfig"
        />

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

    <ShareModal 
      ref="shareModalRef" 
      @refresh="() => handleResetClick()" 
    />
  </div>
</template>

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