<script setup>
import { defineProps, ref, watch, inject } from "vue";
import * as yup from "yup";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import { postProductSettingType } from "@/apis/productSetting";

const props = defineProps({
  editRecord: Object,
  getData: Function,
  updateEditRecord: Function,
});
const { openToast } = inject("app_toast");
const formScheme = yup.object({
  product_name: yup.string().required("必填"),
  operate_text: yup.string(),
  disable: yup.number().required("必填"), // 0:啟用;1:停用
});
const formState = ref({
  product_name: "",
  operate_text: "",
  disable: 0,
});

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

const { formErrorMsg, handleSubmit, handleErrorReset } =
  useFormErrorMessage(formScheme);
const form = ref(null);

const reset = () => {
  let resetForm = {};
  for (let key in formState.value) {
    resetForm[key] = typeof formState.value[key] == "number" ? 0 : "";
  }
  formState.value = resetForm;
};
const onCancel = () => {
  reset();
  handleErrorReset();
  props.updateEditRecord(null);
  production_setting_PS3_Add_modal.close();
};

const onOk = async () => {
  const values = await handleSubmit(formScheme, formState.value);
  console.log(values);
  const params = props.editRecord ? { ...props.editRecord, ...values } : values;
  const res = await postProductSettingType(params);
  if (res.isSuccess) {
    props.getData();
    onCancel();
  } else {
    openToast("error", res.msg, "#production_setting_PS3_Add_modal");
  }
};
</script>

<template>
  <Modal
    id="production_setting_PS3_Add_modal"
    :title="editRecord ? '編輯' : '新增'"
    :onCancel="onCancel"
    width="500"
  >
    <template #modalContent>
      <form ref="form">
        <Input
          v-if="!editRecord"
          :value="formState"
          class="my-2"
          name="product_name"
        >
          <template #topLeft>名稱</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.product_name }}
            </span></template
          >
        </Input>
        <Input :value="formState" class="my-2" name="operate_text">
          <template #topLeft>顯示名稱</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.operate_text }}
            </span></template
          >
        </Input>
        <RadioGroup
          class="my-2"
          name="disable"
          :value="formState"
          :items="[
            {
              key: 0,
              value: 0,
              title: '啟用',
            },
            {
              key: 1,
              value: 1,
              title: '停用',
            },
          ]"
        >
          <template #topLeft>狀態</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.disable }}
            </span></template
          >
        </RadioGroup>
      </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.stop.prevent="onOk"
      >
        確定
      </button>
    </template>
  </Modal>
</template>

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