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

const invNumber = ref("");
const openDate = ref("");
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, inv_number, open_date }) {
  loading.value = true;
  invNumber.value = inv_number;
  openDate.value = open_date;

  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 isValid => {
    if (!isValid) return;

    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"
      />
    </el-form-item>
    n
    <Invoice mt-5 v-if="invNumber" :inv-number="invNumber" type="sale" />

    <div mt-5 />

    <el-form-item label="退票原因" prop="return_reason" w-480px>
      <el-input
        type="textarea"
        :rows="6"
        maxlength="2000"
        max
        w-300px
        v-model="formData.return_reason"
        show-word-limit
      />
    </el-form-item>

    <el-form-item label="备注" prop="remark" w-480px>
      <el-input
        type="textarea"
        :rows="6"
        maxlength="2000"
        v-model="formData.remark"
        placeholder="请输入发票备注"
        show-word-limit
      />
    </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="row => requesetCapitalDetail(row)"
  />

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