<view
  key="ant-rare-words-input-{{$id}}"
  style="{{style}}"
  class="ant-rare-words-keyboard {{className || ''}}"
>
  <view
    wx:if="{{visible}}"
    class="ant-rare-words-keyboard-modal {{showMask ? '' : 'hide'}}"
    bindtap="handleHide"
    onAppear="catchAppearModal"
  ></view>
  <view class="ant-rare-words-keyboard-kb {{visible ? '' : 'hide'}}">
    <view class="ant-rare-words-keyboard-header">
      <view
        wx:if="{{type !== 'handwriting'}}"
        class="ant-rare-words-keyboard-input_value {{displayStr.length > 0 && visible ? '' : 'hide'}}"
      >{{displayStr}}</view>
      <view class="ant-rare-words-keyboard-match_words_wrap">
        <view class="ant-rare-words-keyboard-match_words {{showMoreWords ? 'absolute' : ''}}">
          <view class="ant-rare-words-keyboard-match_words_inner {{showMoreWords ? 'all' : ''}}">
            <view
              wx:if="{{matchWordsList.length === 0}}"
              class="ant-rare-words-keyboard-match_words_hidden"
            >哈</view>
            <block
              wx:for="{{matchWordsList}}"
              wx:for-index="index"
              wx:for-item="item"
            >
              <view
                class="ant-rare-words-keyboard-match_words_item {{showMoreWords ? 'all' : ''}}"
                data-value="{{item.unicodeChar}}"
                bindtap="handleWordClick"
              >
                <view class="ant-rare-words-keyboard-match_words_item_text">{{item.unicodeChar}}</view>
              </view>
            </block>
            <view
              wx:if="{{loading}}"
              class="ant-rare-words-keyboard-match_words_item_tips loading"
            >
              <loading
                className="ant-rare-words-keyboard-loading"
                type="mini"
                size="small"
                color="#666666"
              ></loading>
              <!--display: inline-->
              <text>加载中</text>
            </view>
            <view
              wx:else
              class="ant-rare-words-keyboard-match_words_item_tips"
            >
              <!--display: inline-->
              <text wx:if="{{!!(displayStr === '' && matchWordsList.length === 0)}}">请输入生僻字对应的拼音</text>
              <!--display: inline-->
              <text wx:if="{{!!(displayStr !== '' && matchWordsList.length === 0)}}">更多生僻字完善中，敬请期待</text>
            </view>
          </view>
          <view
            class="ant-rare-words-keyboard-match_words_right {{showMoreWords ? 'sticky' : ''}} {{matchWordsList.length > maxDisplayNum && !showMoreWords ? 'overflow' : ''}}"
            bindtap="hanleLookMore"
          >
            <ant-icon
              className="ant-rare-words-keyboard_down"
              type="DownOutline"
            ></ant-icon>
          </view>
        </view>
      </view>
      <view class="ant-rare-words-keyboard_main">
        <view wx:if="{{showErrorPage}}">
          <view class="ant-rare-words-keyboard_error">
            <result
              className="ant-rare-words-keyboard_error-result"
              image="https://mdn.alipayobjects.com/huamei_2fq7mt/afts/img/A*VtvFS4EJl0cAAAAAAAAAAAAADh58AQ/original"
              message="页面遇到一些小问题"
            >
              <view
                slot="extra"
                class="ant-rare-words-keyboard_error-btns"
              >
                <button
                  type="primary"
                  size="small"
                  inline
                  bindtap="handleRetry"
                >重试</button>
              </view>
            </result>
          </view>
        </view>
        <view
          wx:else
          class="ant-rare-words-keyboard_pinyin"
        >
          <block
            wx:for="{{pinyinMaps}}"
            wx:for-index="mapIndex"
            wx:for-item="mapItem"
            key="{{mapIndex}}"
          >
            <view class="ant-rare-words-keyboard_pinyin_row">
              <block
                wx:for="{{mapItem}}"
                wx:for-index="index"
                wx:for-item="item"
                wx:key="value"
              >
                <view
                  data-value="{{item.value}}"
                  class="ant-rare-words-keyboard_pinyin_key {{showMoreWords ? 'all' : ''}}"
                  bindtap="handleKeyClick"
                >
                  <view class="ant-rare-words-keyboard_pinyin_key_text">{{item.label}}</view>
                </view>
              </block>
              <view
                wx:if="{{mapIndex === pinyinMaps.length - 1}}"
                class="ant-rare-words-keyboard_pinyin_key delete"
                bindtap="handleDelete"
              >
                <view class="ant-rare-words-keyboard_pinyin_key_text">
                  <ant-icon
                    className="ant-rare-words-keyboard_delete"
                    type="TextDeletionOutline"
                  ></ant-icon>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view
      wx:if="{{safeArea}}"
      class="ant-rare-words-keyboard-kb_iphonex-safe"
    ></view>
  </view>
</view>