<template>
    <div class="info-wrap">
        <img src="../../assets/image/backWrite@2x.png" class="leftIcon" alt="" @click="$router.replace('/user')">
        <img :src="data.shareImgSrc" alt="">
        <a href="javascript:void(0);" class="btn share" v-on:click="share" id="share"></a>
        <!-- <img src="../../assets/image/rule.png" class="rule" alt="" @click="rules"> -->
        <!-- 暂时不需要点我赚钱 -->
        <!-- <div class="rule-mark" style="height: 100%" v-if="data.ruleShow"> -->
           <!-- <div class="rule-mark-con">
               <img src="../../assets/image/one-page_07.png" class="close" alt="" @click="close">
               <el-carousel :interval="4000" indicator-position="none" style="width: 80%;margin: auto;" ref="carousel">
                   <el-carousel-item>
                       <img src="../../assets/image/one-page_03.png" alt="" style="margin-top: 6rem;z-index: 9999" @click="setActiveItem(0)">
                   </el-carousel-item>
                   <el-carousel-item>
                       <img src="../../assets/image/two_03.png" alt="" style="margin-top: 6rem;z-index: 9999" @click="setActiveItem(1)">
                   </el-carousel-item>
               </el-carousel>

           </div> -->
<!--            <swiper :options="data.swiperOption">-->
<!--                <swiper-slide>-->
<!--                    <img src="../../assets/image/one-page_03.png" alt="" style="margin-top: 6rem;z-index: 9999">-->
<!--                </swiper-slide>-->
<!--                <swiper-slide>-->
<!--                    <img src="../../assets/image/two_03.png" alt="" style="margin-top: 6rem;z-index: 9999">-->
<!--                </swiper-slide>-->
<!--            </swiper>-->
        <!-- </div> -->
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import { swiper } from 'vue-awesome-swiper'
    import wx from 'weixin-js-sdk';
    import soshm from "soshm";
import login from "@/store/module/login";


    @Component({
        components: {
            swiper
        }
    })
    export default class UserIndex extends Vue {

        public data: any = {
            shareImgSrc: '',
            ruleShow: false,
            swiperOption: {
                autoplay: 3000,
                speed: 1000,
                direction: 'horizontal'
            }
        };


        async created() {
             // console.log(this.$route.params.state)

            let res = await Http.getInstance().getSharePic();
            console.log('邀请好友', res);
            
            this.data.shareImgSrc = res.data;
            if( !this.$route.params.state ){
                if(location.href.indexOf("#reloaded")==-1){
                    location.href=location.href+"#reloaded";
                    location.reload();
                }
            }else{
                this.data.ruleShow = true
            }
        }
        setActiveItem(index){
            // if(index == 0){
            //     this.$refs.carousel.setActiveItem(1)
            // }else if(index == 1){
            //     this.carouseIshow = 2
            // }
        }
        rules(){
            this.data.ruleShow = true
        }
        close(){
            this.data.ruleShow = false
            if(location.href.indexOf("#reloaded")==-1){
                location.href=location.href+"#reloaded";
                location.reload();
            }
        }
         async share(){
            let title = ['社保断缴怎么办','河马代缴'];
            let digest = ['一定要牢记这2点，或许可以续缴社保，我们国家对于社保的管理一直都是比较严格的，在一些制度方面都有严格的要求。我们如果想要续缴我们的社保，是需要我们准备一些材料的，只有把材料准备齐全了，我们才可以继续缴纳社保。','\n' + '社保断缴不用愁，河马代缴解烦忧'];
            let a = '';
            let ua = navigator.userAgent.toLowerCase();//获取判断用的对象
            if (/MicroMessenger/i.test(ua)) {
                 a = soshm.weixinSharetip();
                    this.wxInit();
            }else {
                a = soshm.popIn({
                    url: 'https://hr.hemadj.com/login?inviter_code=' + localStorage.getItem('inviter_code'),
                    title: '社保怕断缴， 河马代您保！',
                    digest: '河马代缴用户破万，30元即可缴社保。在线便捷支付，您的贴心管家！' ,
                    pic: 'https://hr.hemadj.com/favicon.ico',
                    sites: ['weixin', 'weixintimeline','qq']
                });
            }
            // console.log(a);
         }
     async wxInit() {
            let url = window.location.href;  // 获取锚点之前的链接
            let links = "https://hr.hemadj.com/login?inviter_code=" + localStorage.getItem('inviter_code');
            let title = "社保怕断缴， 河马代您保！";
            let desc = "河马代缴用户破万，30元即可缴社保。在线便捷支付，您的贴心管家！";
            let imgUrl = "https://hr.hemadj.com/favicon.ico";
            let res = await Http.getInstance().getConfig({
                platform: "weixin", url: url,
            });
            // console.log(res)
            wx.config({
                debug: false,
                appId: res.data.appId,
                timestamp:  res.data.timestamp,
                nonceStr:  res.data.nonceStr,
                signature: res.data.signature,
                jsApiList: [
                    'onMenuShareAppMessage',
                    'onMenuShareTimeline'
                ],
                success:function () {
                   console.log('成功啦，，，')
                },
                error:function () {
                    console.log('失败了')
                }
            });
            wx.ready(() => {
                wx.onMenuShareAppMessage({
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                }, function (res) {
                    // console.log("test==========",res)
                    //这里是回调函数
                }, function (err) {
                    console.log('err:', err)
                })
                //分享到朋友圈
                wx.onMenuShareTimeline({
                    title:title, // 分享标题
                    link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    success: function () {
                        // 用户点击了分享后执行的回调函数
                    }
                });
                wx.error((err: any) => {
                    alert(JSON.stringify(err));
                });
            })
        }
    }
</script>

<style lang="scss" >
    .leftIcon {
        width: 0.667rem;
        position: absolute;
        top: 4rem;
        left: 2rem;
    }
    img {
        width: 100%;
    }
    .el-carousel__container{
        height: 620px;
    }

    .btn.share {
        background: #000;
        width: 81%;
        height: 8%;
        position: absolute;
        top: 76.5%;
        left: 9.5%;
        border-radius: 6rem;
        /*z-index: 999;*/
        opacity: 0;
    }

    .info-wrap{
        position: relative;
    }
    .rule{
        width: 7rem;
        position: absolute;
        top: 12rem;
        right: 1rem;
        border-radius: 50%;
    }
    .rule-mark{
        background: rgba(0,0,0,0.5);
        width: 100%;
        position: absolute;
        top: 0rem;
        /*z-index: 9999;*/
    }
    .close{
        width: 4rem;
        height: 4rem;
        position: absolute;
        right: 45%;
        top: 1rem;
        z-index: 999;
    }
</style>
