<script setup lang="ts">
import { ref, unref } from "vue";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import { useRouter } from "vue-router";


const emit = defineEmits(['choose'])
const visible = ref(false);



const baseUrl = "/InvoiceSales/invoiceApplyDetail";
const instance = ref(null);

const { push } = useRouter();
const selected = ref<any[]>([]);
const selectOrder = ref([])

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

const events: PageEvents = {
  content: {
    preview: ({ invNo }) => push(`${baseUrl}?id=${invNo}`),
    create: () => push(baseUrl)
  }
};

function handleConfirm() {
  visible.value = false;
  emit("choose", unref(selectOrder.value[0]));
}

defineExpose({
  onDisplay: () => (visible.value = true)
});
</script>

<template>
  <el-dialog class="relative" top="10px" :close-on-click-modal="false" :close-on-press-escape="false" v-model="visible"
    title="发票列表" center>
    <PageContainer :notice="false" v-if="visible" :hooks="hooks" :events="events" :contentConfig="contentConfig"
      :search-config="searchConfig" :get-content-ref="ref => (instance = ref)"
      @content-select-change="val => (selected = val)" :is-page-start="true"
      v-on:content-select-change="value => selectOrder = value">
    </PageContainer>

    <div class="absolute bottom-[48px] right-[32px]">
      <ElButton type="primary" @click="handleConfirm">
        保存
      </ElButton>
    </div>
  </el-dialog>
</template>
