<template>
    <el-dialog v-model="dialog.show" :title="dialog.title" 
    :close-on-press-escape="false"
    :close-on-click-modal="false" align-center  append-to-body width="600px"
        >
        <div class="scroll " style="max-height: 400px;overflow-y: auto;overflow-x: hidden;">
     <el-row v-for="(it,idx) in dialog.attrs" :key="idx" style="margin-bottom:4px;" gutter="2">
        
        <el-col :span="8">
            <el-input v-model="it.key" @input="inputKey"/>
        </el-col>
        <el-col :span="16">
            <el-input v-model="it.value"/>
        </el-col>
     </el-row>
    </div>
    <template #footer>
    <div style="text-align: center">
        <el-button type="primary" @click="doOk">确定</el-button>
        <el-button @click="doCancel">取消</el-button>
    </div>
    </template>
    </el-dialog>
</template>

<script setup>
const emit=defineEmits("success");
const dialog = reactive({
    show: false,
    title: '',
    editObj: null,
    attrs: []
})
const doOk = () => {
    let obj={};
    dialog.attrs.forEach(d=>{
        if(d.key  && d.value){
            obj[d.key]=d.value;
        }
    });
    emit("success",obj);
    dialog.show=false;
}
const doCancel=()=>{
    dialog.show=false;
}
const showDialog = (opt) => {
    dialog.show = true;
    dialog.editObj = opt.obj;
    dialog.title = opt.title;
    dialog.attrs = [];
    for (let k in opt.obj) {
        dialog.attrs.push({ key: k, value: opt.obj[k] });
    }
    dialog.attrs.push({key:'',value:''});
}
const inputKey=(a,b)=>{
    if(dialog.attrs[dialog.attrs.length-1].key){
        dialog.attrs.push({key:'',value:''});
    }
};

defineExpose({
    showDialog
})
</script>
<style scoped lang='less'></style>