<script setup lang="ts">
import { computed, onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useAsync } from "/@/hooks";
import { httpInfo } from "/@/api/InvoiceSales/capitalClaim";
import { approval_process } from "../approval-process";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { httpDetail, httpStatus } from "/@/api/InvoiceSales/capitalPool";
import PaymentReceipt from "../basic-claim/receipt-payment.vue";
import { CAPITAL_COLUMNS } from "/@/utils/details/tragelog";
import { ORDER_COLUMNS, GOOD_COLUMNS } from "/@/utils/details/sale";
import { useUserInfo } from "/@/hooks/core/useUser";
import { usePermission } from "/@/hooks/core/usePermission";

const { query } = useRoute();
const collapses = ref(["1", "2", "3", "4", "5"]);
const logNo = computed(() => query.id);

const pageName = "capitalDetail";

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

//{ code: "025", name: "财务审核" },
const { isSuperUser } = useUserInfo();
const { hasPermissionWithCode } = usePermission(pageName);

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

const { run: capitalStatusRun } = useAsync({
  success: () => {
    requesetCapitalDetail();
  }
});

const requesetCapitalDetail = () => {
  capitalDetailRun(
    httpDetail({
      logNo: logNo.value
    })
  );
};

const requesetTradeDetail = () => {
  tradeDetailRun(
    httpInfo({
      tradNo: tradeNo.value
    })
  );
};

//当前的审核流程
const currentProcess = computed(() => {
  const { status } = capitalDetail.value;
  return approval_process[status];
});

const tradeNo = computed(() => {
  const { tradNo } = capitalDetail.value;
  return tradNo;
});

//资金认证状态
const requesetCapitalStatus = (otherParams: Record<any, any>) => {
  capitalStatusRun(
    httpStatus({
      logNo: logNo.value,
      ...otherParams
    })
  );
};

//初始化数据
function initalData() {
  if (!logNo.value) return;
  requesetCapitalDetail();
}

onMounted(() => initalData());

watchEffect(() => tradeNo.value && requesetTradeDetail());
</script>

<template>
  <div class="capital__content" bg-white v-loading="loading">
    <ElTabs>
      <ElTabPane label="详情">
        <ElCollapse v-model="collapses">
          <ElCollapseItem title="资金详情" name="1">
            <PaymentReceipt :trade-info="tradeDetail" />
          </ElCollapseItem>

          <!-- 详情 -->
          <ElCollapseItem title="认领资金详情" name="4">
            <BasicDescriptions
              :columns="CAPITAL_COLUMNS"
              :data="capitalDetail"
            />
          </ElCollapseItem>

          <!-- 关联订单 -->
          <ElCollapseItem title="关联订单信息" name="2">
            <BasicDescriptions
              :columns="ORDER_COLUMNS"
              :data="capitalDetail.orderinfo ? capitalDetail.orderinfo : {}"
            />
          </ElCollapseItem>

          <ElCollapseItem title="商品信息" name="3">
            <BasicDescriptions
              :columns="GOOD_COLUMNS"
              :data="capitalDetail.orderinfo ? capitalDetail.orderinfo : {}"
            />
          </ElCollapseItem>

          <!-- 审核 -->
          <ElCollapseItem
            name="5"
            v-if="
              currentProcess && !isSuperUser && hasPermissionWithCode('025')
            "
            :title="currentProcess.title"
          >
            <component
              :is="currentProcess.component"
              @change-status="requesetCapitalStatus"
            />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>

      <ElTabPane label="审批记录" />
    </ElTabs>
  </div>
</template>
