<template>
     <div @click.prevent="(e) => {SubGoPage(e)}" :style="{'position':'absolute','right':'0','bottom':'20%'}"    
    ref="div"   
    v-show="IsShowBack">
       <img :src="ImgUrl" style="width: 3rem;"/>
    </div>

        <!-- @touchstart.prevent="(e) => {dragStart(e)}"     
    @touchend.prevent="(e) => {dragEnd(e)}"     
    @touchmove.prevent="(e) => {dragProgress(e)}"    -->
</template>

<script>
export default {
    name: "ReturnHome",
    props: ["comp", "cfg", "selectedPage"],
    inject:['goPage'],
    data(){
      return {
        IsShowBack:false,
        gapWidth: 10,
        itemWidth: 20, // 图标的宽度
        itemHeight: 30, // 图标的高度
        left:"90%",
        top:100,
        ImgUrl:"http://image.supercarrier8.com/h5_key/icon-returnhome.png"
      }
    },
    methods: {
      SubGoPage(e){
        e.preventDefault();       
        if(this.sup8.context.entranceid==0)
        {
          this.goPage("C_HomeP");
        }else
        {
          this.goPage("Key_HPage");
        }
      },
      dragStart(e) { 
        e.preventDefault();
        this.$refs.div.style.transition = 'none';
      },
      dragEnd(e) { 
        e.preventDefault();       
        this.$refs.div.style.transition = 'all 0.3s';        
        if (this.left > this.clientWidth/2) {          
            this.left = this.clientWidth - this.itemWidth - this.gapWidth-20;
        } else {          
            this.left = this.gapWidth;        
        }      
        if(this.left<30){
          this.left=0;
        }else if(this.left>540)
        {
          this.left=540;
        }
      },      
      dragProgress(e) {        
          if (e.targetTouches.length === 1) {          
              let touch = event.targetTouches[0];          
              this.left = touch.clientX - this.itemWidth/2;              
              this.top = touch.clientY - this.itemHeight/2;   
              if(this.left>540)
              {
                this.left=540;
              }     
          }      
      }
    },created(){
          this.clientWidth = document.documentElement.clientWidth;     
          this.clientHeight = document.documentElement.clientHeight;      
          this.left = this.clientWidth - this.itemWidth - this.gapWidth-20;      
          this.top = this.clientHeight*0.8; 
          if(this.left>540)
          {
            this.left=480;
          }   

          var btnIsShow=localStorage.getItem("backbtnisshow");
          var btnicon=localStorage.getItem("backbtnicon");
          if(btnicon)
          {
             this.ImgUrl=btnicon;
            if(btnicon.length<10)
            {
              this.ImgUrl="http://image.supercarrier8.com/h5_key/icon-returnhome.png";
            }
             this.IsShowBack=btnIsShow=="1"?true:false;
          }
    }
}
</script>
