<template>
    <div id="emoji-skin" class="emoji" v-show="isShow">
        <div class="swiper-container" ref="emojiList">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(list,index) in emojiArr" :key="index">
                    <ul class="list">
                        <li class="item" v-for="(item,index) in list" :key="index">
                            <div class="icon-item" v-if="item.index != 0"  @click="_addText(item.icon)">
                                <i class="icon-emoji" :style="{'backgroundPositionY':-30*(item.index-1) + 'px'}"></i>
                            </div>
                            <div class="icon-item" v-else @click="_remText">
                                <i class="icon-emoji" :style="{'backgroundPosition':'left bottom'}"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="swiper-pagination" ref="emojiPagination"></div>
        </div>
    </div>
</template>

<script>
    import emoji_icon from '@/plugins/Filters/emoji/icons'

    export default {
        props: {
            value: {},
            isShow: {},
        },
        data() {
            return {
                content: this.value,
                swiper: null,
            }
        },
        computed: {
            emojiArr(){
                let arr = [];
                let num = 20;
                for(let key in emoji_icon){
                    let index = parseInt((key-1)/num);
                    if(!arr[index]){
                        arr[index] = [];
                    }
                    arr[index].push({index: key, icon: emoji_icon[key]})
                    if(key >= num && key % num == 0){
                        arr[index].push({index: 0, icon: '删除'})
                    }
                }
                return arr
            }
        },
        methods: {
            _initSwiper(){
                if(!this.swiper){
                    let option = {
                        direction: 'horizontal',
                        pagination: {
                            el: this.$refs.emojiPagination
                        }
                    }
                    this.swiper = new this.$swiper(this.$refs.emojiList, option)
                }
            },
            _addText(str){
                this.content += `#${str}#`
            },
            _remText(){
                let text = this.content;
                let reg = /(#)[\u4e00-\u9fa5A-Za-z0-9\.]+(#)$/;
                if(text){
                    if(text.match(reg) != null){
                        text = text.replace(reg, '')
                    }else{
                        text = text.substring(0, text.length - 1)
                    }
                }
                this.content = text;
            }
        },
        watch: {
            isShow(){
                this.$nextTick(() => {
                    this._initSwiper();
                })
            },
            value(nVal){
                this.content = nVal;
            },
            content(nVal){
                this.$emit('input',nVal)
            }
        },
    }
</script>

<style lang="less" scoped>
    .emoji{
        position: relative;
        height: 150px;
        padding: 5px 5px 0 5px;

        .swiper-container{
            width: 100%;
            height: 100%;

            .swiper-slide{
                text-align: center;
                font-size: 18px;
                background: #fff;
                height: 100%;

                .list{
                    display: flex;
                    flex-wrap: wrap;

                    .item{
                        flex: 0 0 auto;
                        width: 100% / 7;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;

                        .icon-item{
                            display: inline-block;
                            vertical-align: middle;
                        }
                    }
                }
                .icon-emoji{
                    display: block;
                    margin: auto;
                    width: 30px;
                    height: 30px;
                    background-position: left top;
                    background-size: 30px auto;
                    background-repeat: no-repeat;
                    background-image: url("~@/assets/emoji/icons-qq.jpg");
                }
            }
        }
    }
</style>
