<script setup lang="ts">
import { ref, computed, nextTick } from "vue";
import { useDetail } from "/@/hooks/core/useDetail";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpDetail, httpAdd, httpStatus, httpSupplierInfo } from "/@/api/purchase/inputInvoicePool";
import BasicDescriptions from "/@/components/BasicDescriptions";
import ReconciliationForm from "/@/components/ReconciliationForm";
import ReturnTicketForm from "./components/return-form.vue";
import { useRouter } from "vue-router";
import { DefaultApprovalNode } from "/@/components/ApprovalNode";
import { useUserInfo } from "/@/hooks/core/useUser";
import { usePermission } from "/@/hooks/core/usePermission";
import { invoicePoolColumns } from "/@/utils/details/_purchase";
import OrderRelation from "/@/components/OrderRelation/src/index.vue";
import InvoiceModal from "./components/invoice-modal.vue";

import dayjs from "dayjs"


const pageName = "inputInvoicePoolDetail";
const { hasPermissionWithCode, permissions } = usePermission(pageName);

const invoiceModalRef = ref<InstanceType<typeof InvoiceModal>>(null);

const { push } = useRouter();
const formRef = ref<InstanceType<typeof ReconciliationForm> | null>(null);
const { isSuperUser } = useUserInfo();
const showApproval = ref(true)

const { id, isDetail, title, collapses } = useDetail({
  baseName: "发票",
  collapseLen: 14
});


const isSupplierClient = ref(false)
const { run: detail, data } = useAsync<Record<string, string>>({
  initalData: {},
  success: async (data = {}) => {
    const { supplierName } = data
    const result = await httpSupplierInfo({ name: supplierName })
    const [ supplier = {} ] = (result?.data?.list || [])
    isSupplierClient.value = supplier.has_account
  }
});

const { run: create } = useAsync({ success: () => push("/purchase/inputInvoicePool") });
const { run: approval } = useAsync({ success: () => refresh() });

function refresh() {
  requestDetail();
  formRef.value && formRef.value.refresh();

  showApproval.value = false
  nextTick(() => showApproval.value = true)
}

const requestDetail = () => detail(httpDetail({ InvCode: id.value }));
const handleCreate = data => {
  const { invArr } = data

  const list = invArr.map(item => ({
    invoice_subtotal: item.invoiceType.indexOf('fully') !== -1 ? '0'  :  item.subtotal_amount,
    invoice_total: item.invoiceType.indexOf('fully') !== -1 ?  item.subtotal_amount : '0',
    invoice_type: item.invoiceType || '',
    invoice_number: item.invNumber || '',
    check_code: item.checkNumber || '',
    invoice_code: item.invCode || '',
    open_date: dayjs(item.open_time).format('YYYY-MM-DD')
  }))

  create(httpAdd({ list }));
}


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">
            <!-- 发票详情 -->
            <BasicDescriptions
              v-if="isDetail"
              :data="data"
              :columns="invoicePoolColumns"
            />
            <!-- 创建回票 -->
            <ReturnTicketForm v-else @create="handleCreate" />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
