<template>
    <div class="main">
        <div class="header">
            <div class="item" style="width: 20px;background-color:#a1dcf8;text-align: center;" title="新建栏">
                <svg @click="add"
                     style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                     viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2498">
                    <path d="M576 448h384v128H576v384H448V576H64V448h384V64h128z" fill="#4A4A4A" p-id="2499"></path>
                </svg>
            </div>
            <div v-for="(item,index) in items" :key="item.id">
                <div
                    :class="{item:1,active:index===useKey}"
                    @click="load(index)"
                    :key="item.id">
                    <el-popover placement="bottom" trigger="contextmenu">
                        <template #reference> <span>{{item.name}}</span></template>
                        <template #default>
                            <div style="display: flex;width: 300px;">
                                <el-input v-model="item.name" style="min-width: 200px;"></el-input>
                                <el-button v-if="index>0" type="danger" style="margin-left: 20px;" @click="del(index)">删除</el-button>
                            </div>
                        </template>
                    </el-popover>
                </div>
            </div>

        </div>
        <div>
            <kibanaitem ref="kibana"></kibanaitem>
        </div>
    </div>
</template>

<script>
@import("/static/css/jsoneditor.min.css")
@import("/static/js/jsoneditor.min.js")
export default {
    name: "kibana",
    data() {
        return {
            useKey: 0,
            items:[]
        }
    },
    created() {},
    methods: {
        save(){

            let q = this.$refs.kibana.getQuery();
            let r = this.$refs.kibana.getResult();
            if(q){
                this.items[this.useKey].query = JSON.parse(JSON.stringify(q));
            }
            if(r){
                this.items[this.useKey].result = JSON.parse(JSON.stringify(r));
            }

            window.localStorage.setItem('kibana',JSON.stringify(this.items));

            window.localStorage.setItem('kibana_key',this.useKey);
        },
        del(index){
            if(this.items.length===1) return;
            this.items.splice(index,1);
        },
        add(){
            this.items.push({
                id: parseInt((Math.random()*100000)+''),
                name:"default",
                query:{},
                result:{}
            })
        },
        load(val){

            if(this.useKey!==val){
                this.save();

                this.useKey = val;
            }

            this.$refs.kibana.setQuery(JSON.parse(JSON.stringify(this.items[val].query)));
            this.$refs.kibana.setResult(JSON.parse(JSON.stringify(this.items[val].result)));
        }
    },
    mounted() {

        this.items = JSON.parse(window.localStorage.getItem('kibana')) || [];

        let index = parseInt(window.localStorage.getItem('kibana_key'));
        if(typeof this.items[index] === "undefined"){
            this.useKey = 0;
        }else {
            this.useKey = index;
        }

        if (this.items.length === 0) this.add();

        this.load(this.useKey);

        setInterval(() => {
            this.save();
        },1000)


    },
    //加载组件
    components: {
        kibanaitem:"@component(kibanaItem)"
    }
}
</script>

<style scoped>
.main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header{
    display: flex;
    height: 32px;
    background-color: #d0dbf0;
}
.item{
    height: 22px;
    line-height: 22px;
    padding: 5px 10px;
    cursor: pointer;
}
.item.active{
    background-color: #fff;
}
</style>
<style>
.el-popper.el-tooltip.el-popover{
    width: auto !important;
}
</style>