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

const router = useRouter();

const loading = shallowRef(false);
const { permissions, hasPermissionWithCode } = usePermission("modifyRecord");
const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
  undefined,
  undefined,
  searchFormConfig
);

function handlePreviewClick(row) { 
  router.push({
    path: "/InvoiceSaleSettings/modifyRecordDetail",
    query: { spuCode: row.spuCode }
  })
}

</script>

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

        <PageContent
          ref="pageContentRef"
          :powers="permissions"
          :content-config="contentConfig"
          @preview-btn-click="handlePreviewClick"
        />
      </div>
    </PagePower>
  </div>
</template>

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