<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
    <script src="../dist/2.0/fineui.js"></script> -->
    <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/>
    <script src="http://localhost:9001/fineui.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
    var ParentModel = BI.inherit(BI.Model, {
        state: function () {
            return {
                widget: {
                    name: "触发arr和dims变化",
                    arr: [],
                    dims: [],
                }
            };
        },
        watch: {
            'widget.**': function () {
                console.log(Math.random().toFixed(3) + ': widget.** changed');
            }
        },

        childContext: ["widget"],

    });
    BI.model("demo.model.parent", ParentModel);

    var Parent = BI.inherit(BI.Widget, {

        _store: function () {
            return BI.Models.getModel('demo.model.parent');
        },

        render: function () {
            return {
                type: "bi.vertical",
                bgap: 10,
                items: [{
                    type: 'bi.label',
                    text: '父组件watch widget.**, 子组件watch了widget.arr, 修改widget中arr和dims的先后顺序不一样,会导致watch顺序不一样。'
                }, {
                    type: 'bi.label',
                    text: '不应该在修改属性,watch到修改后,还修改配置,或者使用同步watch把配置修改全'
                }, {
                    type: 'demo.child'
                }],
                text: function () {
                    return this.model.name;
                }
            };
        }
    });
    BI.shortcut("demo.parent", Parent);

    var ChildModel = BI.inherit(BI.Model, {

        context: ["widget"],

        watch: {
            arr: {
                handler: function () {
                    console.log(Math.random().toFixed(3) + ': arr changed');
                },
                sync: false // 改成true 同步watch 修改也行
            }
        },

        computed: {
            arr: function () {
                return this.model.widget.arr;
            },
            dims: function () {
                return this.model.widget.dims;
            }
        },

        actions: {
            addArrFirst: function () {
                // 修改arr在前,先触发arr的watch 再触发widget.**的监听
                this.model.widget.arr.push(BI.UUID());
                this.model.widget.dims.push(BI.UUID());

            },
            addDimFirst: function () {
                // 修改dim在前先执行 widget.** 再出发arr的watch
                this.model.widget.dims.push(BI.UUID());
                this.model.widget.arr.push(BI.UUID());
            }
        }
    });
    BI.model("demo.model.child", ChildModel);

    var Child = BI.inherit(BI.Widget, {

        _store: function () {
            return BI.Models.getModel('demo.model.child');
        },

        render: function () {
            var self = this;
            return {
                type: 'bi.left',
                rgap: 20,
                items: [{
                    type: "bi.button",
                    text: '先修改widget.arr',
                    handler: function () {
                        self.store.addArrFirst();
                    }
                }, {
                    type: "bi.button",
                    text: '先修改widget.dims',
                    handler: function () {
                        self.store.addDimFirst();
                    }
                }]
            };
        }
    });
    BI.shortcut("demo.child", Child);


    BI.createWidget({
        type: "bi.absolute",
        items: [{
            el: {
                type: "demo.parent"
            },
            top: 100,
            left: 100
        }],
        element: "#wrapper"
    });
</script>
</body>
</html>