<template>
    <el-popover :width="470" trigger="click" popper-class="add-popper" :teleported="false" :offset="10" :show-arrow="false" @show="catState(true)" @hide="catState(false)" v-model:visible="state" :placement="type == 'bottom' ? 'top' : 'bottom' ">
        <template #reference>
            <div class="respond-add flexcenter" :class="{ 'angle': state }">
                <img class="respond-add-icon" src="@/assets/img/plus-sign.svg" />
            </div>
        </template>

        <div class="respond-list-box">
            <div class="respond-list-title">选择你的回应：</div>
            <div class="respond-list">
                <div class="respond-item" v-for="item in 18" :key="item">&#xc150;</div>
            </div>
        </div>
    </el-popover>
</template>

<script setup>
let props = defineProps({
    type: Boolean,
})

let state = ref(false)

const emit = defineEmits(['update:message']);

const catState = value => {
    state.value = value
    if (props.type == "bottom") {
        console.log(value);
        emit('update:message', value);
    }
}
</script>

<style lang="less" scoped>
.respond-add {
    width: 30px;
    height: 30px;
    background: rgba(114, 219, 134, 1);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    &.angle {
        &::after {
            content: "";
            background: #f6f6f6;
            border: 1px solid #e4e7ed;
            border-bottom-color: transparent !important;
            border-right-color: transparent !important;
            border-top-left-radius: 2px;
            width: 10px;
            height: 10px;
            position: absolute;
            bottom: -17px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            z-index: 3000;
        }
    }

    .respond-add-icon {
        width: 14px;
        height: 14px;
    }
}

.respond-list-box {
    width: 470px;

    .respond-list-title {
        font-size: 14px;
        line-height: 22px;
        color: #333333;
        padding-top: 16px;
        padding-left: 20px;
        padding-bottom: 25px;
    }

    .respond-list {
        display: flex;
        flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(10, 1fr);

        .respond-item {
            font-size: 20px;
            font-family: "emojifont";
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
        }
    }
}
</style>

<style lang="less">
.el-popover.el-popper.add-popper {
    padding: 0;
    background: #f6f6f6;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    box-shadow: none;
    left: 0 !important;
}
.el-popper.add-popper.is-light .el-popper__arrow::before {
    background: #f6f6f6;
}
</style>