<script setup lang="ts">
import { createTicketReturnColumns } from "/@/utils/details/_purchase";
import { httpDetail, httpAdd } from "/@/api/purchase/ticketReturn";
import ReconciliationForm from "/@/components/ReconciliationForm";
import BasicDescriptions from "/@/components/BasicDescriptions";
import ReturnTciketForm from "./components/return-form.vue";
import { usePermission } from "/@/hooks/core/usePermission";
import InvoiceModal from "./components/invoice-modal.vue";
import { httpStatus } from "/@/api/purchase/ticketReturn";
import { useDetail } from "/@/hooks/core/useDetail";
import { useUserInfo } from "/@/hooks/core/useUser";
import { useAsync } from "/@/hooks/core/useAsync";
import Invoice from "/@/components/invoice";
import { useRouter } from "vue-router";
import { ref, nextTick } from "vue";
;


const pageName = "supplyTicketReturnDetail";
const { hasPermissionWithCode } = usePermission(pageName);


const { push } = useRouter();
const invoiceModalRef = ref<InstanceType<typeof InvoiceModal>>(null);
const formRef = ref<InstanceType<typeof ReconciliationForm> | null>(null);

  const showApproval = ref(true)

const { id, isDetail, title, collapses } = useDetail({
  baseName: "采购开票",
  collapseLen: 20
});

const { isSuperUser } = useUserInfo();


const { run: approval } = useAsync({ success: () => refresh() });
const { run: detail, data } = useAsync<Record<string, string>>({ initalData: {} });


function refresh() {
  requestDetail();
  formRef.value && formRef.value.refresh();
  showApproval.value = false
  nextTick(() => showApproval.value = true)
}

const { run: create } = useAsync({ success: () => push("/supply/supplyTicketReturn") });

const requestDetail = () => detail(httpDetail({ hpNo: id.value }));
const handleCreate = data => create(httpAdd(data));

function handleApproval(data) {
  const params = { ...data, hpNo: id.value };
  approval(httpStatus(params));
}

if (isDetail.value) requestDetail();
</script>

<template>
  <div class="padding__container">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem name="1" :title="title">
            <!-- 回票详情 -->
            <basic-descriptions
              v-if="isDetail"
              :columns="createTicketReturnColumns((context) => invoiceModalRef?.onDisplay(context))"
              :data="data"
            />
            <!-- 创建回票 -->
            <ReturnTciketForm v-else @create="handleCreate"  />
          </ElCollapseItem>

          <div v-if="isDetail">
            <ElCollapseItem name="2" title="对账详情">
              <ReconciliationForm ref="formRef" readonly :id="data.payNo" />
            </ElCollapseItem>

            <ElCollapseItem title="关联信息" name="10" v-if="data && ['2','3','4','6','12'].includes(String(data.status)) && showApproval">
              <OrderRelationApproval readonly :code="data.hpNo" />
            </ElCollapseItem>

            <InvoiceModal ref="invoiceModalRef" />

            <template v-if="!isSuperUser">
              <ElCollapseItem title="待发票与订单关联" name="8"  v-if="data && data.status == '11'  && hasPermissionWithCode('063')">
                <OrderRelation 
                  :code="data.hpNo" 
                  :payNo="data.payNo" 
                  @refresh="requestDetail" 
                />
              </ElCollapseItem>
            </template>
          </div>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
