<template>
  <div>
    <v-avatar
      ref="box"
      class="box point elevation-5"
      color="indigo"
      @click="handleClick"
      @mousedown="handleMousedown"
      >
      <v-icon dark large>
        mdi-face-agent
      </v-icon>
    </v-avatar>
    <v-navigation-drawer
      v-model="show"
      fixed
      temporary
      hide-overlay
      right
      width="35%"
      style="z-index: 400"
    >
      <div v-if="show" class="assistant-iframe-wrapper">
        <iframe
          :src="iframeUrl"
          class="assistant-iframe"
          frameborder="0"
          title="智能助手"
        />
      </div>
    </v-navigation-drawer>
  </div>
</template>

<script>
// 已弃用
export default {
  name: 'AssistantIframe',
  props: {
    /** 要展示的 iframe 链接地址 */
    iframeUrl: {
      type: String,
      default: () => process.env.VUE_APP_N8N_CHAT_URL || ''
    }
    // handle: Function
  },
  data () {
    return {
      show: false,
      lock: false,
      isDragging: false,
      info: {}
    }
  },
  mounted () {
    this.$nextTick(() => {
      document.addEventListener('mouseup', this.handleMouseup)
      document.addEventListener('mousemove', this.handleMousemove)
      this.$once('hook:beforeDestroy', () => {
        document.removeEventListener('mouseup', this.handleMouseup)
        document.removeEventListener('mousemove', this.handleMousemove)
      })
    })
  },
  methods: {
    handleClick () {
      if (this.isDragging) {
        return
      }
      // if (this.handle) {
      //   this.handle()
      //   return
      // }
      this.show = !this.show
    },
    handleMousedown (e) {
      this.lock = true
      const { left, top, height, width } = this.$refs.box.$el.getBoundingClientRect()
      this.info = {
        click: {
          x: e.clientX,
          y: e.clientY
        },
        left,
        top,
        height,
        width,
        clientX: e.clientX,
        clientY: e.clientY
      }
    },
    handleMousemove (e) {
      if (!this.lock) return
      const xLen = Math.abs(this.info.click?.x - e.clientX)
      const yLen = Math.abs(this.info.click?.y - e.clientY)
      if (xLen < 20 && yLen < 20) {
        return
      }
      const clientX = e.clientX - this.info.clientX
      const clientY = e.clientY - this.info.clientY
      this.isDragging = true
      this.info.left += clientX
      this.info.top += clientY
      this.$refs.box.$el.style.left = this.info.left + 'px'
      this.$refs.box.$el.style.top = this.info.top + 'px'
      this.info.clientX = e.clientX
      this.info.clientY = e.clientY
    },
    handleMouseup () {
      this.lock = false
      setTimeout(() => {
        this.isDragging = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.point {
  cursor: pointer;
}
.box {
  z-index: 9;
  position: fixed;
  right: 50px;
  bottom: 100px;
}
.assistant-iframe-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding-top: 69px;
}
.assistant-iframe-header {
  flex-shrink: 0;
  padding: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.assistant-iframe-title {
  font-size: 18px;
  font-weight: 500;
}
.assistant-iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: none;
}
</style>
