<script setup lang="ts">
import { ref } from "vue";
import sourceSearchConfig from "./config/search.config";
import contentConfig from "./config/content.company.config";

import { PageContentInstance } from "/@/components/PageContent";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { usePageSearch, type PageHooks } from "/@/hooks/page";

import DemandModifyModal from "./demand-modify-modal.vue";
import { useBusinessSearch } from "../../_hooks";
import { usePermission } from "/@/hooks/core";
import ExecModal from "./exec-modal.vue";
import { ElMessage } from "element-plus";
import apis from "./config/apis";

const pageName = "receivableLedger";

const { searchConfig } = useBusinessSearch({
  sourceConfig: sourceSearchConfig,
  queryField: "companyNo"
});

const { hasPermissionWithCode } = usePermission(pageName);
const pageContentRef = ref<PageContentInstance | null>(null);
const execModalRef = ref<InstanceType<typeof ExecModal> | null>(null);
const demandModifyModal = ref<InstanceType<typeof DemandModifyModal> | null>( null );

const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig)
};

async function deleteItem(id: string) {
  const response = await apis.delete_exec({ id });
  if (response.code === 1) {
    pageContentRef.value.onSearch();
  } else {
    ElMessage.warning(response.message);
  }
}

function handleCreate() {
  const { companyNo } = pageContentRef.value.getBasicParams();
  demandModifyModal.value?.onDisplay(companyNo);
}
</script>

<template>
  <page-auth :page-name="pageName"  :all="false">
    <page-container
      :search-config="searchConfig"
      :hooks="hooks"
      :page-name="pageName"
      :get-content-ref="ref => (pageContentRef = ref)"
      :content-config="contentConfig"
      lockKey="companyNo"
    >
      <template #content_header>
        <el-button type="" size="mini" @click="execModalRef?.onDisplay({})"
          >查看执行类型说明</el-button
        >
        <el-button type="primary" size="mini" @click="handleCreate"
          >添加</el-button
        >
      </template>

      <template #content_action="row">
        <el-link
          :href="row.down_url"
          v-if="String(row.status) === '2' && hasPermissionWithCode('19')"
          target="_blank"
          :underline="false"
        >
          <ElButton
            link
            size="small"
            type="primary"
            :icon="useRenderIcon('download-line')"
          />
        </el-link>
        <el-popconfirm
          title="是否确认删除该条记录?"
          @confirm="deleteItem(row.id)"
          v-if="hasPermissionWithCode('17')  && (String(row.status) === '3' || String(row.status) === '1')"
        >
          <template #reference>
            <ElButton
              link
              size="small"
              type="primary"
              :icon="useRenderIcon('delete')"
            />
          </template>
        </el-popconfirm>
      </template>
    </page-container>

    <DemandModifyModal ref="demandModifyModal" :is-business="true" @refresh="pageContentRef.onSearch()" />
    <ExecModal ref="execModalRef" />

  </page-auth>
</template>
