{extend name="public/container"}
{block name="title"}{$title} -- 推广海报{/block}
{block name='head_top'}
<style>
    body{background-color:#4c4c4c;}
</style>
{/block}
{block name="content"}
<div class="promotion-poster">
    <div class="tip">长按保存海报，分享到朋友圈</div>
    <div class="pictrue">
        <img src="/{$filename}">
    </div>
    <div class="shareBnt">分享链接给朋友</div>
    <div class="notes">
        <div class="title">推荐指引</div>
        {$promoter_guide}
    </div>
    <div class="shares-model" style="display: none">
        <img style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;" src="{__WAP_PATH}zsff/images/share-info.png">
    </div>
    <div class="phraseWindow" style="display: none">
        <div class="name">推荐短语</div>
        <div class="phraseCon" id="phraseCon">{$special.phrase}</div>
        <div class="but acea-row row-center-wrapper">
            <div class="item" id="colne">取消</div>
            <div class="item copy" id="copy">一键复制</div>
        </div>
    </div>
    <div class="mask" style="display: none"></div>
    <img src="/wap/first/zsff/images/poster.png" class="phrase" id="phraseTap">
</div>
{/block}
{block name="foot"}
<script>
    var url="{$url}";
    require(['helper','store'],function($h,storeApi) {
        $('.shares-model').on('touchmove',function(e){
            e.preventDefault();
        });
        $('.mask').on('touchmove',function(e){
            e.preventDefault();
        });
        $("#copy").on('click',function (e) {
            copy('phraseCon',function () {
                $h.showMsg({title:'复制成功',icon:'success'});
                e.stopPropagation();
                $('.phraseWindow').hide();
                $('.mask').hide();
            },function () {
                $h.showMsg('复制失败');
            });
        });
        $('#phraseTap').on('click',function () {
            $('.phraseWindow').show();
            $('.mask').show();
        })

        $('#colne').on('click',function (e) {
            e.stopPropagation();
            $('.phraseWindow').hide();
            $('.mask').hide();
        });

        $('.mask').on('click',function () {
            $('.phraseWindow').hide();
            $(this).hide();
        })

        $('.shareBnt').on('click',function () {
            $('.shares-model').show();
        });
        $('.shares-model').on('click',function () {
            $('.shares-model').hide();
        })
        window.overallShare=false;
        mapleWx($jssdk(), function () {
            this.onMenuShareAll({
                title: '{$special.title}',
                desc: "{$special.abstract}",
                imgUrl: '{$special.image}',
                link: url
            });
        });

        function copy (id, attr,errorFn)
        {
            var target = null,successFn=null;
            if(typeof attr=='function'){
                successFn=attr;
                attr='';
            }
            if (attr && typeof attr=='string') {
                target = document.createElement('div');
                target.id = 'tempTarget';
                target.style.opacity = '0';
                if (id) {
                    var curNode = document.querySelector('#' + id);
                    target.innerText = curNode[attr];
                } else {
                    target.innerText = attr;
                }
                document.body.appendChild(target);
            } else {
                target = document.querySelector('#' + id);
            }

            try {
                var range = document.createRange();
                range.selectNode(target);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                document.execCommand('copy');
                window.getSelection().removeAllRanges();
                successFn && successFn();
            } catch (e) {
                errorFn && errorFn();
            }

            if (attr) {
                // remove temp target
                target.parentElement.removeChild(target);
            }
        }
    })
</script>
{/block}