<script setup lang="ts">
import { ref } from "vue";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { ModalTypes } from "/@/modules/modal";
import QrdModal from "./qrd-modal.vue";
import { useUserInfo } from "/@/hooks/core/useUser";

const PageName = "netOrderEnter";
const qrdModalRef = ref<InstanceType<typeof QrdModal> | null>(null);
const pageContentRef = ref<any>(null);

const { isSuperUser } = useUserInfo();

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

const handleUpdate = ({ id }) => {
  qrdModalRef.value.onDisplay(ModalTypes.proUpdate, id);
};

const events: PageEvents = {
  content: {
    create: () => qrdModalRef.value.onDisplay(ModalTypes.create),
    preview: ({ id }) => qrdModalRef.value.onDisplay(ModalTypes.preview, id),
    update: ({ id }) => qrdModalRef.value.onDisplay(ModalTypes.update, id)
  }
};
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :events="events"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
      :get-content-ref="ref => (pageContentRef = ref)"
    >
      <template #content_action="row">
        <el-button
          v-if="isSuperUser"
          type="primary"
          link
          size="small"
          :icon="useRenderIcon('edit')"
          @click="handleUpdate({ id: row.id })"
        />
      </template>

      <template #expand="row">
        <div style="padding: 0 60px; box-sizing: border-box">
          <ElDescriptions :column="2">
            <ElDescriptionsItem label="商品名称">{{
              row.goodName
            }}</ElDescriptionsItem>
            <ElDescriptionsItem label="部门">{{
              row.sale_depart
            }}</ElDescriptionsItem>
            <ElDescriptionsItem label="单价">{{
              row.goodPrice
            }}</ElDescriptionsItem>
            <ElDescriptionsItem label="数量">{{
              row.goodNum
            }}</ElDescriptionsItem>
            <ElDescriptionsItem label="单据号">{{
              row.workCode
            }}</ElDescriptionsItem>
            <ElDescriptionsItem label="平台订单编码">{{
              row.poCode
            }}</ElDescriptionsItem>
            <ElDescriptionsItem label="税点">{{ row.tax }}%</ElDescriptionsItem>
          </ElDescriptions>
        </div>
      </template>
    </PageContainer>

    <QrdModal ref="qrdModalRef" @reload="() => pageContentRef.onSearch()" />
  </PageAuth>
</template>
