<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" modal-class="edit-param-dlg">
        <div class="scroll " style="max-height: 400px;overflow-y: auto;overflow-x: hidden;">
            <template v-if="dialog.attrs.length > 1">
                <el-tabs v-model="dialog.tab" type="card" class="demo-tabs" @tab-click="tabHandleClick">
                    <el-tab-pane v-for="(it, idx) in dialog.attrs" :label="it.id" :name="it.id" :key="idx"></el-tab-pane>

                </el-tabs>
            </template>
            <div v-for="(it, idx) in dialog.attrs" :key="idx" v-show="it.select">
                <div v-for="(item, index) in it.attrs" :key="index" class="div-item">
                    <span class="sp-label">{{ item.name }}</span>
                    <span class="sp-value">
                        <el-input v-model="item.value" :disabled="item.name=='oper_inout_data_type'" v-if="item.type == 'input'"  @blur="doCheckInput(item)"/>
                        <el-select v-model="item.value" v-else>
                            <el-option v-for="(opt, oidx) in item.options" :key="oidx" :label="opt" :value="opt" />
                        </el-select>
                    </span>
                </div>
            </div>
        </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,
    type: '',
    tab: '',
    attrs: []
})
const doOk = () => {
    emit("success", dialog.attrs);
    dialog.show = false;
}
const doCancel = () => {
    dialog.show = false;
}
const tabHandleClick = () => {
    setTimeout(() => {
        dialog.attrs.forEach(d=>{
            d.select=d.id==dialog.tab;
        })
    }, 400)
}
const doCheckInput=item=>{
    if(item.inType=="int" || item.inType=="float"){
        if(isNaN(item.value)){
            item.value=item.oldValue;
        }else{
            if(item.inType=="int"){
                item.value=parseInt(item.value);                
            }else{
                item.value=parseFloat(item.value);
            }
        }
    }
    item.oldValue=item.value;
};
const showDialog = (opt) => {
    dialog.show = true;
    dialog.editObj = opt.obj;
    dialog.title = opt.title;
    dialog.type = opt.type;
    dialog.attrs = [];
    if (opt.type == 'p') {
        let attr = {
            select: true,
            attrs: []
        };
        dialog.attrs.push(attr);
        for (let k in opt.obj) {
            let v = opt.obj[k];
            let obj = makeParam(v);
            if (obj) {
                obj.name = k;
                attr.attrs.push(obj);
            }
        }
    } else {
        opt.obj.forEach((o, idx) => {
            let attr = {
                select: idx == 0,
                id: "" + (o.input_id || o.output_id),
                attrs: [
                ]
            };
            if (o.oper_inout_data_type) {
                attr.attrs.push(
                    {
                        name: "oper_inout_data_type",
                        value: o.oper_inout_data_type,
                        oldValue:o.oper_inout_data_type,
                        type: "input",
                        inType: "string"
                    }
                )
            }
            dialog.attrs.push(attr);
            for (let k in o) {
                let v = o[k];
                let obj = makeParam(v);
                if (obj) {
                    obj.name = k;
                    attr.attrs.push(obj);
                }
            }
        });
        dialog.tab = dialog.attrs[0].id;
    }


}
const makeParam = v => {
    if (v["type"]) {
        let obj = {

        };
        let oType = v["type"];
        let oVal = v["value"];
        if (oType.indexOf("/") >= 0) {
            obj.type = "select"
            obj.options = oType.split("/").filter(d => d.length > 0);
        } else {
            obj.type = "input"
            obj.inType = oType;
        }
        obj.value = oVal;
        obj.oldValue=oVal;
        return obj;
    }
    return null;
}

defineExpose({
    showDialog
})
</script>
<style lang='scss'>
.edit-param-dlg {
    .el-tabs__item {
        &.is-active {
            background-color: #409eff9c;
            color:#fff;
        }
    }
    .div-item{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .sp-label{
            width:140px;
            text-align: right;
            margin-right: 10px;
        }
        .sp-value{
            flex-grow: 1;
        }
    }
}
</style>