<view
  a: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 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" />
              <!-- 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">
            <icon
              className="ant-rare-words-keyboard_down"
              type="DownOutline" />
          </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"
            a:key="{{ mapIndex }}">
            <view class="ant-rare-words-keyboard_pinyin_row">
              <block
                a:for="{{ mapItem }}"
                a:for-index="index"
                a:for-item="item"
                a: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">
                  <icon
                    className="ant-rare-words-keyboard_delete"
                    type="TextDeletionOutline" />
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view
      a:if="{{ safeArea }}"
      class="ant-rare-words-keyboard-kb_iphonex-safe" />
  </view>
</view>