<script setup lang="ts">
import { reactive, ref } from "vue";
import CapitalModal from "./capital-modal.vue";
import BasicDescriptions from "/@/components/BasicDescriptions";
import Invoice from "/@/components/InvoiceTitle";
import { httpAdd } from "/@/api/InvoiceSales/returnTicket";
import { httpDetail } from "/@/api/InvoiceSales/invoiceApply";
import { useResponseHandle } from "/@/hooks";
import { ElForm } from "element-plus";
import { useRouter } from "vue-router";
import { ORDER_COLUMNS } from "/@/utils/details/inv-open";
import RedDialog from "./red-dialog.vue";

const capitalModalRef = ref<InstanceType<typeof CapitalModal>>(null);
const redDialog = ref<InstanceType<typeof RedDialog>>(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({
  invNo: "",
  return_reason: "",
  remark: ""
});

const rules = {
  invNo: [{ required: true, trigger: "change", message: "请选择一张发票" }],
  return_reason: [
    { required: true, trigger: "change", message: "请输入退货原因" }
  ],
  remark: [{ required: true, trigger: "change", message: "请输入备注" }]
};

async function requesetCapitalDetail(invNo) {
  loading.value = true;

  const { code, message, data } = await httpDetail({
    invNo
  });

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

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

    //票是否超时
    const { invNo } = capitalDetail.value;
    const time = "123";

    if (time) {
      return redDialog.value.onDisplay(invNo);
    }

    const { code, message } = await httpAdd(formData);
    responseHandle({
      code,
      message,
      handler: () => push("/InvoiceSales/returnTicket")
    });
  });
}
</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="invNo">
      <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="ORDER_COLUMNS"
      />

      <Invoice mt-5 :invoice-data="capitalDetail" />
    </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="({ invNo }) => requesetCapitalDetail(invNo)"
  />

  <RedDialog ref="redDialog" />
</template>
