<template>
    <div class="sharePanelDiv" v-show="show">
        <div class="context">
            <div class="top">分享到</div>
            <div class="list">
                <div class="item" @click="handleshare(1)">
                    <img src="//img10.360buyimg.com/imgzone/jfs/t1/314416/37/8863/9400/684b8adcFdec4aff7/fe25b071e88f9c13.png"
                        alt="">
                    <div class="msg">口令分享</div>
                </div>
                <div class="item" @click="handleshare(2)">
                    <img src="//img10.360buyimg.com/imgzone/jfs/t1/314416/37/8863/9400/684b8adcFdec4aff7/fe25b071e88f9c13.png"
                        alt="">
                    <div class="msg">小程序分享</div>
                </div>
            </div>
            <div class="clear" @click="closeClick">取消</div>
        </div>
    </div>
</template>

<script>
    import basicPop from './hdzxtbasicPop.vue';
    import Vue from 'vue';
    import apis1 from '../../../util/apis1.js';
    import { allShare, allShareDz } from "../../../js/share.js"
    export default {
        props: [],
        components: {
            basicPop
        },
        data() {
            return {
            };
        },
        created() {
            document
                .querySelector("body")
                .setAttribute(
                    "style",
                    "position:#fixed;top:0;height:100%;overflow:hidden"
                );
        },
        mounted() {
        },
        methods: {
            handleshare(type) {
                sessionStorage.setItem("shareType", type);
                allShareDz(false, this, (callBackData) => {});
                this.closeClick()
            },
            closeClick() {
                document.querySelector("body").removeAttribute("style");
                this.submit();
            },
        }
    };
</script>

<style lang="scss">
    .sharePanelDiv {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        top: 0;
        bottom: 0;
        z-index: 200;
        .context {
            position: fixed;
            width: 100%;
            background: #fff;
            bottom: 0;
            padding-top: .3rem;
            padding-bottom: .3rem;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            .top {
                width: 100%;
                font-size: .24rem;
                text-align: center;
            }
            .clear {
                width: 100%;
                font-size: .24rem;
                text-align: center;
            }

            .list {
                margin-top: .2rem;
                font-size: .24rem;
                display: flex;
                justify-content: center;

                .item {
                    width: 1.3rem;
                    height: 1.9rem;
                    margin: 0 .15rem;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;

                    img {
                        width: 1.3rem;
                        width: 1.3rem;
                    }

                    .msg {
                        height: .6rem;
                        line-height: .6rem;
                    }
                }
            }
        }
    }
</style>