<view
    class="
        {{iptItemType === 'two-row' ? 'input two-row form-item' : 'input form-item'}}
        gov-input
    "
>
    <view
        class="
            content-wrap
            {{!noborder ? !isIos ? 'border android-patch' : 'border' : ''}}
        "
    >
        <view s-if="iptTitle">
            <view
                class="{{iptErrorInfo.errFlag ? 'input-title-long color-red' : 'input-title-long'}}"
                s-if="iptItemType === 'long'"
            >
                {{iptTitle}}
            </view>
            <view
                s-elif="iptItemType === 'two-row'"
                class="{{iptErrorInfo.errFlag ? 'input-title-two-row color-red two-row' : 'input-title-two-row'}}"
            >
                {{iptTitle}}
            </view>
            <view
                s-else
                class="{{iptErrorInfo.errFlag ? 'color-red input-title-short' : 'input-title-short'}}"
            >
                {{iptTitle}}
            </view>
        </view>
        <view
            s-if="iptItemType === 'long' || iptItemType === 'two-row'"
            class="input-content"
            style="width:{{
                iptTitle
                ? ((blurState || !iptValue) && !iptErrorInfo.errFlag && !iptNoticInfo.noticFlag ? iptAreaLong + 50 : iptAreaLong) + 'rpx;'
                : (blurState || !iptValue) && !iptErrorInfo.errFlag && !iptNoticInfo.noticFlag ? '100%;' : 'calc(100% - 50rpx);'
            }}"
        >
            <input
                class="ipt-area"
                placeholder-style="color:#ccc;"
                name="{{iptName}}"
                placeholder="{{placeholderContent}}"
                value="{= iptValue =}"
                type="{{type}}"
                password="{{password}}"
                maxlength="{{maxlength}}"
                focus="{{focus}}"
                disabled="{{disabled}}"
                confirm-type="{{confirmType}}"
                bindinput="bindKeyInput"
                bindblur="bindBlur"
                bindfocus="bindFocus"
                bindconfirm="bindConfirm"
                style="{{(!iptTitle && !disabled) ? 'color: #000' : ''}}"
            />
        </view>
        <view
            s-else
            class="input-content"
            style="width:{{
                iptTitle
                ? ((blurState || !iptValue) && !iptErrorInfo.errFlag && !iptNoticInfo.noticFlag ? iptAreaShort + 50 : iptAreaShort) + 'rpx;'
                : (blurState || !iptValue) && !iptErrorInfo.errFlag && !iptNoticInfo.noticFlag ? '100%;' : 'calc(100% - 50rpx);'
            }}"
        >
            <input
                class="ipt-area"
                placeholder-style="color:#ccc;"
                name="{{iptName}}"
                placeholder="{{placeholderContent}}"
                value="{= iptValue =}"
                type="{{type}}"
                password="{{password}}"
                maxlength="{{maxlength}}"
                focus="{{focus}}"
                disabled="{{disabled}}"
                confirm-type="{{confirmType}}"
                bindinput="bindKeyInput"
                bindblur="bindBlur"
                bindfocus="bindFocus"
                bindconfirm="bindConfirm"
                style="{{(!iptTitle && !disabled) ? 'color: #000' : ''}}"
            />
        </view>
    </view>

    <view
        class="input-explain-icon {{(!disabled && !iptErrorInfo.errFlag && iptValue && !iptNoticInfo.noticFlag && !blurState) ? '' : 'clear-hide'}}"
        bind:touchstart="cleanInput"
    >
        <view class="icon">
            <gov-icon
                name="error"
                color="#e0e0e0"
                size="36.2rpx">
            </gov-icon>
        </view>
    </view>
    <view class="input-explain-icon" bindtap="showNotic" s-if="!iptErrorInfo.errFlag && iptNoticInfo.noticFlag">
        <view class="icon">
            <gov-icon
                name="message-o"
                color="#2b99ff"
                size="36.2rpx">
            </gov-icon>
        </view>
    </view>
    <view class="input-explain-icon" bindtap="showErrorInfo" s-if="iptErrorInfo.errFlag">
        <view class="icon">
            <gov-icon
                name="warning"
                color="#c40311"
                size="36.2rpx">
            </gov-icon>
        </view>
    </view>
</view>
