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">{{ count }}</div>
    </div>
    </div>`,
    data() {
        return {
            hideIcon: false,
            top: 0,
            left: 0,
            count: 0,
        }
    },
    methods: {
        customMethod() {
            console.log("Custom method called")
        },
        // 计算按钮位置
        calculate(random, count) {
            this.count = count

            const dom = document.querySelector(".add" + random)
            if (!dom) return

            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)
        },
    },
}

const textModule = {
    template: `<div class="text-box block">
    <div ref="textRef" class="text textRef">{{ text }}</div>
    <div class="text-head" v-if="title">
        <img class="text-icon" src="/img/triangle-red.svg" />
        {{ title }}
    </div>
    <div v-if="!isswiper" class="text" :class="{'text-center': text.length < 3}">{{ text }}</div>
    <div v-else class="text-list" ref="listRef">
    <div class="text" v-for="(item,index) in page" :style="{'transform': 'translateY(-' + index * h + 'px)'}">{{ text }}</div>
    </div>
    <div v-if="isswiper" class="indicate flexcenter">
        <img class="icon" @click="cutHotListPage('left')" :src="reversedMessage('left')" />
        <div class="text">{{ current }}/{{ page.length }}</div>
        <img class="icon btn-right" @click="cutHotListPage('right')" :src="reversedMessage('right')" />
    </div>
</div>`,
    props: ["text", "title"],
    setup(props) {
        console.log(props.text)
        // let text = ref(`55`)
        const textRef = ref(null)
        let page = ref(0)
        let h = ref(0)
        let isswiper = ref(false)

        onMounted(() => {
            console.log("props", props)
            if (props.text.length < 20) return
            const lineHeight = 32
            const height = lineHeight * 10

            const pagecount = textRef.value.clientHeight / height

            let arr = []

            for (let i = 0; i < Math.floor(pagecount); i++) {
                arr.push(height)
            }

            const decimalPart = parseFloat("0." + pagecount.toString().split(".")[1])
            if (decimalPart > 0) arr.push(height * decimalPart)
            page.value = arr
            h.value = height
            isswiper.value = arr.length > 1 ? true : false
        })

        const listRef = ref(null)
        let current = ref(1)
        const cutHotListPage = type => {
            if (type == "left") {
                if (current.value > 1) current.value--
            } else {
                if (current.value < page.value.length) current.value++
            }
            listRef.value.scrollTo({
                left: 640 * (current.value - 1),
                behavior: "smooth",
            })
        }

        // 计算
        const reversedMessage = type => {
            if (type == "left") {
                if (current.value == 1) return "/img/arrows-triangle-gray.svg"
                else return "/img/arrows-triangle-red.png"
            } else {
                if (current.value == page.value.length) return "/img/arrows-triangle-gray.svg"
                else return "/img/arrows-triangle-red.png"
            }
        }

        return { reversedMessage, cutHotListPage, textRef, isswiper, h, page, current, listRef }
    },
}