<script setup>
import { ref, defineProps, onMounted, watch } from "vue";
import * as yup from "yup";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import { getAssetMainList, postAssetSubList } from "@/apis/asset";

const props = defineProps({
  openModal: Function,
  onCancel: Function,
  getData: Function,
  editRecord: Object,
});

const mainSystem = ref([]);
const getMainSystems = async () => {
  const res = await getAssetMainList();
  mainSystem.value = res.data.map((d) => ({ ...d, key: d.id }));
};

let subSysSchema = yup.object({
  system_key: yup.string().required("必填"), // 名稱
  // system_value: yup.string().required("必填"), // 代稱
  // system_parent_id: yup.number().required("必填"), // 大類id
});

const { formErrorMsg, handleSubmit, handleErrorReset } =
  useFormErrorMessage(subSysSchema);

const formState = ref({
  system_key: "",
  // system_value: "",
  // system_parent_id: 0,
});

const resetForm = () => {
  formState.value = {
    system_key: "",
    // system_value: "",
    // system_parent_id: 0,
  };
};

onMounted(() => {
  getMainSystems();
});

watch(
  () => props.editRecord,
  (newValue) => {
    if (newValue) {
      formState.value = newValue;
    } else {
      resetForm();
    }
  }
);

const onOk = async () => {
  // 編輯
  const value = await handleSubmit(subSysSchema, formState.value);

  const res = await postAssetSubList({
    ...formState.value,
    id: props.editRecord ? props.editRecord.id : 0,
  });

  if (res.isSuccess) {
    props.getData();
    props.onCancel();
  }
};
</script>

<template>
  <button class="btn btn-sm btn-success mr-3" @click.stop.prevent="openModal">
    <font-awesome-icon :icon="['fas', 'plus']" />新增
  </button>
  <Modal
    id="asset_add_sub_item"
    :title="props.editRecord?.id ? '修改類別':'新增類別'"
    :open="open"
    :onCancel="onCancel"
    width="300"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 flex flex-col items-center">
        <Input name="system_key" :value="formState">
          <template #topLeft>名稱</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.system_key }}
            </span></template
          >
        </Input>
        <!-- <Input name="system_value" :value="formState" :readonly="props.editRecord?.id">
          <template #topLeft>代號</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.system_value }}
            </span></template
          >
        </Input>
        <Select
          :options="mainSystem"
          Attribute="system_key"
          class=""
          name="system_parent_id"
          :value="formState"
          selectClass="border-info  focus-within:border-info"
          :disabled="props.editRecord?.id"
        >
          <template #topLeft>所屬大類</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.system_parent_id }}
            </span></template
          >
        </Select> -->
      </form>
    </template>
    <template #modalAction>
      <button
        type="reset"
        class="btn btn-outline-success mr-2"
        @click.prevent="onCancel"
      >
        取消
      </button>
      <button
        type="submit"
        class="btn btn-outline-success"
        @click.prevent="onOk"
      >
        確定
      </button>
    </template>
  </Modal>
</template>

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