<script setup lang="ts">
import { shallowRef, ref, computed } from 'vue'
import { useRouter } from "vue-router"
import { useDetail } from "/@/hooks/core/useDetail";
import { usePermission } from "/@/hooks/core/usePermission";
import ReconciliationForm from "/@/components/ReconciliationForm";
import { ElTabs, ElTabPane, ElCollapse, ElCollapseItem } from "element-plus"
import { DefaultApprovalNode } from "/@/components/ApprovalNode";
import { httpOldStatus } from "/@/api/purchase/orderRecord";
import OrderForm from "./components/order-form.vue"
import { useAsync } from "/@/hooks/core/useAsync";
import { useUserInfo } from "/@/hooks/core/useUser";

const pageName = "currentcyOrderRecordDetail"
const status = computed(() => formRef.value?.detail.status || "");
const is_common = computed(() =>  formRef.value?.detail && String(formRef.value?.detail.is_comon) === '1');

const { id, title, isDetail, collapses } = useDetail({
  baseName: '通用订单对账',
  collapseLen: 2
});

const { push } = useRouter();
const loading = shallowRef(false);

const { isSuperUser } = useUserInfo();

const formRef = ref<InstanceType<typeof ReconciliationForm>>(null);
const { run: approval } = useAsync({ success: () => formRef.value.refresh() });
const { hasPermissionWithCode } = usePermission(pageName);

function handleApproval(data) {
  const params = { ...data, payNo: id.value };
  approval(httpOldStatus(params));
}
</script>


<template>
  <div class="padding__container" v-loading="loading">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <ReconciliationForm v-if="isDetail"  ref="formRef" :id="id" :loading="loading" :readonly="isDetail" isPurch />
            <OrderForm v-else @create="() => push('/InvoiceSales/currentcyOrderRecord')" />
          </ElCollapseItem>

          <template v-if="isDetail && !isSuperUser && is_common">
            <ElCollapseItem name="2" title="买方公司业务审核" v-if="String(status) === '1' && hasPermissionWithCode('039')">
              <DefaultApprovalNode approveValue="2" rejectValue="3" @approval="handleApproval" />
            </ElCollapseItem>
          </template>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
