<!--
 * @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="roomId">
            <el-select v-model="form.roomId" :disabled="isView" placeholder="请选择机房">
              <el-option
                v-for="item in options.sql_odf_room"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="parseInt(item.dictValue)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <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 :lg="12">
          <el-form-item label="框数量（固定9框）" prop="frameCount">
            <el-input v-model.number="form.frameCount" :disabled="isView" placeholder="请输入框数量（默认9框）" />
          </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 { addOdfRacks, 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)
  }
})

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 title = computed(() => {
  if (props.mode === 'view') return '查看机架'
  return isEdit.value ? '修改机架' : '添加机架'
})

// 表单数据
const form = ref({
  id: null,
  roomId: null,
  sequenceNumber: null,
  rackName: null,
  frameCount: 9, // 默认固定9框
  createdAt: null,
  updatedAt: null
})

// 表单验证规则
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: []
})

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

// 重置表单
function resetForm() {
  form.value = {
    id: null,
    roomId: null,
    sequenceNumber: null,
    rackName: null,
    frameCount: 9, // 默认固定9框
    createdAt: null,
    updatedAt: null
  }
  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 {
        addOdfRacks(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>
