<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 {CountDown} from 'vue-ydui/dist/lib.rem/countdown';<br />/* 使用px：import {CountDown} from 'vue-ydui/dist/lib.px/countdown'; */<br /><br />Vue.component(CountDown.name, CountDown);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck">
            <docs-demo title="默认模板">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-countdown time="2017/06/06 06:06:06"&gt;&lt;/yd-countdown&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        <br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <div style="font-size: 16px;">
                        <yd-countdown time="2017/06/06 06:06:06"></yd-countdown>
                    </div>
                </div>
                <div slot="interpre">
                    <p>设置<span>time</span>参数的结束时间即开始倒计时。</p>
                </div>
            </docs-demo>
            <docs-demo title="自定义参数模板">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-countdown time="2017/06/06 06:06:06" format="{%s}秒】{%m}分】{%h}时】{%d}天】"&gt;&lt;/yd-countdown&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br /><br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <div style="font-size: 16px;">
                        <yd-countdown time="2017/06/06 06:06:06" format="{%s}秒】{%m}分】{%h}时】{%d}天】"></yd-countdown>
                    </div>
                </div>
                <div slot="interpre">
                    <p>设置<span>format</span>参数即可自定义显示模板；</p>
                    <p>参数可选标识：<span>{%d}</span>天，<span>{%h}</span>时，<span>{%m}</span>分，<span>{%s}</span>秒自定义显示模板。</p>
                </div>
            </docs-demo>
            <docs-demo title="通过Slot自定义HTML模板（个位十位一体）">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-countdown time="2017/08/08 08:08:08"&gt;<br />        &lt;span style="color:red;"&gt;{%d}&lt;i&gt;天&lt;/i&gt;&lt;/span&gt;<br />        &lt;span style="color:gray;"&gt;{%h}&lt;i&gt;时&lt;/i&gt;&lt;/span&gt;<br />        &lt;span style="color:blue;"&gt;{%m}&lt;i&gt;分&lt;/i&gt;&lt;/span&gt;<br />        &lt;span style="color:orange;"&gt;{%s}&lt;i&gt;秒&lt;/i&gt;&lt;/span&gt;<br />    &lt;/yd-countdown&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br /><br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <div style="font-size: 16px;">
                        <yd-countdown time="2017/08/08 08:08:08">
                            <span style="color:red;">{%d}<i>天</i></span>
                            <span style="color:gray;">{%h}<i>时</i></span>
                            <span style="color:blue;">{%m}<i>分</i></span>
                            <span style="color:orange;">{%s}<i>秒</i></span>
                        </yd-countdown>
                    </div>
                </div>
                <div slot="interpre">
                    <p>将模板放入组件<span>slot</span>内即可，参数可选标识同上。</p>
                </div>
            </docs-demo>
            <docs-demo title="通过Slot自定义HTML模板（个位十位分开）">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-countdown slot="right" time="2017/09/08 00:00:00"&gt;<br />        &lt;em&gt;{%d0}&lt;/em&gt;&lt;em&gt;{%d1}&lt;/em&gt;&lt;em&gt;{%d2}&lt;/em&gt;天<br />        &lt;em&gt;{%h1}&lt;/em&gt;&lt;em&gt;{%h2}&lt;/em&gt;小时<br />        &lt;em&gt;{%m1}&lt;/em&gt;&lt;em&gt;{%m2}&lt;/em&gt;时<br />        &lt;em&gt;{%s1}&lt;/em&gt;&lt;em&gt;{%s2}&lt;/em&gt;秒<br />    &lt;/yd-countdown&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br /><br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <div style="font-size: 16px;">
                        <yd-countdown slot="right" time="2017/09/08 00:00:00" class="demo-countdown">
                            <em>{%d0}</em><em>{%d1}</em><em>{%d2}</em>天
                            <em>{%h1}</em><em>{%h2}</em>小时
                            <em>{%m1}</em><em>{%m2}</em>时
                            <em>{%s1}</em><em>{%s2}</em>秒
                        </yd-countdown>
                    </div>
                </div>
                <div slot="interpre">
                    <p>参数可选标识：</p>
                    <p><span>{%d0}</span>天(百位)，<span>{%d1}</span>天(十位)，<span>{%d2}</span>天(个位)，最大支持显示3位数的天；</p>
                    <p><span>{%h1}</span>时(十位)，<span>{%h2}</span>时(个位)；</p>
                    <p><span>{%m1}</span>分(十位)，<span>{%m2}</span>分(个位)；</p>
                    <p><span>{%s1}</span>秒(十位)，<span>{%s2}</span>秒(个位)。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>

        <h3><strong>yd-countdown</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>内容</td>
            </tr>
        </docs-table>

        <h3><strong>yd-countdown</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>time</td>
                <td>结束时间点，时间格式</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>format</td>
                <td>模板参数</td>
                <td>String</td>
                <td>-</td>
                <td>{%d}天{%h}时{%m}分{%s}秒</td>
            </tr>
            <tr>
                <td>doneText</td>
                <td>倒计时结束后显示文字</td>
                <td>String</td>
                <td>-</td>
                <td>已结束</td>
            </tr>
            <tr>
                <td>callback</td>
                <td>倒计时结束后调用方法</td>
                <td>Function</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>
