<template>
    <!-- 基础管理-层级-新增或编辑 -->
    <div>
        <el-form
            :model="addOrEditForm"
            :rules="addOrEditFormRules"
            ref="addOrEditFormRef"
            label-position="left"
            label-width="auto"
        >
            <el-form-item label="层级配置名称" prop="levelSettingName">
                <el-row>
                    <el-col :span="20">
                        <el-input v-model="addOrEditForm.levelSettingName" placeholder="请输入层级配置名称" />
                    </el-col>
                </el-row>
            </el-form-item>

            <el-form-item
                :gutter="24"
                :key="index"
                required
                :label="`${item.level}级节点`"
                v-for="(item, index) in addOrEditForm.levelList"
                :prop="`levelList.${index}.levelName`"
                :rules="{
                    required: true,
                    trigger: 'blur',
                    message: '请输入节点名称',
                }"
            >
                <el-row>
                    <el-col :span="20">
                        <el-input v-model="item.levelName" placeholder="请输入节点" />
                    </el-col>

                    <el-col :span="4">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-plus"
                            style="margin-left: 4px"
                            @click="addNextLevel(item.level)"
                            v-if="index === addOrEditForm.levelList.length - 1"
                        />
                        <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            style="margin-left: 4px"
                            @click="deleteCurrentLevel(index)"
                            v-if="index !== 0 && index !== 1 && index === addOrEditForm.levelList.length - 1"
                        />
                    </el-col>
                </el-row>
            </el-form-item>

            <el-form-item>
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addLevelApi, editLevelApi } from '@/api/basic/level-manage'
export default {
    name: 'AddOrEditForm',
    data() {
        const validateLevelName = (rule, value, callback) => {
            if (!value || value.trim() === '') {
                callback(new Error('请输入节点名称'))
            } else {
                callback()
            }
        }
        return {
            addOrEditForm: {
                levelSettingName: '',
                configId: undefined,
                levelList: [
                    {
                        level: 1,
                        levelName: '一级节点',
                    },
                    {
                        level: 2,
                        levelName: '二级节点',
                    },
                ],
            },
            addOrEditFormRules: {
                levelSettingName: [{ required: true, message: '请输入层级配置名称', trigger: 'blur' }],
                // 动态层级的校验规则
                levelList: {
                    validator: (rule, value, callback) => {
                        const invalidItems = value.filter((item) => !item.levelName || item.levelName.trim() === '')
                        if (invalidItems.length > 0) {
                            callback(new Error('所有层级节点名称不能为空'))
                        } else {
                            callback()
                        }
                    },
                    trigger: 'blur',
                },
            },
        }
    },
    methods: {
        cancel() {
            this.$emit('closeAddOrEditFormDialog', false)
        },
        submitForm() {
            // this.$emit('submitForm')

            this.$refs.addOrEditFormRef.validate(async (valid) => {
                if (valid) {
                    const hasEmptyLevel = this.addOrEditForm.levelList.some(
                        (item) => !item.levelName || item.levelName.trim() === '',
                    )

                    if (hasEmptyLevel) {
                        this.$message.error('所有层级节点名称不能为空')
                        return
                    }

                    const nodesList = this.addOrEditForm.levelList.map((item) => {
                        return {
                            nodeName: item.levelName,
                        }
                    })

                    // 组装参数
                    const params = {
                        configName: this.addOrEditForm.levelSettingName,
                        nodes: nodesList,
                    }
                    if (this.addOrEditForm.configId) {
                        params.configId = this.addOrEditForm.configId
                    }
                    const API = this.addOrEditForm.configId ? editLevelApi : addLevelApi

                    const res = await API(params)
                    if (res.code === 200) {
                        this.$modal.msgSuccess(this.addOrEditForm.configId ? '修改成功' : '新增成功')
                        this.$emit('closeAddOrEditFormDialog', true)
                    }
                } else {
                    return false
                }
            })
        },
        resetForm() {
            this.$refs.addOrEditFormRef.resetFields()
        },

        addNextLevel(index) {
            this.addOrEditForm.levelList.push({
                level: index + 1,
                levelName: '',
            })
        },

        deleteCurrentLevel(index) {
            this.addOrEditForm.levelList.splice(index, 1)
        },

        setFormData(data) {
            const { configName, nodes, configId } = data
            this.addOrEditForm.levelSettingName = configName
            this.addOrEditForm.configId = configId
            this.addOrEditForm.levelList = nodes.map((item, index) => {
                return {
                    level: index + 1,
                    levelName: item.nodeName,
                }
            })
        },
    },
}
</script>
