<template>
    <div class="respond-add flexcenter" @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" @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 open = () => {
    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>