<!--
 * @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="sequenceNumber">
            <el-input-number
              v-model.number="form.sequenceNumber"
              :disabled="isView"
              :controls="true"
              controls-position="right"
              placeholder="请输入序号" />
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item label="ODF名称" prop="rackName">
            <el-input v-model="form.rackName" :disabled="isView" placeholder="请输入ODF名称" />
          </el-form-item>
        </el-col>

        <!-- 高级 -->
        <el-col v-if="isAdd" :lg="24">
          <el-divider content-position="left">
            <span style="color: #909399; font-size: 12px">高级信息</span>
          </el-divider>
        </el-col>

        <el-col v-if="isAdd" :lg="12">
          <el-form-item label="ODF机框数量" prop="framesCount">
            <el-input v-model.number="form.framesCount" :disabled="isView" placeholder="请输入机框数量" />
            <div class="form-tip">每个ODF机架中机框数量</div>
          </el-form-item>
        </el-col>
        <el-col v-if="isAdd" :lg="12">
          <el-form-item label="行数" prop="rowCount">
            <el-input v-model.number="form.rowCount" :disabled="isView" placeholder="请输入行数" />
            <div class="form-tip">每个机框中有多少行</div>
          </el-form-item>
        </el-col>
        <el-col v-if="isAdd" :lg="12">
          <el-form-item label="端口数" prop="portsCount">
            <el-input v-model.number="form.portsCount" :disabled="isView" placeholder="请输入端口数" />
            <div class="form-tip">每个机框中每行端口数量</div>
          </el-form-item>
        </el-col>
        <el-col v-if="isAdd" :lg="12">
          <el-form-item label="默认连接状态" prop="defaultStatus">
            <el-radio-group v-model="form.defaultStatus">
              <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>
        <!-- 查看模式下显示时间信息 -->
        <template v-if="isView && isEdit">
          <el-col :lg="12">
            <el-form-item label="创建时间">
              <el-input v-model="form.createdAt" disabled />
            </el-form-item>
          </el-col>
          <el-col :lg="12">
            <el-form-item label="修改时间">
              <el-input v-model="form.updatedAt" disabled />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>

    <template #footer v-if="!isView">
      <el-button text @click="handleClose">{{ $t('btn.cancel') }}</el-button>
      <el-button type="primary" :loading="submitLoading" @click="submitForm">{{ $t('btn.submit') }}</el-button>
    </template>

    <template #footer v-else>
      <el-button text @click="handleClose">{{ $t('btn.close') }}</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="odfRackForm">
import { addOdfRacksExpert, updateOdfRacks, getOdfRacks } from '@/api/business/odfracks.js'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: [String, Number],
    default: null
  },
  mode: {
    type: String,
    default: 'edit', // 'add', 'edit', 'view'
    validator: (value) => ['add', 'edit', 'view'].includes(value)
  },
  roomId: {
    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 isView = computed(() => props.mode === 'view')
const isAdd = computed(() => props.mode === 'add')
const title = computed(() => {
  if (props.mode === 'view') return '查看机架'
  return isEdit.value ? '修改机架' : '添加机架'
})

// 表单数据
const form = ref({
  id: null,
  roomId: props.roomId,
  sequenceNumber: null,
  rackName: null,
  frameCount: 9, // 默认固定9框
  createdAt: null,
  updatedAt: null,
  framesCount: 9,
  rowCount: 6,
  portsCount: 12,
  defaultStatus: 0
})

// 表单验证规则
const rules = {
  roomId: [{ required: true, message: '机房不能为空', trigger: 'change', type: 'number' }],
  sequenceNumber: [{ required: true, message: '序号不能为空', trigger: 'blur', type: 'number' }],
  rackName: [{ required: true, message: 'ODF名称不能为空', trigger: 'blur' }]
}

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

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

// 重置表单
function resetForm() {
  form.value = {
    id: null,
    roomId: props.roomId,
    sequenceNumber: null,
    rackName: null,
    frameCount: 9, // 默认固定9框
    createdAt: null,
    updatedAt: null,
    framesCount: 9,
    rowCount: 6,
    portsCount: 12,
    defaultStatus: 0
  }
  nextTick(() => {
    proxy.resetForm('formRef')
  })
}

// 加载数据
function loadData() {
  if (props.id) {
    getOdfRacks(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) {
        updateOdfRacks(form.value)
          .then((res) => {
            proxy.$modal.msgSuccess('修改成功')
            handleSuccess()
          })
          .finally(() => {
            submitLoading.value = false
          })
      } else {
        addOdfRacksExpert(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>
<style scoped>
.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.4;
  padding-left: 12px;
  position: relative;
}

.form-tip::before {
  content: '💡';
  margin-right: 0px;
  font-size: 10px;
}
</style>
