<template>
    <el-dialog draggable class="cn-operate-dialog" width="500px" v-model.trim="dialogVisible" :title="title">
        <el-form :inline="false" ref="formRef" :model="form" label-width="auto" class="form-one" :rules="rules">
            <el-form-item label="工程名称" prop="name">
                <el-input maxlength="50" show-word-limit    v-model.trim="form.name" placeholder="请输入工程名称" />
            </el-form-item>
            <el-form-item label="区域" prop="city">
                <el-cascader
                    v-model="form.city"
                    style="width: 100%"
                    :options="areaTree"
                    :props="props"
                    clearable
                    filterable
                    placeholder="请选择区域"
                />
            </el-form-item>
            <el-form-item label="备注" prop="description">
                <el-input maxlength="300" show-word-limit  v-model="form.description" :rows="2" type="textarea" clearable placeholder="请输入备注" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model.number="form.sort" style="width: 100%;" :min="0" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import { ElMessage } from 'element-plus'
import { add, update } from '@/api/user-boot/role'
import { useAdminInfo } from '@/stores/adminInfo'
import { addEngineering, updateEngineering } from '@/api/cs-device-boot/edData'
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
import tree from '@/assets/map/area.json'
// do not use same name with ref
const form = reactive({
    name: '',
    id: '',
    pid: 0,
    city: '',
    sort: 100,
    description: ''
})
const areaTree: any = tree
const loading = ref(false)
const rules = {
    name: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
    city: [{ required: true, message: '请输入区域', trigger: 'blur' }],
    area: [{ required: true, message: '请输入区域', trigger: 'blur' }],
    description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增菜单')
const formRef = ref()
const props = {
    label: 'text',
    value: 'value',
    children: 'children',
    // checkStrictly: true
}
const open = (text: string, data?: anyObj) => {
    formRef.value?.resetFields()
    title.value = text
    dialogVisible.value = true
    if (data) {
        form.id = data.engineeringId
        form.name = data.engineeringName
        form.city = [data.provinceId,data.cityId]
        form.description = data.engineeringRemark
        form.sort = data.engineeringSort
    } else {
        form.id = ''
        form.name = ''
        form.city = ''
        form.description = ''
        form.sort = 100
    }
}
const submit = async () => {
    formRef.value.validate(async valid => {
        if (valid) {
            loading.value = true
            if (form.id) {
                await updateEngineering({ ...form, province: form.city[0], city: form.city[1] || '' })
            } else {
                await addEngineering({ ...form, province: form.city[0], city: form.city[1]||'' })
            }
            ElMessage.success('保存成功')
            tableStore.index()
            dialogVisible.value = false
            loading.value = false
        }
    })
}

defineExpose({ open })
</script>
