<!--components/emoji/emoji.wxml-->
<view class="weui-emoji_area" style="height: {{height}}px; background-color: {{backgroundColor}}">
  <view 
    class="weui-emotion_list {{hasSafeBottom ? 'weui-emoji_area__has-safe-bottom' : ''}}"
    style="padding-left: {{padding}}px; padding-right: {{padding}}px;"
  >
    <view hidden="{{!showHistory || history.length === 0}}">
      <view class="weui-emotion_head">最近使用</view>
      <block wx:for="{{history}}" wx:key="*this">
        <view class="weui-emotion_item" data-idx="{{item}}" bindtap="insertEmoji" style="margin-right: {{(index + 1) % perLine ? extraPadding : 0}}px">
          <view class="weui-icon_emotion {{emotions[item].style}}" style="background-image: url({{source}});"></view>
        </view>
      </block>
    </view>
    <!-- 图片32px，每个宽度40px -->
    <view class="weui-emotion_head" style="margin-top: 8px;">所有表情</view>
    <block wx:for="{{emotions}}" wx:key="*this">
      <view class="weui-emotion_item" data-idx="{{index}}" bindtap="insertEmoji" style="padding-right: {{(index + 1) % perLine ? extraPadding : 0}}px">
        <view class="weui-icon_emotion {{item.style}}" style="background-image: url({{source}});"></view>
      </view>
    </block>
  </view>
  <!--操作-->
  <view class="weui-emoji__operation">
    <view class="weui-emoji__operation__delete" bindtap="deleteEmoji" wx:if="{{showDel}}">
      <image src="./icon_emotion_del.png" class="weui-emotion_del_btn"></image>
    </view>
    <view class="weui-emoji__operation__send" bindtap="send" wx:if="{{showSend}}">发送</view>
  </view>
</view>