<template>
    <el-popover placement="bottom" :width="470" trigger="click" v-model:visible="selectEomjiPop">
        <template #reference>
            <div class="respond-add flexcenter" ref="add">
                <img class="respond-add-icon" src="@/img/plus-sign.svg" />
            </div>
        </template>
        <div class="respond-list-box" :style="{ 'top': top + 'px', 'left': left + 'px' }" @click.stop="">
            <div class="respond-list-title">选择你的回应：</div>
            <div class="respond-list">
                <template v-for="item in riposteoptions" :key="item">
                    <div class="respond-item flexcenter" v-for="(item, key) in item.data" :key="key">
                        <div class="respond-item-key" v-html="jointriposte(key)" @click="selectEomji(key)"></div>
                    </div>
                </template>
            </div>
        </div>
    </el-popover>
    <!-- <div class="respond-add flexcenter" ref="add" @click="open">
        <img class="respond-add-icon" src="@/img/plus-sign.svg" />
        <template v-if="selectEomjiPop">
            <div class="respond-list-mask" @click.stop="close"></div>
            <div class="respond-list-box" :style="{ 'top': top + 'px', 'left': left + 'px' }" @click.stop="">
                <div class="respond-list-title">选择你的回应：</div>
                <div class="respond-list">
                    <template v-for="item in riposteoptions" :key="item">
                        <div class="respond-item" v-for="(item, key) in item.data" :key="key" v-html="jointriposte(key)" @click="selectEomji(key)"></div>
                    </template>
                </div>
            </div>
        </template>
    </div> -->
</template>

<script setup>
const props = defineProps({
    riposteoptions: Array,
    index: Number,
})

const add = ref(null)
const top = ref(0)
const left = ref(0)

const open = () => {
    console.log("add", add)
    const addBox = add.value
    const rect = addBox.getBoundingClientRect()

    top.value = rect.top + 30 + 15
    left.value = rect.left - 235 + 15
    // top.value = rect.top - 150 + rect.height / 2
    // left.value = rect.left + rect.width + 20

    console.log("top", top.value)
    console.log("left", left.value)
    // console.log("pageYOffset", window.pageYOffset);

    // this.respondTop = top
    // this.respondLeft = left

    selectEomjiPop.value = true
}

const close = () => {
    selectEomjiPop.value = false
}

let selectEomjiPop = ref(false)
const emit = defineEmits(["selectEomji"])

const selectEomji = key => {
    close()
    emit("selectEomji", key, props.index, true)
}

const jointriposte = item => {
    return `&#x${item};`
}
</script>
<style scoped></style>