<template>
    <el-dialog
        draggable
        :title="title"
        v-model="dialogVisible"
        width="500px"
        :before-close="handleClose"
        :close-on-click-modal="false"
    >
        <el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form">
            <el-form-item label="项目名称:" prop="name">
                <el-input v-model.trim="form.name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-form-item label="工程项目:" class="top" prop="projectIds">
                <el-tree-select
                    v-model="form.projectIds"
                    default-expand-all
                    show-checkbox
                    node-key="id"
                    :props="defaultProps"
                    multiple
                    :data="Engineering"
                    collapse-tags
                    style="width: 100%"
                />
                <!-- <el-cascader v-model="form.projectIds" :options="Engineering" :props="defaultProps"
                    :show-all-levels="false" collapse-tags collapse-tags-tooltip clearable  style="width: 100%;"/> -->
            </el-form-item>
            <el-form-item label="项目排序:" prop="orderBy">
                <el-input-number v-model="form.orderBy" :min="0" :step="1" step-strictly style="width: 100%" />
            </el-form-item>

            <el-form-item label="备注:" class="top">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model.trim="form.remark"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFn">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { deviceTree, add, audit, getztProjectTree } from '@/api/cs-harmonic-boot/mxgraph'
import { ElMessage, ElMessageBox } from 'element-plus'
const title = ref('')
const formRef = ref()
const Engineering = ref([])
const dialogVisible = ref(false)
const emit = defineEmits(['submit'])
const defaultProps = {
    children: 'children',
    value: 'id',
    label: 'name',
    multiple: true,
    expandTrigger: 'hover' as const
}
const form: any = reactive({
    name: '',
    projectIds: [],
    orderBy: '100',
    remark: ''
})
const rules = {
    name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    projectIds: [{ required: true, message: '请选择工程项目', trigger: 'change' }],
    orderBy: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const addFn = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            if (title.value == '新增项目') {
                add(form).then((res: any) => {
                    ElMessage.success('新增项目成功!')
                    dialogVisible.value = false
                    emit('submit')
                })
            } else {
                audit(form).then((res: any) => {
                    ElMessage.success('修改项目成功!')
                    dialogVisible.value = false
                    emit('submit')
                })
            }
        }
    })
}
const open = ref((row: any) => {
    formRef.value?.resetFields()
    // deviceTree({}).then((res: any) => {
    //     res.data.forEach((item: any) => {
    //         item.children.forEach((child: any) => {
    //             child.children = []
    //         })
    //     })
    //     Engineering.value = res.data
    // })
    getztProjectTree().then((res: any) => {
        res.data.forEach((item: any, index: any) => {
            if (!item.children || item.children.length == 0) {
                res.data.splice(index, 1)
                return
            }
            item.newList = []
            item.children.forEach((vv: any, vvs: any) => {
                vv.children.forEach((ss: any, ssIndex: any) => {
                    if (ss.level == 1) {
                        item.newList.push(ss)
                    }
                })
            })
            if (item.name == '治理设备') {
                item.children = item.newList
            }
        })
        Engineering.value = res.data
    })
    title.value = row.title
    dialogVisible.value = true
    if (row.title == '新增项目') {
        form.name = ''
        form.projectIds = []
        form.orderBy = '100'
        form.remark = ''
    } else {
        for (let key in form) {
            form[key] = row.row[key] || ''
        }
        form.id = row.row.id
    }
})
const handleClose = () => {
    dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>
