<view class="page">
    <view class="page__hd">
        <view class="page__title">Textarea</view>
        <view class="page__desc">多行输入框</view>
    </view>
    <view class="page__bd">
        <wux-cell-group title="Normal Usage">
            <wux-cell hover-class="none">
                <wux-textarea placeholder="No label" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea label="First name" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea label="Last name" placeholder="Input your last name" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Auto / Fixed height">
            <wux-cell hover-class="none">
                <wux-textarea autoHeight label="First name" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea rows="3" label="Last name" placeholder="Input your last name" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Count">
            <wux-cell hover-class="none">
                <wux-textarea hasCount rows="3" cursorSpacing="80" placeholder="Count..." />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Custom title">
            <wux-cell hover-class="none">
                <wux-textarea>First name</wux-textarea>
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea placeholder="Input your last name">
                    <image style="width: 20px; height: 20px; margin-right: 5px" src="http://cdn.skyvow.cn/logo.png" />
                </wux-textarea>
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Show clear">
            <wux-cell hover-class="none">
                <wux-textarea clear label="First name" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea clear label="Last name" placeholder="Input your last name" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Extra">
            <wux-cell hover-class="none">
                <wux-textarea label="Dollar" defaultValue="1024" extra="$" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea label="RMB" defaultValue="1024">
                    <view slot="footer" style="margin-left: 5px">￥</view>
                </wux-textarea>
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Disabled">
            <wux-cell hover-class="none">
                <wux-textarea disabled label="First name" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea disabled label="Last name" defaultValue="1024" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="ReadOnly">
            <wux-cell hover-class="none">
                <wux-textarea readOnly label="First name" defaultValue="read-only mode" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea readOnly label="Last name" defaultValue="1024" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Controlled">
            <wux-cell hover-class="none">
                <wux-textarea label="Uncontrolled" defaultValue="1024" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea label="Controlled" value="{{ value }}" controlled bind:change="onChange" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" bind:clear="onClear" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Error">
            <wux-cell hover-class="none">
                <wux-textarea label="Tel number" value="{{ value }}" controlled error="{{ error }}" bind:change="onChange" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" bind:clear="onClear" bind:error="onError" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Keyboard accessory" label="tip: 视图最大高度为 200px">
            <wux-cell hover-class="none">
                <wux-textarea hold-keyboard="{{ true }}" rows="3" cursorSpacing="80" placeholder="设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图">
                    <cover-view slot="keyboard-accessory" class="container" style="height: 50px;">
                        <cover-view style="flex: 1; background: green;">1</cover-view>
                        <cover-image src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="flex: 1; background: red;"></cover-image>
                    </cover-view>
                </wux-textarea>
            </wux-cell>
        </wux-cell-group>
    </view>
</view>