<view
  key="ant-rare-words-input-{{$id}}"
  style="{{style}}"
  class="ant-rare-words-keyboard {{className || ''}}"
>
  <view
    a:if="{{visible}}"
    class="ant-rare-words-keyboard-modal {{showMask ? '' : 'hide'}}"
    onTap="handleHide"
    onAppear="catchAppearModal"
  ></view>
  <view class="ant-rare-words-keyboard-kb {{visible ? '' : 'hide'}}">
    <view class="ant-rare-words-keyboard-header">
      <view
        a: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
              a:if="{{matchWordsList.length === 0}}"
              class="ant-rare-words-keyboard-match_words_hidden"
            >
              哈
            </view>
            <block
              a:for="{{matchWordsList}}"
              a:for-index="index"
              a:for-item="item"
            >
              <view
                class="ant-rare-words-keyboard-match_words_item {{showMoreWords ? 'all' : ''}}"
                data-value="{{item.unicodeChar}}"
                onTap="handleWordClick"
              >
                <view class="ant-rare-words-keyboard-match_words_item_text">
                  {{item.unicodeChar}}
                </view>
              </view>
            </block>
            <view
              a: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
              a:else
              class="ant-rare-words-keyboard-match_words_item_tips"
            >
              <!--display: inline-->
              <text a:if="{{!!(displayStr === '' && matchWordsList.length === 0)}}">请输入生僻字对应的拼音</text>
              <!--display: inline-->
              <text a:if="{{!!(displayStr !== '' && matchWordsList.length === 0)}}">更多生僻字完善中，敬请期待</text>
            </view>
          </view>
          <view
            class="ant-rare-words-keyboard-match_words_right {{showMoreWords ? 'sticky' : ''}} {{matchWordsList.length > maxDisplayNum && !showMoreWords ? 'overflow' : ''}}"
            onTap="hanleLookMore"
          >
            <ant-icon
              className="ant-rare-words-keyboard_down"
              type="DownOutline"
            ></ant-icon>
          </view>
        </view>
      </view>
      <view class="ant-rare-words-keyboard_main">
        <view a:if="{{showErrorPage}}">
          <slot name="resultError">
            <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
                    onTap="handleRetry"
                  >
                    重试
                  </button>
                </view>
              </result>
            </view>
          </slot>
        </view>
        <view
          a:else
          class="ant-rare-words-keyboard_pinyin"
        >
          <block
            a:for="{{pinyinMaps}}"
            a:for-index="mapIndex"
            a:for-item="mapItem"
            key="{{mapIndex}}"
          >
            <view class="ant-rare-words-keyboard_pinyin_row">
              <block
                a:for="{{mapItem}}"
                a:for-index="index"
                a:for-item="item"
                key="{{item.value}}"
              >
                <view
                  data-value="{{item.value}}"
                  class="ant-rare-words-keyboard_pinyin_key {{showMoreWords ? 'all' : ''}}"
                  onTap="handleKeyClick"
                >
                  <view class="ant-rare-words-keyboard_pinyin_key_text">
                    {{item.label}}
                  </view>
                </view>
              </block>
              <view
                a:if="{{mapIndex === pinyinMaps.length - 1}}"
                class="ant-rare-words-keyboard_pinyin_key delete"
                onTap="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
      a:if="{{safeArea}}"
      class="ant-rare-words-keyboard-kb_iphonex-safe"
    ></view>
  </view>
</view>