<template>
    <div @click="runEvent" @dblclick="runEvent" :style="diyStyle" :class="showField.textShowType == 'overflow' ? 'cell el-tooltip' : 'cell'">
        <span v-if="!reultElement">{{result}}</span>
        <span v-else :class="'elementTag'+rowIndex+pRefs"></span>
    </div>
</template>

<script>
    import EventParentRender from "../../eventParentRender";
    export default {
        name: "batch-remote-request-render",
        extends:EventParentRender,
        data(){
            return {
                result:"",
                reultElement:null,
                diyStyle:{},
            }
        },
        created(){
            this.initData();
        },
        watch:{
            value(){
                this.initData();
            }
        },
        methods:{
            initData(){
                if(this.afterRenderComp){
                    let afterCacheObj = this.afterRenderComp.afterCacheObj;
                    let dealMethod = this.configData.dealMethod;
                    let arr = ['result','rowData','vm'];
                    this.result = new Function(...arr,dealMethod)(afterCacheObj,this.rowData,this);
                    if(typeof this.result == 'object' && this.result["isPlTagElement"]){
                      this.reultElement = document.createElement(this.result["tagName"]);
                      this.reultElement.innerHTML = this.result["domProps"]["innerHTML"];
                      if(this.result["on"]){
                          this.reultElement.onclick = this.result["on"]["click"];
                      }
                      if(this.result["attrs"]){
                          this.reultElement.setAttribute("style",this.result["attrs"]["style"]);
                      }
                        let rootNode = null;
                        if(this.pRefs){
                            this.$nextTick(() =>{
                                rootNode =  document.querySelectorAll("."+this.pRefs+"  > .el-container > " +
                                    ".listview-right > .listview-main > .listview-table > .el-table > .el-table__body-wrapper >table> tbody > .el-table__row");
                                let rowElement = rootNode[this.rowIndex];
                                let columnId = this.column.id;
                                if(rowElement){
                                    let node = rowElement.querySelectorAll( "."+columnId+"> div > section > div");
                                    let childNode = node[0];
                                    if(childNode){
                                        let aa = childNode.querySelectorAll("."+'elementTag'+this.rowIndex+this.pRefs);
                                        if(aa[0] && aa[0].children.length == 0){
                                            aa[0].append(this.reultElement);
                                        }
                                    }
                                }
                            })
                        }else {
                            rootNode = document.querySelector(".elementTag"+this.rowIndex+this.pRefs);
                            this.getVNode(rootNode);
                        }

                    }

                }
                if (this.formatObj['chooseEvent']) {
                  this.diyStyle['cursor'] = "pointer";
                  this.diyStyle['color'] = "blue";
                }
            },

            getVNode(node){
                if(node){
                    let nodeType = node.nodeType;
                    //定义虚拟DOM
                    ///nodeType 为一表示标签节点
                    if(nodeType === 1 && node.children.length == 0){
                        node.append(this.reultElement);
                    }
                }

            }
        }
    }
</script>

<style scoped>

</style>
