<script setup lang="ts">
import { ref, watch, unref } from "vue";
import { ElForm } from "element-plus";
import { createRules } from "../config/_rules";
import { useAsync } from "/@/hooks/core/useAsync";
import ChooseModal from "./choose-modal.vue";
import { httpDetail } from "/@/api/purchase/orderPay";
import { purchpayColumns } from "/@/utils/details/_purchase";
import BasicDescriptions from "/@/components/BasicDescriptions";

const emit = defineEmits(["create"]);

const formRef = ref<InstanceType<typeof ElForm> | null>(null);
const chooseModalRef = ref<InstanceType<typeof ChooseModal> | null>(null);

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

const formData = ref({
  dzNo: "",
  reason: ""
});

const handleChoose = () => chooseModalRef.value.onDisplay();

function handleCreate() {
  emit("create", unref(formData));
}

watch(
  () => formData.value.dzNo,
  DzNo => runDetail(httpDetail({ DzNo }))
);
</script>

<template>
  <div w-full>
    <ElForm ref="formRef" :model="formData" :rules="createRules">
      <ElFormItem label="采购付款" prop="dzNo">
        <div class="w-full flex justify-end">
          <ElButton type="primary" text @click="() => handleChoose()"
            >选择</ElButton
          >
        </div>

        <div class="w-full" v-if="Object.keys(detail).length > 0">
          <BasicDescriptions :columns="purchpayColumns" :data="detail" />
        </div>
      </ElFormItem>

      <ElFormItem label="退款原因" prop="reason">
        <ElInput v-model="formData.reason" placeholder="请输入退款原因" />
      </ElFormItem>

      <ElFormItem>
        <div class="flex w-full justify-end">
          <ElButton type="primary" @click="handleCreate">保存</ElButton>
        </div>
      </ElFormItem>
    </ElForm>

    <ChooseModal
      ref="chooseModalRef"
      @choose="dzNo => (formData.dzNo = dzNo)"
    />
  </div>
</template>

<style lang="scss" scoped></style>
