<!--93553 新增lc-web组件，用于jsn中打开外部web链接-->
<template>
    <lc-popup popup-color="rgb(255, 255, 255)"
            ref="popup"
            :show="show"
            pos="bottom"
            @LcPopupOverlayClicked="popupOverlayBottomClick"
            :height="height">
        <div class="container" :style="{height:(height)+'px'}">
            <div class="popup-title" @touchmove.prevent.stop >
                <image class="icon-close" :src="closeImg" @click.stop="closePopup"></image>
                <text class="popup-text">{{title}}</text>
            </div>
            <scroller style="flex:1;position:relative;">
                <web style="width:700px; margin-left: 25px"  :style="{ height: (height-150) +'px'}" :src="src"></web>
            </scroller>
        </div>
    </lc-popup>
</template>

<style scoped>
.popup-title{
    height: 100px;
    margin-left: 40px;
    margin-right: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom-width: 1px;
    border-bottom-color: #3c94fe;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:670px;
}
.icon-close{
    position: absolute;
    left: 0px;
    top: 35px;
    width: 30px;
    height: 30px;
}
.popup-text{
    font-size: 30px;
    font-weight: bold;
    color: #333;
}
.container{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    flex-direction: column;
}
</style>

<script>
    import LcPopup from '../lc-popup';

    export default {
        name: "popup",
        components: { LcPopup },
        data(){
            return{
                closeImg:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RDdFRjA4OTA3MTQxMUU4OTM4ODg0ODg2MTI5NDdEMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RDdFRjA4QTA3MTQxMUU4OTM4ODg0ODg2MTI5NDdEMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVEN0VGMDg3MDcxNDExRTg5Mzg4ODQ4ODYxMjk0N0QzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVEN0VGMDg4MDcxNDExRTg5Mzg4ODQ4ODYxMjk0N0QzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hUbZrgAAAS5JREFUeNrE1T0KwkAQBWAz2FmJFxDEwgN4ABtLKzvxBqbSTkstBK1SaCMewCN4Eo9gJ4KdGN9CViImujM7wYWX/+RjA3kJ4jgu/WOUzSKKogpWQ2QbhmEhEIw6Vk08/2j2KTk+QjbIFBcUhZ6QHbbLaXiJrJG5Np5Cz0gLM76/4OT1TrTxDPRmz9kZq+Pf0DdYE/+FfsAauAuaCfvgrmguLME56FeYg3PRn7ALLkHNCFy7OsFWyBiZIQtEhLLgDHyPDCQoG07hB6SPPJAq0Cv3WydBKZnX20tQc38oKRnyaKSaT8ORRyNdfBqOfGrQp17JtwalOGl0rwQnre7l4qSBSnDSQrk4aaIcnLRRV5yKQF1wO+O2NpqDd6xpYfO3aWijGXgX2w/Rb1FrPAUYAJe1GusgkUAbAAAAAElFTkSuQmCC'
            }
        },
        props: {
            src: {
                type: String,
                default: 'https://www.baidu.com'
            },
            show: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '提示'
            },
            height: {
                type: Number,
                default: 800
            },
        },
        computed:{

        },
        methods:{
            popupOverlayBottomClick(){
                this.$emit('overlayClicked');
            },
            closePopup(){
                this.$refs.popup.hide();
            }   
        }
    };
</script>
