<script setup lang="ts">
import { onMounted  ,ref} from "vue"
import Form from "./components/form.vue"
import { useDetail } from "/@/hooks/core/useDetail"
import Description from "../descriptions/index.vue"
import { DefaultApprovalNode } from "/@/components/ApprovalNode";
import { httpDetail, httpStatus } from "/@/api/postSupplierOrder/sendOrderRecord";
import { usePermission } from "/@/hooks/core/usePermission";
import { useAsync } from "/@/hooks";

import { httpRequsetExport } from "/@/utils/export";
import PrintOrderRecord from "/@/components/sendPrintRecord";

const pageName = "supSendOrderRecordDetail"

const { id, title, isDetail, collapses } = useDetail({
  baseName: "发货运单对账",
  collapseLen: 3
});

const {
  run, data, loading: d_loading,
} = useAsync<Record<string, any>>({
  initalData: {},
});

const PrintOrderRecordRef = ref<InstanceType<typeof PrintOrderRecord> | null>(null);
const { hasPermissionWithCode } = usePermission(pageName);

const { run: approval, loading: a_loading } = useAsync({ success: () => run(httpDetail({ payNo: id.value })) });

const handleApproval = data => approval(httpStatus({ payNo: id.value, ...data }));

onMounted(() => isDetail.value && run(httpDetail({ payNo: id.value })));

const _loading = ref(false);
async function onDownloadPayInfo() {
  await httpRequsetExport({
    url: "paytrackxport",
    name: "对账单明细表",
    onStart: () => (_loading.value = true),
    onSuccess: () => (_loading.value = false),
    onFail: () => (_loading.value = false),
    params: { payNo: id.value }
  });
}
</script>

<template>
  <div class=" bg-white" style="padding: 10px;">
    <el-tabs>
      <el-tab-pane :label="title">
        <Form v-if="!isDetail" />

        <ElCollapse v-model="collapses" v-else v-loading="d_loading || a_loading">
          <ElCollapseItem :title="title" name="1">
            <Description :data="data" readonly /> 
          </ElCollapseItem>


            <ElCollapseItem name="2" title="待业务公司业务审核" v-if="String(data.status) === '1' && hasPermissionWithCode('052')">
              <DefaultApprovalNode approveValue="2" rejectValue="3" @approval="handleApproval" />
            </ElCollapseItem>
        </ElCollapse>
      </el-tab-pane>
    </el-tabs>

     <div style="position: absolute; top: 15px; right: 15px" v-if="isDetail">
        
      <ElButton  @click="PrintOrderRecordRef.print()" v-if="hasPermissionWithCode('046')" >
          打印对账单
      </ElButton>


      <ElButton :loading="_loading" type="primary" v-if="hasPermissionWithCode('038')"  @click="() => onDownloadPayInfo()">
        对账单明细导出
      </ElButton>
    </div>

      <PrintOrderRecord :record="data" ref="PrintOrderRecordRef" />
  </div>
</template>
