<template>
    <docs-layout title="发送验证码">
        <h2>概述</h2>
        <h3>网页常见发送验证码倒计时组件。</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {SendCode} from 'vue-ydui/dist/lib.rem/sendcode';<br />/* 使用px：import {SendCode} from 'vue-ydui/dist/lib.px/sendcode'; */<br /><br />Vue.component(SendCode.name, SendCode);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck cell-demo">
            <docs-demo title="普通调用">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-icon slot="icon" name="phone3" size=".45rem"&gt;&lt;/yd-icon&gt;<br />            &lt;input type="text" slot="right" placeholder="请输入手机号码"&gt;<br /><br />            &lt;!-- ↓↓关键代码是这里↓↓ --&gt;<br />            &lt;yd-sendcode slot="right" <br />                         v-model="start1" <br />                         @click.native="sendCode1" <br />                         type="warning"<br />            &gt;&lt;/yd-sendcode&gt;<br />            &lt;!-- ↑↑关键代码是这里↑↑ --&gt;<br /><br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                start1: false<br />            }<br />        },<br />        methods: {<br />            sendCode1() {<br />                this.$dialog.loading.open('发送中...');<br />                setTimeout(() =&gt; {<br /><br />                    this.start = true;<br />                    this.$dialog.loading.close();<br /><br />                    this.$dialog.toast({<br />                        mes: '已发送',<br />                        icon: 'success',<br />                        timeout: 1500<br />                    });<br /><br />                }, 1000);<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-cell-group>
                        <yd-cell-item>
                            <yd-icon slot="icon" name="phone3" size=".45rem"></yd-icon>
                            <input type="text" slot="right" placeholder="请输入手机号码">
                            <yd-sendcode slot="right" v-model="start1" @click.native="sendCode1" type="warning"></yd-sendcode>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>将<span>yd-sendcode</span>组件的 v-model 绑定到一个本地变量<span>start1</span>，将其设置为true即开始倒计时。</p>
                    <p><span>yd-sendcode</span>组件继承<span>yd-button</span>组件，因此与<span>yd-button</span>有同样的 props。</p>
                </div>
            </docs-demo>
            <docs-demo title="自定义倒计时按钮">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-sendcode<br />            v-model="start2"<br />            @click.native="sendCode2"<br />            second="15"<br />            initStr="点我啊，你点我啊"<br />            runStr="在{%s}秒后你就可以重新获取啦"<br />            resetStr="你可以重新获取验证码啦"<br />            size="large"<br />            type="primary"<br />    &gt;&lt;/yd-sendcode&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                start2: false<br />            }<br />        },<br />        methods: {<br />            sendCode2() {<br />                this.start2 = true;<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-sendcode
                            v-model="start2"
                            @click.native="sendCode2"
                            second="15"
                            initStr="点我啊，你点我啊"
                            runStr="在{%s}秒后你就可以重新获取啦"
                            resetStr="你可以重新获取验证码啦"
                            size="large"
                            type="primary"
                    ></yd-sendcode>
                </div>
                <div slot="interpre">
                    <p>通过<span>second</span>属性设置倒计时时长（秒），<span>initStr</span>属性设置初始显示文本，<span>runStr</span>属性设置运行时显示文本（需包含<span>{%s}</span>），<span>resetStr</span>属性设置结束后按钮显示文本</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>

        <h3><strong>yd-sendcode</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>second</td>
                <td>倒计时时长（秒）</td>
                <td>Number</td>
                <td>-</td>
                <td>60</td>
            </tr>
            <tr>
                <td>initStr</td>
                <td>初始化按钮显示文本</td>
                <td>String</td>
                <td>-</td>
                <td>获取短信验证码</td>
            </tr>
            <tr>
                <td>runStr</td>
                <td>运行时显示文本</td>
                <td>String</td>
                <td>-</td>
                <td>{%s}秒后重新获取</td>
            </tr>
            <tr>
                <td>resetStr</td>
                <td>运行结束后显示文本</td>
                <td>String</td>
                <td>-</td>
                <td>重新获取验证码</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                start1: false,
                start2: false
            }
        },
        methods: {
            sendCode1() {
                this.$dialog.loading.open('发送中...');
                setTimeout(() => {

                    this.start1 = true;
                    this.$dialog.loading.close();

                    this.$dialog.toast({
                        mes: '已发送',
                        icon: 'success',
                        timeout: 1500
                    });

                }, 1000);
            },
            sendCode2() {
                this.start2 = true;
            }
        }
    }
</script>
