<script setup lang="ts">
import { reactive, ref } from "vue";
import CapitalModal from "./capital-modal.vue";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { capital_detail_columns } from "../../config/configs";
import { httpTradeDetail } from "/@/api/InvoiceSales/refund";
import { httpAdd } from "/@/api/InvoiceSales/refund";
import { useResponseHandle } from "/@/hooks";
import { ElForm } from "element-plus";
import { useRouter } from "vue-router";

const capitalModalRef = ref<InstanceType<typeof CapitalModal>>(null);
const capitalDetail = ref<Record<string, string | null>>(null);
const formRef = ref<InstanceType<typeof ElForm>>(null);
const responseHandle = useResponseHandle();
const { push } = useRouter();
const loading = ref(false);

const formData = reactive({
  logNo: "",
  type: "",
  return_reason: "",
  remark: ""
});

const rules = {
  logNo: [{ required: true, trigger: "change", message: "请选择一笔资金" }],
  type: [{ required: true, trigger: "change", message: "请选择申请类型" }],
  return_reason: [
    { required: true, trigger: "change", message: "请输入退款原因" }
  ],
  remark: [{ required: true, trigger: "change", message: "请输入备注" }]
};

async function requesetCapitalDetail(logNo) {
  loading.value = true;
  const { code, message, data } = await httpTradeDetail({
    logNo
  });

  responseHandle({
    code,
    message,
    handler: function () {
      capitalDetail.value = data;
      formData.logNo = data.logNo;
      formRef.value.validateField("logNo");
    }
  });
  loading.value = false;
}

function handleCreate() {
  formRef.value.validate(async isVaild => {
    if (!isVaild) return;

    const { code, message } = await httpAdd(formData);

    responseHandle({
      code,
      message,
      handler: () => push("/InvoiceSales/refund")
    });
  });
}
</script>
<template>
  <h1 text-xl font-bold mb-2>创建退款申请</h1>

  <el-form
    :rules="rules"
    :model="formData"
    ref="formRef"
    size="small"
    label-width="100px"
  >
    <el-form-item label="资金认领" prop="logNo">
      <div flex justify-end w-full mb-2>
        <el-button
          size="small"
          type="primary"
          @click="() => capitalModalRef.onDisplay()"
          >选择</el-button
        >
      </div>

      <BasicDescriptions
        w-full
        v-loading="loading"
        v-if="capitalDetail"
        :data="capitalDetail"
        :col-number="2"
        :columns="capital_detail_columns"
      />
    </el-form-item>

    <el-form-item label="申请类型" prop="type">
      <el-select v-model="formData.type" placeholder="请选择申请类型" w-380px>
        <el-option value="1" label="退款" />
        <el-option value="2" label="解除资金认领" />
      </el-select>
    </el-form-item>

    <el-form-item label="退款原因" prop="return_reason" w-480px>
      <el-input v-model="formData.return_reason" placeholder="请输入退款原因" />
    </el-form-item>

    <el-form-item label="备注" prop="remark" w-480px>
      <el-input v-model="formData.remark" placeholder="请输入备注" />
    </el-form-item>

    <div flex w-full justify-end>
      <el-button type="primary" @click="handleCreate">保存</el-button>
    </div>
  </el-form>

  <CapitalModal
    ref="capitalModalRef"
    @on-add-order="({ logNo }) => requesetCapitalDetail(logNo)"
  />
</template>
