<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { EquPrinterApi } from '/@/api/admin/EquPrinterApi'
import type { EquPrinterAddInput, EquPrinterUpdateInput } from '/@/api/admin/data-contracts'

const props = defineProps<{
  modelValue: boolean
  title: string
  formData: Partial<EquPrinterAddInput> & { id?: number }
}>()

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

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

// 表单数据
const form = reactive<EquPrinterAddInput & { id?: number }>({
  deviceNo: '',
  assetNo: '',
  ip: '',
  port: 9100,
  printerIP: '',
  printerPort: '',
  printerHeight: '',
  printerHeightOne: '',
  printerHeightTwo: '',
  printerHeightThree: '',
  printerWidth: '',
  printerWidthOne: '',
  printerWidthTwo: '',
  printerWidthThree: '',
  printerFont: '',
  printerFontOne: '',
  printerFontTwo: '',
  printerFontThree: '',
  printerNumber: 1,
  isEnabled: true
})

// 表单校验规则
const rules = {
  deviceNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
  assetNo: [{ required: true, message: '请输入资产编号', trigger: 'blur' }],
  ip: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
  port: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
  printerIP: [{ required: true, message: '请输入打印机IP', trigger: 'blur' }],
  printerPort: [{ required: true, message: '请输入打印机端口', trigger: 'blur' }],
  printerHeight: [{ required: true, message: '请输入打印高度', trigger: 'blur' }],
  printerWidth: [{ required: true, message: '请输入打印宽度', trigger: 'blur' }],
  printerFont: [{ required: true, message: '请输入打印字体', trigger: 'blur' }],
  printerNumber: [{ required: true, message: '请输入打印数量', trigger: 'blur' }]
}

// 对话框显示状态
const dialogVisible = ref(false)

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

// 监听对话框关闭
watch(() => dialogVisible.value, (val) => {
  emit('update:modelValue', val)
  if (!val) {
    resetForm()
  }
})

// 监听表单数据变化
watch(() => props.formData, (val) => {
  if (val) {
    Object.assign(form, val)
  }
}, { deep: true, immediate: true })

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  Object.assign(form, {
    deviceNo: '',
    assetNo: '',
    ip: '',
    port: 9100,
    printerIP: '',
    printerPort: '',
    printerHeight: '',
    printerHeightOne: '',
    printerHeightTwo: '',
    printerHeightThree: '',
    printerWidth: '',
    printerWidthOne: '',
    printerWidthTwo: '',
    printerWidthThree: '',
    printerFont: '',
    printerFontOne: '',
    printerFontTwo: '',
    printerFontThree: '',
    printerNumber: 1,
    isEnabled: true
  })
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        const api = new EquPrinterApi()
        if (form.id) {
          const res = await api.update(form)
          if (res.success) {
            ElMessage.success('修改成功')
            dialogVisible.value = false
            emit('success')
          }
        } else {
          const res = await api.add(form)
          if (res.success) {
            ElMessage.success('添加成功')
            dialogVisible.value = false
            emit('success')
          }
        }
      } catch (error) {
        console.error('提交表单失败:', error)
      }
    }
  })
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="900px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    draggable
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      size="default"
      class="printer-form"
    >
      <!-- 基本信息 -->
      <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="form.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="form.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="form.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-number v-model="form.port" :min="1" :max="65535" style="width: 100%" 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="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第一行宽度" prop="printerWidth">
              <el-input v-model="form.printerWidth" clearable placeholder="请输入第一行宽度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第一行高度" prop="printerHeight">
              <el-input v-model="form.printerHeight" clearable placeholder="请输入第一行高度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第一行字体" prop="printerFont">
              <el-input v-model="form.printerFont" clearable placeholder="请输入第一行字体" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="25">
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第二行宽度" prop="printerWidthOne">
              <el-input v-model="form.printerWidthOne" clearable placeholder="请输入第二行宽度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第二行高度" prop="printerHeightOne">
              <el-input v-model="form.printerHeightOne" clearable placeholder="请输入第二行高度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第二行字体" prop="printerFontOne">
              <el-input v-model="form.printerFontOne" clearable placeholder="请输入第二行字体" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="25">
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第三行宽度" prop="printerWidthTwo">
              <el-input v-model="form.printerWidthTwo" clearable placeholder="请输入第三行宽度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第三行高度" prop="printerHeightTwo">
              <el-input v-model="form.printerHeightTwo" clearable placeholder="请输入第三行高度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第三行字体" prop="printerFontTwo">
              <el-input v-model="form.printerFontTwo" clearable placeholder="请输入第三行字体" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="25">
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第四行宽度" prop="printerWidthThree">
              <el-input v-model="form.printerWidthThree" clearable placeholder="请输入第四行宽度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第四行高度" prop="printerHeightThree">
              <el-input v-model="form.printerHeightThree" clearable placeholder="请输入第四行高度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="第四行字体" prop="printerFontThree">
              <el-input v-model="form.printerFontThree" clearable placeholder="请输入第四行字体" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="25">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="打印数量" prop="printerNumber">
              <el-input-number v-model="form.printerNumber" :min="1" :max="999" style="width: 100%" placeholder="请输入打印数量" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="启用状态" prop="isEnabled">
              <el-switch
                v-model="form.isEnabled"
                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="submitForm" size="default">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<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;
}

:deep(.el-switch__label) {
  font-size: 13px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid var(--el-border-color-lighter);
}
</style>
