{php $this->template('header')}
    
    <link rel="stylesheet" href="{$public}css/message/index/add.css?{php echo time()}">
    

    <div class="bui-page">
        <main>
            <div class="convenient"> 
                <div class="serve"> {$title} </div>
            </div>
            <div class="info">
                <div class="title"> 请在下方输入您的留言内容 </div>
               
            </div>
            <div class="pinglun">
                <ul class="bui-list">
                    <li class="bui-btn clearactive">
                        <div id="commentContent" class="bui-input">
                            <textarea class="bui-input" id="textarea" cols="30" rows="4" placeholder="请输入内容"></textarea>
                            <span class="xiaolian"> <i class="iconfont icon-xiaolianwawa"></i> </span>
                            <div class="sanjiao"></div>
                        </div>
                    </li>
                </ul>
            </div>

            <div id="slide2" class="bui-slide">
               <div class="bui-slide-main">
                 <ul>

                   <li style="" class="solide2li">
                        <div class="face" >
                                <?php 

                                    for($i=0;$i<23;$i++){

                                    $y=-22*$i;

                                        echo '<span class="item"  onclick="item('.$i.')" data-id="'.$i.'"><span class="ficon" style="background-position: 0px '.$y.'px;"></span></span>';

                                    }
                                ?>
                                <span class="item"  onclick="item('no')" data-id="no">
                                    <span class="fdel"></span>
                                </span>
                        </div>
                   </li>
                   <li style="display:none;" class="solide2li">
                        <div class="face" >
                             <?php 

                              for($i=0;$i<23;$i++){

                                $y=-22*$i-23*22;
                                $m=$i+23;
                                  echo '<span class="item"   onclick="item('.$m.')" data-id="'.$m.'"><span class="ficon" style="background-position: 0px '.$y.'px;"></span></span>';

                               }
                              ?>
                                <span class="item"  onclick="item('no')" data-id="no"><span class="fdel"></span></span>
                        </div>

                   </li>

                   <li style="display:none;" class="solide2li">
                        <div class="face" >
                             <?php 

                                  for($i=0;$i<23;$i++){

                                    $y=-22*$i-23*22*2;
                                    $m=$i+23*2;
                                      echo '<span class="item"   onclick="item('.$m.')" data-id="'.$m.'"><span class="ficon" style="background-position: 0px '.$y.'px;"></span></span>';

                                   }
                                  ?>
                                <span class="item"  onclick="item('no')" data-id="no"><span class="fdel"></span></span>
                        </div>

                   </li>

                   <li style="display:none;" class="solide2li">
                        <div class="face" >
                             <?php 

                                  for($i=0;$i<23;$i++){

                                    $y=-22*$i-23*22*3;
                                    $m=$i+23*3;
                                      echo '<span class="item"  onclick="item('.$m.')"  data-id="'.$m.'"><span class="ficon" style="background-position: 0px '.$y.'px;"></span></span>';

                                   }
                                  ?>
                                <span class="item"  onclick="item('no')" data-id="no"><span class="fdel"></span></span>
                        </div>

                   </li>

                   <li style="display:none;" class="solide2li">
                        <div class="face" >
                            <?php 

                                  for($i=0;$i<23;$i++){

                                    $y=-22*$i-23*22*4;
                                    $m=$i+23*4;
                                      echo '<span class="item" onclick="item('.$m.')"  data-id="'.$m.'"><span class="ficon" style="background-position: 0px '.$y.'px;"></span></span>';

                                   }
                                  ?>
                                <span class="item"  onclick="item('on')" data-id="no"><span class="fdel"></span></span>
                        </div>

                   </li>

                 </ul>
               </div>
             </div>
            
            <div class="sub">
                <div class="bui-btn round bc-hong"> 提 交 </div>
            </div>

        </main>
    </div>
    <script>
 
        bui.ready(function(){

            // var comment = bui.input({
            //     id: "#commentContent",
            //     showLength: true,
            //     showIcon: false,
            //     maxLength: 200
            // });

            var uiSlide2 = bui.slide({
                id:"#slide2",
                height:360,
                autopage:true,
                width:'auto',
            });
            $('.xiaolian').on('click',function(){

                $('.bui-slide').toggle();
                $('.sanjiao').toggle();
            });
            function faces(i){

                  var str='微笑/撇嘴/色/发呆/得意/流泪/害羞/闭嘴/睡/大哭/尴尬/发怒/调皮/呲牙/惊讶/难过/冷汗/抓狂/吐/偷笑/愉快/白眼/傲慢/困/惊恐/流汗/憨笑/悠闲/奋斗/咒骂/疑问/嘘/晕/衰/骷髅/敲打/再见/擦汗/抠鼻/鼓掌/坏笑/左哼哼/右哼哼/哈欠/鄙视/委屈/快哭了/阴险/亲亲/可怜/菜刀/西瓜/啤酒/咖啡/猪头/玫瑰/凋谢/嘴唇/爱心/心碎/蛋糕/炸弹/便便/月亮/太阳/拥抱/强/弱/握手/胜利/抱拳/勾引/拳头/OK/跳跳/发抖/怄火/转圈/笑脸/生病/破涕为笑/吐舌/脸红/恐惧/失望/无语/嘿哈/捂脸/奸笑/机智/皱眉/耶/鬼魂/合十/强壮/庆祝/礼物/红包/鸡';
                        var f=str.split("/");
                        if(f[i]!=undefined){
                            return '['+f[i]+']';
                        }else{
                            return false;
                        }
         
          }


        window.item=function(i){

  
            var text=$('#textarea');
            var tval=text.val();

            if(i=='no'){

                text.val(tval.slice(0,tval.length-1));
                return false;
            }
             
             
             
            var str= faces(i);
                 
             
            if(str){

                text.val(tval+str)
            }

        };


            $('.bc-hong').on('click',function(){

                var con=$('#textarea').val();

                $.post('',{con:con},function(r){

                    msg('留言成功',2);                     
                    setTimeout(function(){
                        window.history.back();
                    },2000)
                });
                
            })


        })


 
    </script>

{php $this->template('footer')}