{% extends base %}

{% block head %}
    {% include common/layout/wide_left.html %}
    {% include common/script/load_vue.html %}
    <style>
        .example-title {
            width: 100%;
            padding: 5px;
            border-left: 5px solid #039BE5;
            background-color: #eee;
        }
    </style>
{% end %}

{% block body %}

<div class="card">
    {% set title = "Vue Test" %}
    {% include common/base_title.html %}
</div>

{% init bind_html = """
<a v-bind:href="url">Baidu</a>
<a class="tag" v-bind:class="tagClass">Tag</a>
<a class="tag" v-for="tag in tagList" v-bind:class="tag.tagClass">{{tag.name}}</a>
""" %}

<script id="bindExampleHtml" type="text/example">
{% raw bind_html %}
</script>

<div id="app" class="card top-offset-1">
        
    <div class="marked-contents">
        <span class="marked-contents-title">目录</span>
        <ul>
            <li v-for="heading in headingList" v-bind:style="{'margin-left': heading.marginLeft }">
                <a v-bind:href="heading.href">{{!heading.name}}</a>
            </li>
        </ul>
    </div>
    
    <h2>官方文档</h2>
    <a href="https://v2.cn.vuejs.org/v2/guide/installation.html" target="_blank">vue2官方文档</a>

    <!-- {# `{{!` 用来转义 #} -->

    {% init example_list = [
        Storage(name = "声明式渲染", type = "h2"),
        Storage(name = "在文本中使用变量", code="""<p>{{message}}</p>"""),
        Storage(name = "禁止渲染文本中的变量", code="""<!-- 使用v-pre指令 -->
<p v-pre>{{message}}</p>"""),
        Storage(name = "在属性中使用变量", code="""<div v-bind:title="bindmessage">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
</div>"""),
        Storage(name = "条件与循环", type="h2"),
        Storage(name = "v-if/v-else-if/v-else", code="""<p v-if="seen">现在你看到我了</p>
<p v-else-if="Math.random() > 0.4"> Math.random() > 0.4 </p>
<p v-else>看不到我</p>"""),
        Storage(name = "v-for", code="""<!-- v-for指自身元素重复 -->
<p>Example 1</p>
<ul>
    <li v-for="file in files">
        {{ file }}
    </li>
</ul>

<p>Example 2</p>

<ul>
    <li v-for="(file, index) in files">
        {{ index }} - {{ file }}
    </li>
</ul>

<p>Example 3</p>

<ul>
    <li v-for="(value, key, index) in person">
        {{ index }} - {{ key}} = {{ value }}
    </li>
</ul>

<p>Example 4</p>

<ul>
    <span v-for="n in 10">{{ n }} , </span>
</ul>
        """)
    ] %}


    {% for example in example_list %}
        {% if example.type == "h2" %}
            <h2>{{example.name}}</h2>
        {% else %}
            <h3>{{example.name}}</h3>
            <p class="example-title">&gt;代码</p>
            <pre class="marked-code" v-pre>
                {{ example.code }}
            </pre>
            <p class="example-title">&gt;效果</p>
            {% raw example.code %}
        {% end %}
    {% end %}

    <!-- {# title中间不能有`-` #} -->    

    <h2>处理用户输入</h2>
    <h4>v-on</h4>
    <button v-on:click="reverseMessage">逆转消息</button>

    <h4>v-model双向绑定</h4>
    <input v-model="message" />

    <h2>其他模板语法</h2>
    <h4>v-once</h4>
    <span v-once>This will never change: {{!message}}</span>

    <h4>v-html</h4>
    <div v-html="rawHtml"></div>

    <h4 id="bindExample">v-bind动态绑定</h4>

    <h4>参数绑定</h4>
    <pre class="marked-code" v-text="bindExampleHtml"></pre>

    <blockquote>效果</blockquote>

    <div class="row top-offset-1 bottom-offset-1">
        {% raw bind_html %}
    </div>


    <h4>JavaScript 表达式</h4>
    <div> {{! message + " >>>" }} </div>

    <h4>修饰符</h4>
    <form v-on:submit.prevent="onSubmit">
        <button>submit</button>
    </form>

    <h4>过滤器</h4>
    {{! message | toUpperCase }}

    <h4>过滤器串联</h4>
    {{! message | toUpperCase | length }}

    <h4>过滤器加参数</h4>
    {{! message | appendStr('arg2', 'arg3') }}

    <h4>v-bind:href缩写:href</h4>
    <a v-bind:href="url">Baidu</a>
    <a :href="url">Baidu</a>

    <h4>v-on:click缩写@click</h4>
    <button @click="onShortClick">Click Me</button>

    <h4>onclick获取本元素</h4>
    <button @click="onGetAttr($event)" role="test">Click Me</button>

    <h2>vue+layer</h2>
    <button @click="onShowLayerMsg">展示</button>
    <div id="vueMsgDialog" v-show="showLayerMsg">
        <div class="card">
            <div class="row">
                <span>{{!layerMsg}}</span>
            </div>
            <div class="row">
                <span>{{!layerCounter}}</span>
                <button @click="layerCounterInc">全局计数器+1</button>
            </div>
            <div class="row">
                <div v-for="item in counterList">
                    <span>{{!item.value}}</span>
                    <button @click="layerCounterInc2(item)">局部计数器{{!item.name}}+1</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            headingList: [],
            bindExampleHtml: $("#bindExampleHtml").html(),
            message: "Hello, Vue!",
            files: ["file1", "file2"],
            person: {
                name: "Jhon",
                age: 20,
            },
            bindmessage: "页面加载于 " + new Date(),
            seen: false,
            rawHtml: "{{!message}}",
            url: "https://www.baidu.com",
            tagClass: "lightblue",
            tagList: [
                {
                    name: "Tag1",
                    tagClass: "info",
                },
                {
                    name: "Tag2",
                    tagClass: "gray",
                }
            ],
            layerMsg: "hello, vue-layer",
            showLayerMsg: false,
            layerCounter: 0,
            counterList: [
                {
                    name: "计数器A",
                    value: 0,
                },
                {
                    name: "计数器B",
                    value: 0,
                },
            ],
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('');
            },
            onSubmit: function () {
                alert("submit");
            },
            onShortClick: function () {
                alert("Click缩写");
            },
            onGetAttr: function (event) {
                var el = event.currentTarget;
                alert("role:" + $(el).attr("role"));
            },
            onShowLayerMsg: function () {
                // this.showLayerMsg = true;
                layer.open({
                    type: 1,
                    title: "Hello",
                    content: $("#vueMsgDialog"),
                })
            },
            layerCounterInc: function() {
                this.layerCounter++;
            },
            layerCounterInc2: function(item) {
                item.value++;
            },
        },
        filters: {
            toUpperCase: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.toUpperCase();
            },
            length: function (value) {
                if (!value) return 0;
                return value.length;
            },
            appendStr: function (arg1, arg2, arg3) {
                return arg1 + arg2 + arg3;
            }
        },
        // 生命周期
        beforeCreated: function () {

        },

        created: function () {

        },

        beforeMount: function () {
            // 编译完成 
        },

        mounted: function () {
            // 模型加载完毕， 渲染之前
        },

        beforeDestroy: function () {

        },

        destroyed: function () {
            //
        }
    });

    app.files.push("pushed file");

    (function() {
        var minLevel = 10;
        var elements = [];

        $("h1,h2,h3:not(.card-title),h4").each(function (idx, ele) {
            $(ele).attr("id", "heading-" + idx);
            var tagName = $(ele)[0].tagName.toUpperCase();
            var level = parseInt(tagName.substring(1));
            minLevel = Math.min(minLevel, level);
        });

        $("h1,h2,h3:not(.card-title),h4").each(function (idx, ele) {
            var tagName = $(ele)[0].tagName.toUpperCase();
            var level = parseInt(tagName.substring(1));
            var heading = {
                id: $(ele).attr("id"),
                name: $(ele).text(),
                href: "#" + $(ele).attr("id"),
                marginLeft: (level-minLevel) * 20 + "px",
            }
            app.headingList.push(heading);
        });
    })();

</script>

{% end %}
