<template>
    <div class="wx-link">
        <!--id="launch-btn"-->
        <wx-open-launch-weapp
          :id="pagePath"
          :username="username"
          :path="pagePath"
        >
          <script type="text/wxtag-template">
            <style>
                .btn {
                    line-height: 1.499;
                    position: relative;
                    display: inline-block;
                    font-weight: 400;
                    white-space: nowrap;
                    text-align: center;
                    background-image: none;
                    border: 1px solid #d9d9d9;
                    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
                    box-shadow: 0 2px 0 rgba(0,0,0,0.015);
                    cursor: pointer;
                    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
                    transition: all .3s cubic-bezier(.645, .045, .355, 1);
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    -ms-touch-action: manipulation;
                    touch-action: manipulation;
                    width: 750px;
                    height: 300px;
                    font-size: 14px;
                    border-radius: 4px;
                    color: rgba(0,0,0,0.65);
                    background-color: #007aff;
                }
             </style>
            <button class="btn"></button>
          </script>
        </wx-open-launch-weapp>
    </div>
</template>

<script>
    export default {
        name: "index",
        props: {
            username: {
                default: '',
                type: String
            },
            pagePath: {
                default: 'pages/index/index.html',
                type: String
            }
        },
        mounted () {
            let btn = document.getElementById(this.pagePath);
            btn.addEventListener('launch', function (e) {
                alert('success')
                console.log('success');
            });
            btn.addEventListener('error', function (e) {
                alert('fail' + e.detail)
                console.log('fail', e.detail);
            });
        }
    }
</script>

<style lang="less" scoped>
.wx-link{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background-color: #999999;
    max-width: 100vw;
    /*overflow: hidden;*/
}
</style>