<template>
    <view class="si-wrap">
        <view 
            class="si-res" 
            @tap="onClickMask" 
            @touchmove.prevent.stop
        />
        <!--html转海报-->
        <view v-if="mode === 'html'">
            <view
                v-if="status === 'init'"
                id="shareimg"
                class="si-tpl"
            >
                <slot></slot>
            </view>
            <view v-if="status === 'complete'">
                <view class="si-res-img">
                    <view 
                        scroll-y 
                        class="si-res-content" 
                        :style="{width: 'calc(100% - ' + padwidth + 'px)'}"
                    >
                        <img
                            class="si-res-content-img"
                            :src="base64"
                        >
                    </view>
                    <view class="pt-close">
                        <view class="pt-share-content">{{ bottomcontent }}</view>
                        <view @tap="onClickMask">
                            <img
                                src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2477310444,3140737815&fm=179&app=35&f=PNG?w=66&h=66&s=29E47A229E9785B541D5E11B0000E0C1"
                                mode="aspectFill"
                                class="pt-close-icon"
                            >
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!--直接图片转海报-->
        <view v-if="mode === 'picture'">
            <view class="si-res-img">
                <img 
                    :src="picsrc" 
                    :style="{width: 'calc(100% - ' + padwidth + 'px)'}"
                >
                <view class="pt-close">
                    <view class="pt-share-content">{{ bottomcontent }}</view>
                    <view @tap="onClickMask">
                        <img
                            src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2477310444,3140737815&fm=179&app=35&f=PNG?w=66&h=66&s=29E47A229E9785B541D5E11B0000E0C1"
                            mode="aspectFill"
                            class="pt-close-icon"
                            @tap="onClickMask"
                        >
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
  
<script>
/**
* @file h5图片分享
* @author huanghongwei
* @description
*   1.仅适用于h5分享海报
*   2.两种模式mode：
        a.html模式:html2canvas 存为图片，然后保存。适用于海报数据动态生成的情况。若有二维码，可由rd生成base64格式的图片，传入即可。
        b.picture模式：直接写死一张海报图片地址。
    notice: 如果需要动态将图片转成base64，然后生成海报，需要确保图片是可以加载的，存在跨域（请rd修改图片请求的跨域限制）、304问题（加时间戳）。
*/
/* global swan */
import {share} from '../../utils/h5share';
export default {
    config: {
        component: true
    },
    props: {
        bottomcontent: {
            type: String,
            default: '长按保存 分享给关心的人'
        },
        mode: {
            type: String
        },
        picsrc: {// 仅在picture模式下需要传
            type: String
        },
        padwidth: {// 卡片预览与屏幕的左右边距
            type: Number,
            default: 100
        }
    },
    data() {
        return {
            status: 'init',
            base64: '',
            width: '0',
            height: '0'
        };
    },
    mounted() {
        if (this.mode && this.mode === 'html') {
            /* eslint-disable */
            const vm = this;
            share({
                onRender(base64, w, h) {
                    vm.status = 'complete';
                    vm.base64 = base64;
                    vm.width = w / 3 + 'px';
                    vm.height = h / 3 + 'px';
                    vm.$emit('render', {
                        base64
                    });
                }
            });
            vm.status = 'loading';
            /* eslint-enable */
        }
    },
    methods: {
        onClickMask() {
            this.status = 'init';
            this.$emit('close');
        }
    }
};
</script>
<style scoped>
.si-tpl {
    background-color: rgba(0, 0, 0, .5);
}
.si-res {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 899;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
}
.si-res-img {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90%;
    width: 100%;
    border-radius: 18px;
    z-index: 900;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.si-res-content {
    height: 85%;
    overflow-y: scroll;
    border-radius: 12px;
    text-align: center;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.si-res-content-img {
    width: 100%;
}
.pt-close {
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.pt-share-content {
    font-size: 15px;
    line-height: 15px;
    color: #fff;
}
.pt-close-icon {
    margin-top: 10px;
    width: 30px;
    height: 30px;
}
</style>
  
