<template>
    <div id="timeTag" :style="`color:${suggestionTextColor};background-color: inherit;`">{{ time }}</div>
</template>
<script>
import moment from 'moment'
export default {
    name: "timeTag",
    data() {
        return {
            time: '',
            timer: null,
            suggestionTextColor: '#909399',
            resizeObserver: null
        }
    },
    created() {
        this.getTime()
    },
    async mounted() {
        this.resizeObserver = new ResizeObserver(entries => {
            entries.forEach(entry => {
                // 获取元素的新尺寸
                // const { width, height } = entry.contentRect;
                // console.log(`元素宽度：${width}px, 高度：${height}px`);
                // 在此可以将宽高值保存到 data 中
                // this.elementWidth = width;
                // this.elementHeight = height;
                this.dragDoc()
            });
        });
        const body = document.getElementsByTagName('body')[0]
        // 开始监听指定元素
        this.resizeObserver.observe(body);
        this.dragDoc()
        this.setColor()
    },
    methods: {
        getTime() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
            this.timer = setInterval(async () => {
                this.time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss Z z')
            }, 1000)
        },
        dragDoc() {
            const box = document.querySelector('#timeTag')
            const body = document.getElementsByTagName('body')[0]
            let maxLeft = body.offsetWidth - box.offsetWidth
            let maxTop = body.offsetHeight - box.offsetHeight - 30
            box.style.cssText += `left:${maxLeft}px;top:7px;`
            const sty = (function () {
                if (window.document.currentStyle) {
                    return (dom, attr) => dom.currentStyle[attr]
                } else {
                    return (dom, attr) => getComputedStyle(dom, false)[attr]
                }
            })()

            box.onmousedown = (e) => {
                // 鼠标按下，计算当前元素距离可视区的距离
                const disX = e.clientX - box.offsetLeft
                const disY = e.clientY - box.offsetTop

                // 获取到的值带px 正则匹配替换
                let styL = sty(box, 'left')
                let styT = sty(box, 'top')

                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if (styL.includes('%')) {
                    styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
                    styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
                } else {
                    styL = +styL.replace(/\px/g, '')
                    styT = +styT.replace(/\px/g, '')
                }
                const oldMousemove = document.onmousemove

                document.onmousemove = function (e) {
                    oldMousemove(e)
                    // 通过事件委托，计算移动的距离
                    let left = e.clientX - disX
                    let top = e.clientY - disY
                    if (left < 0) {
                        left = 0
                    }
                    if (left > maxLeft) {
                        left = maxLeft
                    }
                    if (top < 0) {
                        top = 0
                    }
                    if (top > maxTop) {
                        top = maxTop
                    }
                    // 移动当前元素
                    box.style.cssText += `;left:${left}px;top:${top}px;`
                }

                document.onmouseup = function (e) {
                    document.onmousemove = oldMousemove
                    document.onmouseup = null
                }
            }
        },
        setColor() {
            this.suggestionTextColor = "#909399"
            let pathList = ['/showvisitdicoms', '/showdicom', '/readingDicoms', '/petct', '/noneDicomReading']
            if (pathList.includes(window.location.pathname)) {
                this.suggestionTextColor = "#fff"
            }
        }
    },
    destroyed() {
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = null
        }
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
        }
    }
}
</script>
<style lang="scss" scoped>
#timeTag {
    position: fixed;
    z-index: 99999;
    cursor: move;
    width: 195px;
    font-size: 14px;
}
</style>