<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="900px"
    draggable
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    destroy-on-close
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      size="default"
      v-loading="loading"
    >
      <!-- 基本信息 -->
      <div class="form-section">
        <div class="section-title">基本信息</div>
        <el-row :gutter="25">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="设备编号" prop="deviceNo">
              <el-input v-model="formData.deviceNo" clearable placeholder="请输入设备编号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="资产编号" prop="assetNo">
              <el-input v-model="formData.assetNo" clearable placeholder="请输入资产编号" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 网络配置 -->
      <div class="form-section">
        <div class="section-title">网络配置</div>
        <el-row :gutter="25">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="IP地址" prop="ip">
              <el-input v-model="formData.ip" clearable placeholder="请输入IP地址" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="端口号" prop="port">
              <el-input v-model="formData.port" clearable placeholder="请输入端口号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="服务名称" prop="serviceName">
              <el-input v-model="formData.serviceName" clearable placeholder="请输入服务名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 设备配置 -->
      <div class="form-section">
        <div class="section-title">设备配置</div>
        <el-row :gutter="25">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="状态" prop="enabled">
              <el-switch
                v-model="formData.enabled"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" size="default">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" size="default" :loading="loading">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { UspRelayApi } from '/@/api/admin/UspRelayApi'
import type { RelayGetOutput, RelayAddInput, RelayUpdateInput } from '/@/api/admin/data-contracts'

const props = defineProps<{
  modelValue: boolean
  title: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'refresh'): void
}>()

// 表单引用
const formRef = ref<FormInstance>()

// 表单数据
const formData = reactive<RelayGetOutput>({
  deviceNo: '',
  assetNo: '',
  ip: '',
  port: '',
  serviceName: '',
  enabled: true
})

// 表单校验规则
const rules = {
  deviceNo: [
    { required: true, message: '请输入设备编号', trigger: ['blur', 'change'] },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
  ],
  assetNo: [
    { required: true, message: '请输入资产编号', trigger: ['blur', 'change'] },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
  ],
  ip: [
    { required: true, message: '请输入IP地址', trigger: ['blur', 'change'] },
    { pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: 'IP地址格式不正确', trigger: ['blur', 'change'] }
  ],
  port: [
    { required: true, message: '请输入端口号', trigger: ['blur', 'change'] },
    { pattern: /^\d+$/, message: '端口号必须为数字', trigger: ['blur', 'change'] }
  ],
  serviceName: [
    { required: true, message: '请输入服务名称', trigger: ['blur', 'change'] },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
  ]
}

// 加载状态
const loading = ref(false)

// 对话框可见性
const dialogVisible = ref(false)

// 监听 modelValue 变化
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val
  }
)

// 监听对话框可见性变化
watch(
  () => dialogVisible.value,
  (val) => {
    emit('update:modelValue', val)
    if (!val) {
      resetForm()
    }
  }
)

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  Object.assign(formData, {
    deviceNo: '',
    assetNo: '',
    ip: '',
    port: '',
    serviceName: '',
    enabled: true
  })
}

// 设置表单数据
const setFormData = (data: RelayGetOutput) => {
  Object.assign(formData, data)
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const api = new UspRelayApi()
        let res
        if (formData.id) {
          // 更新
          const updateData: RelayUpdateInput = {
            id: formData.id,
            ...formData
          }
          res = await api.update(updateData)
        } else {
          // 新增
          const addData: RelayAddInput = {
            ...formData
          }
          res = await api.add(addData)
        }
        if (res.success) {
          ElMessage.success(formData.id ? '更新成功' : '新增成功')
          dialogVisible.value = false
          emit('refresh')
        }
      } catch (error) {
        console.error(error)
      } finally {
        loading.value = false
      }
    }
  })
}

// 关闭对话框
const handleClose = () => {
  resetForm()
}

// 打开对话框
const open = async (row: any = {}) => {
  if (row.id > 0) {
    const res = await new UspRelayApi().get({ id: row.id })
    if (res?.success) {
      Object.assign(formData, res.data)
    }
  } else {
    resetForm()
  }
  dialogVisible.value = true
}

// 暴露方法
defineExpose({
  open,
  setFormData
})
</script>

<style lang="scss" scoped>
.form-section {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 40px;
    height: 2px;
    background: #409eff;
  }
}

:deep(.el-form-item) {
  margin-bottom: 18px;

  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.el-switch__label) {
  font-size: 13px;
}
</style>
