<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-title>客服</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content :fullscreen="true">
            <chat-info v-for="i in 3" :key="i" :isLeft="i == 2"></chat-info>
        </ion-content>
        <ion-footer>
            <ion-toolbar>
                <div class="message">
                    <van-field type="text" :border="false" v-model="message" placeholder="请输入需要咨询的问题" />
                    <img class="icon" src="../assets/icon_liaotian_biaoqing.png" alt="" />
                    <img class="icon" src="../assets/icon_liaotian_gengduo.png" alt="" />
                </div>
                <div class="emoji-list">
                    <div
                        class="emoji-info"
                        @click="chooseEmoji(item)"
                        v-for="(item, index) in emojisPeople"
                        :key="index"
                    >
                        {{ item.char }}
                    </div>
                </div>
            </ion-toolbar>
        </ion-footer>
    </ion-page>
</template>

<script setup>
import { ref } from 'vue'
import chatInfo from '../components/ChatInfo.vue'
import emojis from '../emojis.json'

const emojisPeople = Object.keys(emojis)
    .filter(key => {
        return emojis[key].category == 'people'
    })
    .map(key => {
        return emojis[key]
    })

const message = ref('')

const chooseEmoji = item => {
    message.value = message.value + item.char
}
</script>

<style lang="less" scoped>
.message {
    .f();
    padding: 8px 20px;

    .icon {
        width: 28px;
        height: 28px;
        margin-left: 12px;
    }

    .van-cell {
        background-color: #f5f7fa;
        border-radius: 8px;
        --van-field-placeholder-text-color: #bcc1cc;
        --van-cell-horizontal-padding: 12px;
    }
}

.emoji-list {
    .f();
    flex-wrap: wrap;
    padding: 0px 10px 16px;
    height: 200px;
    overflow: auto;
    .emoji-info {
        width: 24px;
        .f();
        justify-content: center;
        margin: 6px;
    }
}
</style>
