<template>
    <div class="edit-add-detail">
        <div v-loading="detailLoading" class="form-content" element-loading-text="加载中...">
            <div class="page-form">
                <el-form
                    ref="addEditFormRef"
                    :model="addEditForm"
                    :rules="addEditFormRules"
                    size="large"
                    label-position="left"
                    label-suffix="："
                >
                    <el-collapse v-model="activeCollapse">
                        <el-collapse-item name="basic-info">
                            <template #title>
                                <div class="section-title">
                                    <el-icon><Document /></el-icon>
                                    <span>物资信息</span>
                                </div>
                            </template>
                            <div class="section-content">
                                <el-descriptions :column="2" border>
                                    <el-descriptions-item :span="2">
                                        <template #label>
                                            <span class="required-asterisk">*</span>
                                            物资名称
                                        </template>
                                        <el-form-item prop="materialName">
                                            <el-input
                                                v-model="addEditForm.materialName"
                                                placeholder="请输入"
                                                clearable
                                            />
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <span class="required-asterisk">*</span>
                                            编码
                                        </template>
                                        <el-form-item prop="materialCode">
                                            <el-input
                                                v-model="addEditForm.materialCode"
                                                placeholder="请输入"
                                                clearable
                                            />
                                        </el-form-item>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <span class="required-asterisk">*</span>
                                            计量单位
                                        </template>
                                        <el-form-item prop="unit">
                                            <el-select
                                                v-model="addEditForm.unit"
                                                placeholder="请选择"
                                                filterable
                                                clearable
                                                :options="unitListOptions"
                                            />
                                        </el-form-item>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </el-form>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="footer">
            <el-button type="primary" @click="handleSubmit">确定</el-button>
            <el-button @click="handleCancel">取消</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Document, List, Plus, Upload, Delete, Download } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { type FormRules } from 'element-plus'

interface AddEditForm {
    [key: string]: string | number | undefined | null | any
}

const route = useRoute()
const router = useRouter()

// 表单相关
const addEditFormRef = ref()
const detailLoading = ref(false)
const activeCollapse = ref(['basic-info'])

// 计量单位列表
const unitListOptions = ref([
    {
        label: '个',
        value: '个'
    },
    {
        label: '件',
        value: '件'
    },
    {
        label: '箱',
        value: '箱'
    },
    {
        label: '袋',
        value: '袋'
    }
])

// 编辑相关
const isEdit = computed(() => route.name === 'edit')
const editId = computed(() => route.params.id as string)

// 表单数据
const addEditForm = reactive<AddEditForm>({
    levelName: '',
    levelCode: '',
    supplierTypeScope: '',
    enableOrFreeze: 1,
    remark: ''
})

// 表单验证规则
const addEditFormRules = reactive<FormRules>({
    levelName: [{ required: true, message: '请输入分级名称', trigger: 'blur' }],
    levelCode: [{ required: true, message: '请输入编码', trigger: 'blur' }],
    supplierTypeScope: [{ required: true, message: '请输入供应商类型范围', trigger: 'blur' }],
    enableOrFreeze: [{ required: true, message: '请选择启用/禁用', trigger: 'change' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
})

// 取消
const handleCancel = () => {
    router.push({ name: 'MaterialClassificationManagement' })
}

// 提交
const handleSubmit = () => {
    addEditFormRef.value?.validate(async (valid: boolean, object: any) => {
        if (valid) {
            ElMessage.success('提交成功')
            // 这里可以添加提交逻辑
        } else {
            ElMessage.warning(
                `有${Object.keys(object || {}).length}个字段未通过校验，请正确填写表单内容。`
            )
        }
    })
}

onMounted(() => {
    // 如果是编辑模式，获取详情数据
    if (isEdit.value) {
        // getDetail(editId.value)
    }
})
</script>

<style lang="scss" scoped></style>
