<script setup lang="ts">
import { useAsync } from "/@/hooks/core/useAsync";
import { useDetail } from "/@/hooks/core/useDetail";
import { ORDER_COLUMNS } from "/@/utils/details/sale";
import BasicDescriptions from "/@/components/BasicDescriptions";
import ApprovalPending from "./components/approval-pending.vue";
import CreateRefundForm from "./components/refund-form.vue";
import { useRouter } from "vue-router";
import { useUserInfo } from "/@/hooks/core/useUser";
import { usePermission } from "/@/hooks/core/usePermission";

import { httpInfo as httpTrade } from "/@/api/InvoiceSales/capitalClaim";

import {
  httpDetail,
  httpAdd,
  httpStatus,
  httpTradeDetail
} from "/@/api/InvoiceSales/refund";

import {
  refundColumns,
  CAPITAL_COLUMNS,
  public_columns,
  description_columns_out,
  description_columns_in
} from "./config/_details";

const pageName = "refundDetail";
const { hasPermissionWithCode } = usePermission(pageName);

const { id, isDetail, collapses, title } = useDetail({
  baseName: "退款申请",
  collapseLen: 5
});

const { push } = useRouter();

const { isSuperUser } = useUserInfo();

const {
  data,
  run: detail,
  loading: _loading
} = useAsync<Record<string, string>>({
  initalData: {},
  success: data => {
    const { logNo, tradNo } = data;
    capitalDetailRun(httpTradeDetail({ logNo }));
    tradeDetailRun(httpTrade({ tradNo }));
  }
});

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

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

const { run: create, loading } = useAsync({
  success: () => push(`/InvoiceSales/refund`)
});

const { run: approval } = useAsync({
  success: () => detail(httpDetail({ returnCode: id.value }))
});

const handleCreate = _data => create(httpAdd(_data));

function handleApproval(_data) {
  const params = {
    ..._data,
    returnCode: id.value
  };

  approval(httpStatus(params));
}

if (isDetail.value) detail(httpDetail({ returnCode: id.value }));
</script>

<template>
  <div class="padding__container">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem name="1" :title="title">
            <BasicDescriptions
              v-if="isDetail"
              v-loading="_loading"
              :columns="refundColumns"
              :data="data"
            />

            <CreateRefundForm
              v-else
              v-loading="loading"
              @create="handleCreate"
            />
          </ElCollapseItem>

          <template v-if="isDetail">
            <ElCollapseItem title="资金详情" name="3">
              <el-row>
                <el-col :span="8">
                  <BasicDescriptions
                    ref="defaultRef1"
                    :data="tradeDetail"
                    :columns="public_columns"
                  />
                </el-col>
                <el-col :span="8">
                  <BasicDescriptions
                    ref="defaultRef2"
                    :data="tradeDetail"
                    :columns="description_columns_out"
                /></el-col>
                <el-col :span="8">
                  <BasicDescriptions
                    ref="defaultRef3"
                    :data="tradeDetail"
                    :columns="description_columns_in"
                /></el-col>
              </el-row>
            </ElCollapseItem>

            <ElCollapseItem name="4" title="资金认领详情">
              <BasicDescriptions
                v-if="isDetail"
                v-loading="capitalLoading"
                :columns="CAPITAL_COLUMNS"
                :data="capitalDetail"
              />
            </ElCollapseItem>

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

            <template v-if="!isSuperUser">
              <ElCollapseItem
                v-if="
                  String(data.status) === '0' && hasPermissionWithCode('025')
                "
                name="2"
                title="待审核"
              >
                <ApprovalPending
                  :returnType="data.type"
                  @approval="handleApproval"
                />
              </ElCollapseItem>
            </template>
          </template>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
