<!--超链接控件-->
<template>
    <el-container style="width: 100%;height: 100%;">
        <el-dialog :close-on-click-modal="false"
                   append-to-body
                   :visible.sync="dialogVisible"
                   :width="width" top="10vh">
            <div slot="title" style="font-size: 18px;">{{linkContent}}</div>
            <div style="box-sizing: border-box;" :style="{'height':height}" v-if="isIfm">
                <iframe :src="iframeUrl" frameborder="0" width="100%" scrolling="auto" :style="{'height':height}"></iframe>
            </div>
            <keep-alive v-if="!isIfm" >
                <component :is="activeIndex"
                           :isRefresh="isRefresh"
                           style="height: 100%" ></component>
            </keep-alive>
        </el-dialog>

        <span :ref="id">
             <a href="javascript:void(0);" @click="aLinkgoto(linkType,linkUrl)" :style="linkStyle">{{showName}}</a>
        </span>
    </el-container>
</template>

<script>
    export default {
        name: "plHyperlink",
        props:{
            id:{type:String,required:true}, //唯一标志
            showName:{type:String,default:''}, //描述文字
            linkContent:{type:String,default:''},//显示名
            linkStyle:{type:String,default:''}, //链接样式
            linkUrl:{type:String,required:true}, //链接地址
            linkType:{type:String,default:'thispage'},//链接方式 直接跳转 thispage 新页面  newpage 弹出框 dilaogPage
            width:{type:String,default:"80%"},//弹窗宽度
            height:{type:String,default:"80%"},//弹窗高度
        },
        data(){
            return{
                dialogLinkUrlView : false,
                dialogVisible:false,
                iframeUrl: '',
                isIfm:false, //是否外部链接
                activeUrl:'',
                activeIndex:'',
                allRouterArr:this.$router.options.routes || [], //所有router配置
                isRefresh:this.COMMON_FUNC.getUUID(),
                projUrl: location.href.replace(this.$route.fullPath, "/"),
            }
        },
        methods:{
            aLinkgoto(type,url){
                this.iframeUrl = '';
                this.dialogVisible =false;
                this.isIfm = false;
                if(url.indexOf("http://") > -1 || url.indexOf("https://") > -1){
                    this.isIfm = true;
                }
                if(type == 'thispage'){
                    if(!this.isIfm){
                        if(url.indexOf("/")==0){
                            url = this.projUrl +"resView"+  url;
                        }else{
                            url = this.projUrl +"resView/"+  url;
                        }
                    }
                    window.location.href = url;
                }else if(type == 'newpage'){
                    if(!this.isIfm){
                        if(url.indexOf("/")==0){
                            url = this.projUrl +"resView"+  url;
                        }else{
                            url = this.projUrl +"resView/"+  url;
                        }
                    }
                    window.open(url);
                }else if(type == 'dilaogPage'){
                    // 通过弹出窗口显示
                    if(this.isIfm){
                        this.iframeUrl = url;
                    }else {
                        this.activeUrl = '';
                        let urlArr = url.split("/");
                        this.eachRouterSet(this.allRouterArr,urlArr,0);
                    }
                    this.dialogVisible =true;
                }

            },

            /**
             * 遍历匹配路由
             * allRouterArr当前路由 arr，
             * urlArr 链接arr
             * index遍历层数
             */
            eachRouterSet(allRouterArr,urlArr,index){
                allRouterArr.forEach(item =>{
                    // if(urlArr[index + 1]){
                    if(urlArr[index + 1] && urlArr[index +1] == (item.name ? item.name : item.path)){
                        //当前匹配
                        //判断 urlArr是否存在下级
                        if(index+2 >= urlArr.length){ //则当前地址为我需要的实际地址
                            let componentString = item.component.toString();
                            let arr = componentString.split("\"");
                            this.activeUrl = arr[arr.length - 2] || '';
                            this.activeIndex = item.component;
                        }else if(item.children && item.children.length > 0) {
                            //如果存在下级
                            allRouterArr = item.children || [];
                            index = index + 1;
                            this.eachRouterSet(allRouterArr,urlArr,index);
                        }
                    }
                    // }
                })
            },
        }
    }
</script>

<style scoped>

</style>
