<script setup lang="ts">
import { ref } from "vue";
import { useDetail } from "/@/hooks/core/useDetail";
import { useAsync } from "/@/hooks/core/useAsync";
import BasicDescriptions from "/@/components/BasicDescriptions";
import ReconciliationForm from "/@/components/ReconciliationForm";
import ReturnTciketForm from "./components/return-form.vue";
import { DefaultApprovalNode } from "/@/components/ApprovalNode";
import { useRouter } from "vue-router";
import { useUserInfo } from "/@/hooks/core/useUser";
import { usePermission } from "/@/hooks/core/usePermission";
import { httpDetail as httpReturnDetail } from "/@/api/purchase/unInvoiceRelation";

import {
  ticketReturnReliveColumns,
  ticketReturnColumns
} from "/@/utils/details/_purchase";

import {
  httpInfo,
  httpAdd,
  httpStatus
} from "/@/api/purchase/unInvoiceRelation";

const { push } = useRouter();

const pageName = "unSupplyInvoiceRelationDetail";


// { code: "020", name: "买方公司审核" },
const { hasPermissionWithCode } = usePermission(pageName);

const formRef = ref<InstanceType<typeof ReconciliationForm> | null>(null);

const { isSuperUser } = useUserInfo();

const { id, isDetail, title, collapses } = useDetail({
  baseName: "发票解除关联",
  collapseLen: 5
});

const { run: detail, data } = useAsync<Record<string, string>>({
  initalData: {},
  success: ({ orderCode }) =>
    returnDetailRun(httpReturnDetail({ hpNo: orderCode }))
});

const { run: returnDetailRun, data: returnDetailData } = useAsync<Record<string, string>>({
  initalData: {}
});

const { run: approval } = useAsync({ success: () => requestDetail() });

const { run: create } = useAsync({ success: () => push("/supply/supplyCollection?tab=unSupplyInvoiceRelation_collection") });

const handleApproval = data => approval(httpStatus({ returnCode: id.value, ...data }));
const requestDetail = () => detail(httpInfo({ returnCode: id.value }));
const handleCreate = data => create(httpAdd(data));

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"
              :columns="ticketReturnReliveColumns"
              :data="data"
            />
            <!-- 创建回票退票 -->
            <ReturnTciketForm v-else @create="handleCreate" />
          </ElCollapseItem>

          <ElCollapseItem v-if="isDetail" name="4" title="采购回票详情">
            <BasicDescriptions
              :columns="ticketReturnColumns"
              :data="returnDetailData"
            />
          </ElCollapseItem>

          <div v-if="isDetail">
            <ElCollapseItem
              name="3"
              title="买方公司财务审核"
              v-if="
                !isSuperUser &&
                String(data.status) === '1' &&
                hasPermissionWithCode('020')
              "
            >
              <DefaultApprovalNode
                no-time
                has-remark
                approve-value="2"
                reject-value="3"
                img-prop="returnImg"
                @approval="handleApproval"
              />
            </ElCollapseItem>
          </div>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
