<template>
    <wx-open-subscribe
        id="wechatSubscribe"
        :style="style" 
        :template="templates.join(',')"
        @success="wechatSubscribeSuccess"
        @error="wechatSubscribeError"
    >
        <script type="text/wxtag-template">
            <style>
            .subscribe-btn {
            width: 100%;
            height: 100px;
            display: block;
            }
            </style>
            <button class="subscribe-btn">scribe</button>
        </script>
    </wx-open-subscribe>
</template>

<script>
// 给嵌套它的父级设置 position: relative 等。
export default {
    props: {
        templates: {
            type: Array,
            default: () => [],
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '100%',
        },
        top: {
            type: String,
            default: '0',
        },
        left: {
            type: String,
            default: '0',
        },
    },
    computed: {
        style() {
            return `position: absolute;top: ${this.top || 0}; left: ${this.left || 0}; width: ${this.width}; height: ${this.height};opacity: 0; z-index: 100;`
        },
    },
    methods: {
        wechatSubscribeSuccess(e) {
            this.$emit('on-ok');
        },
        wechatSubscribeError(e) {
            this.$emit('on-ok');
        },
    },
}
</script>