<template>
  <div></div>
</template>

<script>
import { mapGetters } from 'vuex'
import { CUSTOM_SOURCE_TYPE } from '@/utils/constant'

import Bus from '@/utils/Bus'

export default {
  name: 'ComplaintsDeal',
  data() {
    return {
      color: '',
      bgColor: '',
      entry: null,
      body: null
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin'
    })
  },
  mounted() {
    Bus.$on('initDeal', (color, bgColor) => {
      this.color = color
      this.bgColor = bgColor
      this.init()
      this.dealAnimation()
    })
  },
  destroyed() {
    Bus.$off('initDeal')
  },
  methods: {
    init() {
      const { uin, id } = this.$route.query
      if (typeof complaintsDeal === 'undefined') {
        return null
      }
      const defaultEntryStyle = {
        width: '0.62667rem',
        height: '0.62667rem',
        right: '0.13333rem',
        bottom: '0.33333rem',
        zIndex: 51,
        background: '#fff',
        iconColor: '#80411a',
        transition: 'all 0.25s cubic-bezier(0.55, 0, 0.1, 1)'
      }
      if (this.color) {
        Object.assign(defaultEntryStyle, { iconColor: this.color })
      }
      if (this.bgColor) {
        Object.assign(defaultEntryStyle, { background: this.bgColor })
      }

      // eslint-disable-next-line no-undef
      complaintsDeal({
        target: document.body,
        props: {
          // rootFontSize: '.62667rem',
          defaultEntryStyle,
          zIndex: 51,
          uin,
          url: window.location.href,
          company: '管理员',
          pageId: id,
          pageType: CUSTOM_SOURCE_TYPE.vote,
          env: process.env.X_CA_STAGE,
          beforeShow: next => {
            if (this.isLogin) {
              next()
            } else {
              const self = this
              this.$toast({
                message: '请先登录',
                duration: 1500,
                onClose() {
                  if (process.client && window.self !== window.top) return
                  self.showLogin()
                }
              })
            }
          },
          afterSuccessSub: next => {
            this.$toast('提交成功，感谢您的反馈')
            next()
          },
          afterFailSub: res => {
            res.statusText && this.$toast(res.statusText)
          }
        }
      })
    },
    dealAnimation() {
      setTimeout(() => {
        this.entry = document.querySelector('.entry')
        this.entry.classList.add('sidebar-hidden-scroll')
        this.body = document.body
        this.body.addEventListener('touchstart', () => {
          this.body.addEventListener('touchmove', this.dealScrollOn)
        })
        this.body.addEventListener('touchend', () => {
          this.body.removeEventListener('touchmove', this.dealScrollOn)
          // this.dealScrollOff()
        })
        this.entry.addEventListener('click', () => {
          if (this.entry && this.entry.classList.contains('sidebar-hidden-scroll')) {
            this.entry.classList.remove('sidebar-hidden-scroll')
            return false
          }
        })
      }, 500)
    },
    dealScrollOn() {
      if (this.entry && !this.entry.classList.contains('sidebar-hidden-scroll')) {
        this.entry.classList.add('sidebar-hidden-scroll')
      }
    },
    dealScrollOff() {
      if (this.entry && this.entry.classList.contains('sidebar-hidden-scroll')) {
        setTimeout(() => {
          this.entry.classList.remove('sidebar-hidden-scroll')
        }, 500)
      }
    },
    showLogin() {
      Bus.$emit('showLogin')
    }
  }
}
</script>

<style lang="less" scoped></style>
