<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 { CAPITAL_COLUMNS } from "/@/utils/details/tragelog";
import { ORDER_COLUMNS, GOOD_COLUMNS } from "/@/utils/details/sale";
import { usePermission } from "/@/hooks/core/usePermission";
import { useUserInfo } from "/@/hooks/core/useUser";

import FundDetail from "/@/components/FundDetail/index.vue"
import BaseForm from "./base-form/index.vue"


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

const pageName = "capitalPoolDetail";

const { isSuperUser } = useUserInfo();
const { hasPermissionWithCode } = usePermission(pageName);
const tradeNo = computed(() => capitalDetail.value?.tradNo);

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


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


const { run: capitalStatusRun } = useAsync({ success: () => { requestCapitalDetail(); } });
const requestCapitalDetail = () => capitalDetailRun(httpDetail({ logNo: logNo.value }) );
const requestTradeDetail = () => tradeDetailRun(httpInfo({ tradNo: tradeNo.value }));

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


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

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

onMounted(() => initialData());
watchEffect(() => tradeNo.value && requestTradeDetail());
</script>

<template>
  <div class="capital__content" bg-white v-loading="loading">
    <ElTabs>
      <ElTabPane :label="tradeNo ? '资金详情' : '新建资金认领'">
        <ElCollapse v-model="collapses">
          <ElCollapseItem title="新建资金认领" name="2" v-if="!logNo">
            <BaseForm />
          </ElCollapseItem>

        <template v-if="tradeNo">
            <!-- 详情 -->
          <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 title="资金详情" name="1"  v-if="logNo">
            <FundDetail :tradeInfo="tradeDetail || {}" />
          </ElCollapseItem>
          
          <!-- 审核 -->
          <ElCollapseItem
            name="5"
            v-if="currentProcess && !isSuperUser  && hasPermissionWithCode('025')"
            :title="currentProcess.title"
          >
            <component
              :is="currentProcess.component"
              @change-status="requestCapitalStatus"
            />
          </ElCollapseItem>
          </template>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
