<template>
    <div ref="content" style="display: flex;justify-content: center;align-items: center;">
        <van-nav-bar :placeholder="true" :fixed='true' title="海报内容位置设置" left-text="返回" right-text="确认" left-arrow :safe-area-inset-top="true" @click-left="onClickLeft" @click-right="Posterbtn" />
        <div class="poster-bgdiv" style="margin-top:30px;">
            <img :src="Posterimg" alt="">
            <div @touchstart="down" @touchmove="move" @touchend="end" id="circlebox" class="circle name">昵称</div>
            <div @touchstart="downone" @touchmove="moveone" @touchend="endone" id="circlebox1" class="circle photo">头像</div>
            <div @touchstart="downtwo" @touchmove="movetwo" @touchend="endtwo" id="circlebox2" class="circle code">二维码</div>
            <!-- <van-uploader :after-read="afterRead">更换图片</van-uploader> -->
        </div>
    </div>
</template>
<script>
    import { Toast } from 'vant';
    import { HeightAuto } from '../../assets/js/height.js'; //公共 js 判断是否给html 和 body 添加 height1
    export default {
        data() {
            return {
                user_activity_id:this.$route.query.user_activity_id,
                activity_id:this.$route.query.activity_id,// 成功领取活动后 领取活动id
                url:this.$route.query.url, //上一页路由
                post_url: localStorage.getItem("post_url"), //接口
                Posterimg: localStorage.getItem("posterImg"), //海报img
                loadingImg:false,
                posterone:{ /* 昵称 */
                    positionX: 0,
                    positionY:0,
                    innerHeight: 0,
                    innerWidth: 0,
                },
                postertwo:{ /* 头像 */
                    positionXone:0,
                    positionYone: 0,
                    innerHeightone: 0,
                    innerWidthone: 0,
                },
                posterthree:{/* 二维码 */
                    positionXtwo: 0,
                    positionYonetwo: 0,
                    innerHeightonetwo: 0,
                    innerWidthonetwo: 0,
                }
            };
        },
        created: function() {
            this.getPosition();
            this.clientHeight();
        },
        methods: {
            /* 获取 拖拽位置 */
            getPosition(){
                let data = {
                    user_activity_id: this.activity_id,
                    json:'',
                }
                this.$api.post('/request' + this.post_url, data).then(res => {
                    console.log("表单数据回显", res)
                    if (res.code == 0) {
                        this.posterone.positionX = document.getElementById("circlebox").offsetLeft;
                        this.posterone.positionY = document.getElementById("circlebox").offsetTop;
                        this.postertwo.positionXone = document.getElementById("circlebox1").offsetLeft;
                        this.postertwo.positionYone = document.getElementById("circlebox1").offsetTop;
                        this.posterthree.positionXTwo = document.getElementById("circlebox2").offsetLeft;
                        this.posterthree.positionYTwo = document.getElementById("circlebox2").offsetTop;
                    }
                });
            },
            
            /* 阻止移动端屏幕默认滑动 */
            default (e, data) {
                let divv = document.getElementById(data);
                divv.addEventListener('touchmove',function(e) {
                        e.preventDefault();
                    }, {
                        passive: false
                    }
                );
            },

            getThisNode(positionXs, positionYs, innerWidths, innerHeights, data) {
                let odiv = document.getElementById(data); //移动 盒子
                let div = document .getElementsByClassName("poster-bgdiv")[0]; //固定 盒子
                //最小左边距 (屏幕宽 - 固定盒子宽)的一半 + 移动元素宽度的一半
                let minleft = (innerWidths - div.clientWidth) / 2 + odiv.clientWidth / 2;
                //最大左边距 (屏幕宽 - 固定盒子宽)的一半  + 固定盒子宽 - 移动元素宽度的一半
                let maxleft = (innerWidths - div.clientWidth) / 2 + div.clientWidth  - odiv.clientWidth / 2;
                //最小顶边距 (屏幕高 - 固定盒子高)的一半 + 移动元素高度的一半 (+30 是因为上边距高度 大于 下边距高度 具体加多少 需要自己调)
                let mintop = (innerHeights - div.clientHeight) / 2 + odiv.clientHeight / 2 + 30;
                //最大顶边距 (屏幕高 - 固定盒子高)的一半  + 固定盒子高 - 移动元素高度的一半 (+28 是因为上边距高度 大于 下边距高度 具体加多少 需要自己调)
                let maxtop = (innerHeights - div.clientHeight) / 2 + div.clientHeight  - odiv.clientHeight / 2 + 28;
                if (positionXs <= minleft) {
                    positionXs = minleft;
                } else if (positionXs >=  maxleft) {
                    positionXs = maxleft;
                } else {
                    positionXs = positionXs;
                }
                if (positionYs <= mintop) {
                    positionYs = mintop
                } else if (positionYs >= maxtop) {
                    positionYs = maxtop
                } else {
                    positionYs = positionYs
                }
                odiv.style.left = `${positionXs - minleft}px`;
                odiv.style.top = `${positionYs - mintop}px`;
            },

            // 光标按下
            down(e) {
                this.default(e, "circlebox");
                this.posterone.innerHeight = e.view.innerHeight;
                this.posterone.innerWidth = e.view.innerWidth;
                this.posterone.positionX = e.changedTouches[0].pageX;
                this.posterone.positionY = e.changedTouches[0].pageY;
            },
            // 光标移动
            move(e) {
                this.getThisNode(this.posterone.positionX, this.posterone.positionY, this.posterone.innerWidth, this.posterone.innerHeight, "circlebox");
                this.default(e, "circlebox");
                this.posterone.positionX = e.changedTouches[0].pageX;
                this.posterone.positionY = e.changedTouches[0].pageY;
                this.getThisNode(this.posterone.positionX, this.posterone.positionY, this.posterone.innerWidth, this.posterone.innerHeight, "circlebox");
            },
            // 光标抬起
            end(e) {
                // console.log('end');
            },

            // 光标按下
            downone(e) {
                this.default(e, "circlebox1");
                this.postertwo.innerHeightone = e.view.innerHeight;
                this.postertwo.innerWidthone = e.view.innerWidth;
                this.postertwo.positionXone = e.changedTouches[0].pageX;
                this.postertwo.positionYone = e.changedTouches[0].pageY;
            },
            // 光标移动
            moveone(e) {
                this.getThisNode(this.postertwo.positionXone, this.postertwo.positionYone, this.postertwo.innerWidthone, this.postertwo.innerHeightone,
                    "circlebox1");
                this.default(e, "circlebox1");
                this.postertwo.positionXone = e.changedTouches[0].pageX;
                this.postertwo.positionYone = e.changedTouches[0].pageY;
                this.getThisNode(this.postertwo.positionXone, this.postertwo.positionYone, this.postertwo.innerWidthone, this.postertwo.innerHeightone,
                    "circlebox1");
            },
            // 光标抬起
            endone(e) {
                // console.log('end');
            },

            // 光标按下
            downtwo(e) {
                this.default(e, "circlebox1");
                this.posterthree.innerHeighttwo = e.view.innerHeight;
                this.posterthree.innerWidthtwo = e.view.innerWidth;
                this.posterthree.positionXtwo = e.changedTouches[0].pageX;
                this.posterthree.positionYtwo = e.changedTouches[0].pageY;
            },
            // 光标移动
            movetwo(e) {
                this.getThisNode(this.posterthree.positionXtwo, this.posterthree.positionYtwo, this.posterthree.innerWidthtwo, this.posterthree.innerHeighttwo,"circlebox2");
                this.default(e, "circlebox2");
                this.posterthree.positionXtwo = e.changedTouches[0].pageX;
                this.posterthree.positionYtwo = e.changedTouches[0].pageY;
                this.getThisNode(this.posterthree.positionXtwo, this.posterthree.positionYtwo, this.posterthree.innerWidthtwo, this.posterthree.innerHeighttwo, "circlebox2");
            },
            
            // 光标抬起
            endtwo(e) {
                // console.log('end');
            },
            
            /* 点击更换图片*/
            // afterRead(file) {
            //     // 此时可以自行将文件上传至服务器
            //     this.poster.loadingImg = true;
            //     let imgData = new FormData();
            //     imgData.append('img[]', file.file);
            //     this.$api.post('/request/index/market/upload2OSS', imgData).then(res => {
            //         console.log(res);
            //         setTimeout(()=>{
            //             this.loadingImg = false;
            //             this.Posterimg = res[0];
            //             Toast('上传图片成功');
            //         },1500);
            //     })
            // },
            
            /* 点击 确认 */
            Posterbtn(){
                if(this.Posterimg == ''){
                    Toast("请上传背景图");
                }else{
                    var json ={
                        posterone:JSON.stringify(this.posterone),
                        postertwo:JSON.stringify(this.postertwo),
                        posterthree:JSON.stringify(this.posterthree)
                    };
                    
                    let data={
                        user_activity_id:this.activity_id,
                        json:JSON.stringify(json),
                    }   
                    this.$api.post("/request/index/face/distr/index/actman", data).then(res => {
                        console.log(res)
                        if(res.code==0){
                            Toast(res.msg);
                            this.onClickLeft();
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                }
            },
            
            /* 返回我的页 */
            onClickLeft() {
                this.$router.push({
                    path: this.url,
                    query:{
                        user_activity_id:this.user_activity_id,
                        activity_id:this.activity_id,
                        url:'/Administration'
                    }
                });
                localStorage.removeItem("post_url");
                localStorage.removeItem("posterImg");
            },

            /* 页面 填充 */
            clientHeight() {
                var timer = setInterval(() => {
                    if (this.$refs.content.offsetHeight != undefined) {
                        clearInterval(timer);
                        let eleObj = {
                            offsetHeight: this.$refs.content.offsetHeight,
                            clientHeight: Number(`${document.documentElement.clientHeight}`),
                        };
                        this.$refs.content.style.height = HeightAuto(eleObj);
                    }
                }, 500);
            },
        }
    };
</script>
<style>
    .poster-bgdiv {
        width: 85%;
        margin:0px auto 0px auto;
        position: relative;
    }

    .circle {
        position: absolute;
        z-index: 999;
        touch-action: none;
        background: #eee;
        color: #777;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .name {
        left:5%;
        top: 7.5%;
        padding:4px 8px;
        font-size:16px;
    }

    .photo {
        width: 60px;
        height: 60px;
        right: 5%;
        top: 5%;
        overflow: hidden;
        font-size:18px;
    }

    .code {
        width: 80px;
        height: 80px;
        left:5%;
        bottom: 5%;
        font-size:18px;
    }

    img {
        width: 100%;
        height: 100%;
    }
    .poster-bgdiv .van-uploader{
        width:22%;
        background:rgba(0,0,0,0.7) ;
        padding:8px 12px;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top:50px;
        right: 0px;
        z-index: 999;
        color: #fff;
        font-size:14px;
    }
</style>