// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
const { defineComponent, ref, onMounted, watch } = Vue;
// 定义组件（直接使用模板）
export const hotSearch = defineComponent({
    name: "hot-search",
    props: {
        isnorequestdata: {
            type: Boolean,
        },

        searchlist: {
            type: Array,
        },
    },

    setup(props) {
        let valueUrl = ref("");

        onMounted(() => {
            if (!props.isnorequestdata) init();
            const valueA = document.querySelector(".valueA");
            valueUrl.value = valueA.innerText;
        });

        const list = ref([]);

        watch(
            () => props.searchlist,
            (newVal) => {
                if (newVal) list.value = newVal;
            },
            {
                deep: true, // 核心：开启深度监听（监听对象/数组内部属性变化）
                immediate: true, // 可选：组件挂载时立即执行一次回调（根据需求决定）
            }
        );

        const init = () => {
            ajaxGet("/v2/api/forum/getHotSearchWords?limit=20").then((res) => {
                const data = res.data;
                list.value = data || [];
            });
        };

        return { valueUrl, list };
    },

    components: {},

    template: `<div class="hot-tag" v-if="list?.length > 0">    <div class="hot-tag-title">        <img class="icon" :src="valueUrl + '/img/triangle-violet.svg'" />        热门搜索    </div>    <div class="list flexflex">        <a class="item" v-for="item in list" :href="'/search/' + item.keyword" target="_blank">{{ item.keyword }}</a>    </div></div>`,
});