<script setup>
import { ref, reactive, computed, nextTick } from 'vue'
import { Form, Modal } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'
import { createApi, updateApi } from '~@/api/list/gateway-group-ip-list.js'

const emit = defineEmits(['ok'])
const useForm = Form.useForm

const formRef = ref()
const visible = ref(false)
const isEdit = ref(false)
const continueToAdd = ref(false)
const title = computed(() => (isEdit.value ? '编辑IP' : '新增IP'))

const defaultFormState = {
  id: undefined,
  gatewayGroupId: undefined,
  ip: '',
  tag: '',
  originPlace: '',
  comment: '',
}

const formState = reactive(cloneDeep(defaultFormState))
let originalRecord = null

const { resetFields, validate, validateInfos } = useForm(formState, {
  ip: [{ required: true, message: '请输入IP地址' }],
})

function open(record) {
  visible.value = true
  isEdit.value = !!record?.id

  if (isEdit.value) {
    Object.assign(formState, cloneDeep(record))
    originalRecord = cloneDeep(record)
  } else {
    const gatewayGroupId = record?.gatewayGroupId
    resetFields()
    formState.gatewayGroupId = gatewayGroupId
  }

  continueToAdd.value = false
  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

function handleReset() {
  let newFormState
  if (isEdit.value) {
    newFormState = cloneDeep(originalRecord)
  } else {
    newFormState = { ...cloneDeep(defaultFormState), gatewayGroupId: formState.gatewayGroupId }
  }
  Object.assign(formState, newFormState)

  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

function close() {
  visible.value = false
  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

async function handleOk() {
  try {
    await validate()
    const api = isEdit.value ? updateApi : createApi
    const res = await api(formState)
    if (res.code === 0) {
      Modal.success({
        title: '操作成功',
        onOk: () => {
          emit('ok')
          if (!isEdit.value && continueToAdd.value) {
            handleReset()
          } else {
            close()
          }
        },
      })
    }
  } catch (e) {
    console.log(e)
  }
}

defineExpose({ open })
</script>

<template>
  <a-modal :visible="visible" :title="title" @cancel="close">
    <a-form ref="formRef" :label-col="{ span: 4 }" :model="formState">
      <a-form-item label="IP地址" v-bind="validateInfos.ip">
        <a-input v-model:value="formState.ip" placeholder="请输入IP地址" />
      </a-form-item>
      <a-form-item label="标签">
        <a-input v-model:value="formState.tag" placeholder="请输入标签" />
      </a-form-item>
      <a-form-item label="归属地">
        <a-input v-model:value="formState.originPlace" placeholder="请输入归属地" />
      </a-form-item>
      <a-form-item label="备注">
        <a-input v-model:value="formState.comment" placeholder="请输入备注" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-checkbox v-if="!isEdit" v-model:checked="continueToAdd" style="float: left; line-height: 32px;">
        继续添加
      </a-checkbox>
      <a-button @click="close">取消</a-button>
      <a-button @click="handleReset">重置</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>