// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
const { defineComponent, ref } = Vue;
// 定义组件（直接使用模板）
export const itemBottom = defineComponent({
    name: "item-bottom",
    props: {
        title: {
            type: String,
            default: "默认标题",
        },
        itemdata: {
            type: Object,
            default: () => {},
        },
    },

    setup(props) {
        let item = ref({ ...props.itemdata });
        return { item };
    },

    template: `<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)">    <img class="icon" :src="item?.commentreviews?.avatar" />    <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter">    <div class="bottom-item like flexacenter">        <img class="icon" src="./img/like-icon.png" />        <div class="text">{{ item.likes || "赞" }}</div>    </div>    <div class="bottom-item like flexacenter">        <img class="icon" src="./img/collect-golden.svg" />        <div class="text">{{ item.collections || "收藏" }}</div>    </div>    <div class="bottom-item like flexacenter">        <img class="icon" src="./img/discuss-icon.png" />        <div class="text">{{ item.comments || "讨论" }}</div>    </div>    <div class="bottom-item like flexacenter">        <img class="icon" src="./img/bi-copper-icon.png" />        <div class="text">{{ item.coins || "投币" }}</div>    </div>    <div class="bottom-item like flexacenter">        <img class="icon" src="./img/share-gray.png" />        <div class="text">转发</div>    </div></div>`,
});