<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="35rem"
      :title="getTitle"
      @register="register"
      @cancel="handleCancel"
      @ok="handleOk"
      destroyOnClose
    >
      <div>
        <BasicForm @register="registerForm" />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
import {BasicModal, useModalInner} from "/@/components/Modal";
import {BasicForm, useForm} from "/@/components/Form";
import {computed, ref, unref} from "vue";
import {useI18n} from "/@/hooks/web/useI18n";
import {schemas} from "/@/views/equipment/category/index";
import {ipRegex} from "/@/utils/rules";
import {deleteFormField} from "/@/views/device/deviceaccess/index";
import {
  deviceProfileAccessInformation,
  updateDeviceProfileAccessInformation
} from "/@/api/device/deviceAccess";
import {useMessage} from "/@/hooks/web/useMessage";
const isUpdate = ref<Boolean>(false);
const { t } = useI18n();
const emit = defineEmits(['handleReload', 'register']);
const { createMessage } = useMessage();

const [registerForm, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
  labelWidth: 150,
  schemas,
  actionColOptions: {
    span: 14,
  },
  showActionButtonGroup: false,
});

const recordInfo = ref<Recordable>({});

const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  await resetFields();
  setModalProps({ confirmLoading: false, loading: true });
  isUpdate.value = data?.isUpdate;
  recordInfo.value = data?.record;
  if (data?.record) {
    const intranetIpAndPort = {
      inputIp: data?.record.intranetIp,
      inputPort: data?.record.intranetPort,
    };
    const outerIpAndPort = {
      inputIp: data?.record.outerNetIp,
      inputPort: data?.record.outerNetPort,
    };
    setFieldsValue(data?.record);
    setFieldsValue({ ...data?.record?.sipExtend });
    setFieldsValue({ intranetIpAndPort, outerIpAndPort });
  }
  setModalProps({ loading: false });
});

const getTitle = computed(() =>
  !unref(isUpdate)
    ? t('equipment.category.createCategoryText')
    : t('equipment.category.editCategoryText')
);

const handleCancel = () => closeModal();

const handleOk = async () => {
  await validate();
  let values = getFieldsValue();
  const { intranetIpAndPort, outerIpAndPort } = values;
  // values.intranetIp = intranetIpAndPort.inputIp;
  // values.intranetPort = intranetIpAndPort.inputPort;
  // values.outerNetIp = outerIpAndPort.inputIp;
  // values.outerNetPort = outerIpAndPort.inputPort;
  // if (!ipRegex.test(values.intranetIp)) {
  //   return createMessage.error(t('deviceManagement.deviceAccess.ipRuleText'));
  // }

  const sipExtend = {
    serverId: values['serverId'],
    serverDomain: values['serverDomain'],
    serverPassword: values['serverPassword'],
  };
  values.sipExtend = sipExtend;
  deleteFormField.forEach((deleteItem) => {
    Reflect.deleteProperty(values, deleteItem);
  });
  if (unref(isUpdate)) {
    // 更新
    values = { ...values, id: unref(recordInfo).id };
    // await updateDeviceProfileAccessInformation(values);
  } else {
    // await deviceProfileAccessInformation(values);
  }
  createMessage.success(t('equipment.category.operationSuccessText'));
  emit('handleReload');
  handleCancel();
};

</script>