<page-meta root-font-size="system"/>
<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
    <view class="page__hd">
        <view class="page__title">Input</view>
        <view class="page__desc">表单输入。老版本的表单，后续<text style="color: var(--weui-RED);">不再维护</text>。新版本请看 <navigator url="/example/form/form" class="link">表单 - form</navigator> 。</view>
    </view>
    <view class="page__bd">
        <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">错误提示</view>

        <view class="weui-cells__title">单选列表项</view>
        <view class="weui-cells weui-cells_radio weui-cells_after-title">
            <radio-group bindchange="radioChange">
                <label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value">
                    <view class="weui-cell__bd">{{item.name}}</view>

                    <view class="weui-cell__ft">
                        <radio
                            class="weui-check"
                            value="{{item.value}}"
                            checked="{{item.checked}}"
                        />
                        <i class="weui-icon-checked"></i>
                    </view>
                </label>
            </radio-group>
            <view class="weui-cell weui-cell_link" aria-role="button">
                <view class="weui-cell__bd">添加更多</view>
            </view>
        </view>

        <view class="weui-cells__title">复选列表项</view>
        <view class="weui-cells weui-cells_checkbox weui-cells_after-title">
            <checkbox-group bindchange="checkboxChange">
                <label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}" wx:key="value">
                    <view class="weui-cell__hd">
                        <checkbox
                            class="weui-check"
                            value="{{item.value}}"
                            checked="{{item.checked}}"
                        />
                        <i class="weui-icon-checked"></i>
                    </view>
                    <view class="weui-cell__bd">
                        <view>{{item.name}}</view>
                    </view>
                </label>
            </checkbox-group>
            <view class="weui-cell weui-cell_link" aria-role="button">
                <view class="weui-cell__bd">添加更多</view>
            </view>
        </view>

        <view class="weui-cells__title">表单</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_active">
                <view class="weui-cell__hd">
                    <view class="weui-label">qq</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder-class="weui-input__placeholder"  placeholder="请输入qq"/>
                </view>
            </view>
            <view class="weui-cell weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">手机号</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder-class="weui-input__placeholder" placeholder="请输入手机号" />
                </view>
                <view class="weui-cell__ft">
                    <view class="weui-vcode-btn" aria-role="button">获取验证码</view>
                </view>
            </view>
            <view class="weui-cell weui-cell_active">
                <view class="weui-cell__hd">
                    <view class="weui-label" id="js_date" aria-hidden="true">日期</view>
                </view>
                <view class="weui-cell__bd">
                    <picker mode="date" aria-role="combobox" aria-labelledby="js_date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                        <view class="weui-input">{{date}}</view>
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_active">
                <view class="weui-cell__hd">
                    <view class="weui-label" aria-hidden="true" id="js_time">时间</view>
                </view>
                <view class="weui-cell__bd">
                    <picker aria-role="combobox" aria-labelledby="js_time" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
                        <view class="weui-input">{{time}}</view>
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_active weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">验证码</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder-class="weui-input__placeholder" placeholder="请输入验证码" />
                </view>
                <view class="weui-cell__ft">
                    <image class="weui-vcode-img" src="../images/vcode.jpg"></image>
                </view>
            </view>
        </view>
        <view class="weui-cells__tips">底部说明文字底部说明文字</view>

        <view class="weui-cells__title">表单报错</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_active weui-cell_warn">
                <view class="weui-cell__hd">
                    <view class="weui-label">卡号</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder-class="weui-input__placeholder" placeholder="请输入卡号"/>
                </view>
                <view class="weui-cell__ft">
                    <icon type="warn" size="46rpx" color="#E64340"></icon>
                </view>
            </view>
        </view>

        <view class="weui-cells__title">开关</view>
        <view class="weui-cells weui-cells_after-title">
            <label class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd" id="js_switch">原生开关</view>
                <view class="weui-cell__ft">
                    <switch checked />
                </view>
            </label>
            <label class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">模拟开关</view>
                <view class="weui-cell__ft">
                    <view class="weui-switch-cp">
                        <checkbox class="weui-switch-cp__input" checked="true" />
                        <view class="weui-switch-cp__box"></view>
                    </view>
                </view>
            </label>
        </view>

        <view class="weui-cells__title">文本框</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_active">
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder-class="weui-input__placeholder" placeholder="请输入文本" />
                </view>
            </view>
        </view>

        <view class="weui-cells__title">文本域</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_active">
                <view class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder-class="weui-input__placeholder" placeholder="请输入文本" style="height: 3.3em;" />
                    <view aria-role="option" title="字数统计" class="weui-textarea-counter">0/200</view>
                </view>
            </view>
        </view>

        <view class="weui-cells__title">选择</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select weui-cell_select-before">
                <view class="weui-cell__hd">
                    <picker aria-role="combobox" bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
                        <view class="weui-select" style="width: 3.14em;">{{countryCodes[countryCodeIndex]}}</view>
                    </picker>
                </view>
                <view class="weui-cell__bd weui-cell__bd_in-select-before">
                    <input class="weui-input" placeholder-class="weui-input__placeholder" placeholder="请输入号码" />
                </view>
            </view>
        </view>

        <view class="weui-cells__title">选择</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_active weui-cell_select">
                <view class="weui-cell__bd">
                    <picker aria-role="combobox" bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
                        <view class="weui-select">{{accounts[accountIndex]}}</view>
                    </picker>
                </view>
            </view>
            <label for="js_area" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
                <view class="weui-cell__hd">
                    <view class="weui-label">国家/地区</view>
                </view>
                <view class="weui-cell__bd">
                    <picker aria-role="combobox" id="js_area" bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
                        <view class="weui-select weui-select_in-select-after">{{countries[countryIndex]}}</view>
                    </picker>
                </view>
            </label>
        </view>


        <label class="weui-agree" aria-role="">
            <checkbox class="weui-agree__checkbox-check" aria-labelledby="js_agree_txt js_agree_link"/>
            <i class="weui-agree__checkbox"></i>
            <span class="weui-agree__text"><text aria-hidden="true" id="js_agree_txt">阅读并同意</text><navigator id="js_agree_link" url="/example/index" class="weui-agree__link">《相关条款》</navigator></span>
        </label>

        <view class="weui-btn-area">
            <button class="weui-btn" type="primary" bindtap="showTopTips">确定</button>
        </view>
    </view>
</view>
