<template>
  <div class="m-wx fixed z-50" draggable="true" ref="div" :style="{'bottom':bottom}">
    <div v-show="initShow" class="m-wx-btn flex items-center justify-center z-50">
      <img src="@/assets/images/mobile/wx.png" width="24" height="24" alt="" @click="handleChange">
    </div>
    <div v-show="!initShow" class="m-wx-box flex flex-col z-50">
      <div class="bg-white flex flex-col items-center py-2" style="margin-bottom: 5px; border-radius: 4px 0 0 0;">
        <img class="" src="@/assets/images/mobile/wx1.png" alt="">
        <p class="text-xs box-text" style="color: #6E7899" :style="{'paddingLeft': enStyle ? '0' : '', 'textAlign': enStyle ? 'center' : ''}">{{ $t('lang.wx1') }}</p>
        <img class="" src="@/assets/images/mobile/wx2.png" alt="">
        <p class="text-xs box-text" style="color: #6E7899" :style="{'paddingLeft': enStyle ? '0' : '', 'textAlign': enStyle ? 'center' : ''}">{{ $t('lang.wx2') }}</p>
      </div>
      <div class="bg-white text-xs text-center leading-6" style="height: 24px; color: #6E7899; border-radius: 0 0 0 4px" @click="handleChange">{{ $t('lang.close') }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import lang from '@/mixin/lang'
export default Vue.extend({
	mixins: [lang],
  data(){
    return{
      timer:null,
      currentTop:0,
      clientWidth:0,
      clientHeight:0,
      itemWidth: 45,
      itemHeight: 40,
      bottom: '50%',
    }
  },
  // computed: {
  //   itemWidth() {
  //     return this.initShow ? 45 : 95
  //   },
  //   itemHeight() {
  //     return this.initShow ? 40 : 249
  //   }
  // },
  props: {
    initShow: Boolean,
    gapWidth:{
      type:Number,
      default:10
    },
    coefficientHeight:{
      type:Number,
      default:0.8
    }
  },
  methods: {
    handleChange() {
      this.$emit('changeShow', !this.initShow)
    }
  },
  watch: {
    initShow(n) {
      if (n) {
        this.itemWidth = 45
        this.itemHeight = 40
      } else {
        this.itemWidth = 95
        this.itemHeight = 249
        if (parseFloat(this.bottom) > this.clientHeight - this.itemHeight) {
          this.bottom = this.clientHeight - this.itemHeight + 'px'
        }
      }
    }
  },
  mounted() {
    this.clientWidth = window.innerWidth
    this.clientHeight = window.innerHeight
    window.onresize = () => {
      this.clientWidth = window.innerWidth
      this.clientHeight = window.innerHeight
    }
    window.onscroll = () => {
      this.clientWidth = window.innerWidth
      this.clientHeight = window.innerHeight
    }
    this.$nextTick(()=>{
      const div = this.$refs.div as any;
      div.addEventListener("touchstart",(e: any)=>{
        e.stopPropagation();
        div.style.transition = 'none';
      });
      div.addEventListener("touchmove",(e: any)=>{
        e.preventDefault()
        e.stopPropagation()
        if (e.targetTouches.length === 1) {
          let touch = e.targetTouches[0];
          this.bottom = this.clientHeight - touch.clientY - this.itemHeight/2 + 'px';
          if(parseFloat(this.bottom) <= 0) {
            this.bottom = '0'
          } else if (parseFloat(this.bottom) > this.clientHeight - this.itemHeight){
            this.bottom = this.clientHeight - this.itemHeight + 'px'
          }
        }
      },{ passive: false });
      div.addEventListener("touchend",(e: any)=>{
        e.stopPropagation();
        div.style.transition = 'all 0.3s';
        if(parseFloat(this.bottom) <= 0) {
          this.bottom = '0'
        } else if (parseFloat(this.bottom) > this.clientHeight){
          this.bottom = this.clientHeight - this.itemHeight + 'px'
        }
      });
    });
  }
})
</script>

<style scoped>
  .m-wx {
    bottom: 50%;
    right: 0;
  }
  .m-wx-btn {
    width: 45px;
    height: 40px;
    background: #fff;
    /* top: 50%;
    right: 0; */
    box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15);
    border-radius: 50px 0 0 50px;
    transition: 0.25s ease-in;
  }
  .m-wx-box {
    width: 95px;
    /* right: 0;
    bottom: 46%; */
    transition: 0.25s ease-in;
    /* box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15); */
  }
  .m-wx-box div {
    box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15);
  }
  .m-wx-box img {
    width: 70px;
    height: 70px;
  }
  .box-text {
    width: 120%;
    transform-origin: center center;
    transform: scale(0.8);
    padding-left: 6px;
  }
</style>