<!--
 * @Descripttion: ODF端口表单组件
 * @Author: (admin)
 * @Date: (2025-01-16)
-->
<template>
  <el-dialog :title="title" :lock-scroll="false" v-model="dialogVisible" @close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <!-- 可编辑字段 -->
        <el-col :lg="12">
          <el-form-item label="端口名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入端口名称" />
          </el-form-item>
        </el-col>

        <el-col :lg="12">
          <el-form-item label="连接状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio v-for="item in options.odf_ports_status" :key="item.dictValue" :value="parseInt(item.dictValue)">
                {{ item.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :lg="12">
          <el-form-item label="光衰值（dB）" prop="opticalAttenuation">
            <el-input v-model="form.opticalAttenuation" placeholder="请输入光衰值（dB）" />
          </el-form-item>
        </el-col>

        <el-col :lg="24">
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="form.remarks" placeholder="请输入备注" />
          </el-form-item>
        </el-col>

        <el-col :lg="24">
          <el-form-item label="历史故障表" prop="historyRemarks">
            <el-input type="textarea" v-model="form.historyRemarks" placeholder="请输入历史故障表" />
          </el-form-item>
        </el-col>

        <!-- 分隔线 -->
        <el-col :lg="24">
          <el-divider content-position="left">
            <span style="color: #909399; font-size: 12px">基础信息（不可修改）</span>
          </el-divider>
        </el-col>

        <!-- 不可编辑字段 -->
        <el-col :lg="12">
          <el-form-item label="机房名称" prop="roomName">
            <el-input v-model="form.roomName" disabled placeholder="请输入机房名称" />
          </el-form-item>
        </el-col>

        <el-col :lg="12">
          <el-form-item label="机架名称" prop="rackName">
            <el-input v-model="form.rackName" disabled placeholder="请输入机架名称" />
          </el-form-item>
        </el-col>

        <el-col :lg="12">
          <el-form-item label="机框名称" prop="frameName">
            <el-input v-model="form.frameName" disabled placeholder="请输入框名称" />
          </el-form-item>
        </el-col>

        <el-col :lg="6">
          <el-form-item label="行号" prop="rowNumber">
            <el-input v-model="form.rowNumber" disabled :controls="true" controls-position="right" placeholder="请输入行号（1-6）" />
          </el-form-item>
        </el-col>

        <el-col :lg="6">
          <el-form-item label="列号" prop="portNumber">
            <el-input v-model="form.portNumber" disabled :controls="true" controls-position="right" placeholder="请输入端口号（1-12）" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button text @click="handleClose">{{ $t('btn.cancel') }}</el-button>
      <el-button type="primary" :loading="submitLoading" @click="submitForm">{{ $t('btn.submit') }}</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="odfPortForm">
import { addOdfPorts, updateOdfPorts, getOdfPorts } from '@/api/business/odfports.js'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: [String, Number],
    default: null
  }
})

const emit = defineEmits(['update:visible', 'success'])

const { proxy } = getCurrentInstance()
const formRef = ref()
const submitLoading = ref(false)

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const isEdit = computed(() => !!props.id)
const title = computed(() => (isEdit.value ? '修改端口' : '添加端口'))

// 表单数据
const form = ref({
  id: null,
  name: null,
  roomId: null,
  roomName: null,
  rackId: null,
  rackName: null,
  frameId: null,
  frameName: null,
  deptId: null,
  rowNumber: null,
  portNumber: null,
  status: null,
  opticalAttenuation: null,
  remarks: null,
  historyRemarks: null,
  createdAt: null,
  updatedAt: null
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '端口名称不能为空', trigger: 'blur' }],
  roomName: [{ required: true, message: '机房名称不能为空', trigger: 'blur' }],
  rackName: [{ required: true, message: '机架名称不能为空', trigger: 'blur' }],
  frameName: [{ required: true, message: '框名称不能为空', trigger: 'blur' }],
  rowNumber: [{ required: true, message: '行号不能为空', trigger: 'blur', type: 'number' }],
  portNumber: [{ required: true, message: '列号不能为空', trigger: 'blur', type: 'number' }],
  status: [{ required: true, message: '连接状态', trigger: 'blur', type: 'number' }]
}

// 字典选项
const options = reactive({
  odf_ports_status: []
})

// 获取字典数据
var dictParams = ['odf_ports_status']
proxy.getDicts(dictParams).then((response) => {
  response.data.forEach((element) => {
    options[element.dictType] = element.list
  })
})

// 重置表单
function resetForm() {
  form.value = {
    id: null,
    name: null,
    roomId: null,
    roomName: null,
    rackId: null,
    rackName: null,
    frameId: null,
    frameName: null,
    deptId: null,
    rowNumber: null,
    portNumber: null,
    status: null,
    opticalAttenuation: null,
    remarks: null,
    historyRemarks: null,
    createdAt: null,
    updatedAt: null
  }
  nextTick(() => {
    proxy.resetForm('formRef')
  })
}

// 加载数据
function loadData() {
  if (props.id) {
    getOdfPorts(props.id).then((res) => {
      const { code, data } = res
      if (code == 200) {
        form.value = { ...data }
      }
    })
  } else {
    resetForm()
  }
}

// 提交表单
function submitForm() {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      submitLoading.value = true

      if (isEdit.value) {
        updateOdfPorts(form.value)
          .then((res) => {
            proxy.$modal.msgSuccess('修改成功')
            handleSuccess()
          })
          .finally(() => {
            submitLoading.value = false
          })
      } else {
        addOdfPorts(form.value)
          .then((res) => {
            proxy.$modal.msgSuccess('新增成功')
            handleSuccess()
          })
          .finally(() => {
            submitLoading.value = false
          })
      }
    }
  })
}

// 成功处理
function handleSuccess() {
  dialogVisible.value = false
  emit('success')
}

// 关闭对话框
function handleClose() {
  dialogVisible.value = false
  resetForm()
}

// 监听对话框显示状态
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      loadData()
    }
  }
)
</script>
