const base = {
    template: `
    <div class="red-dot" v-if="hideIcon" :style="{top: top + 'px',left: left + 'px'}"></div>
    <div class="base flexcenter">
    <div class="left flexacenter">
        <div class="text flex1">搜索项目</div>
        <img class="img" src="/img/search-black-icon.svg" />
    </div>
    <div class="rigth flexacenter">
        <img class="img" src="/img/contrast-icon.png" />
        <div class="text">项目对比</div>
        <div class="number">16</div>
    </div>
    </div>`,
    data() {
        return {
            hideIcon: false,
            top: 0,
            left: 0,
        }
    },
    methods: {
        customMethod() {
            console.log("Custom method called")
        },
        // 计算按钮位置
        calculate(random) {
            const dom = document.querySelector(".add" + random)
            const rect = dom.getBoundingClientRect()
            const top = rect.top + rect.height / 2 - 5
            const left = rect.left + rect.width / 2 - 5
            this.top = top
            this.left = left
            this.hideIcon = true

            setTimeout(() => {
                const dom = document.querySelector(".base .number")
                const rect = dom.getBoundingClientRect()
                const top = rect.top + rect.height / 2 - 5
                const left = rect.left + rect.width / 2 - 5
                this.top = top
                this.left = left
            }, 10)

            setTimeout(() => {
                this.top = null
                this.left = null
                this.hideIcon = false
            }, 330)

            return
            const button = document.querySelector(".button")
            const container = document.querySelector(".container")
            const containerWidth = container.offsetWidth
            const buttonWidth = button.offsetWidth
            const buttonLeft = (containerWidth - buttonWidth) / 2
            button.style.left = buttonLeft + "px"
        },
    },
}