<template>
    <scroller>
        <wxc-panel title="picker module" type="primary">
            <text style="margin-bottom: 20px;">pick value: {{value}}</text>
            <wxc-button type="primary" onclick="{{pick}}" value="single pick" style="margin-bottom: 20px;"></wxc-button>
            <wxc-button type="primary" onclick="{{pickDate}}" value="pickDate" style="margin-bottom: 20px;"></wxc-button>
            <wxc-button type="primary" onclick="{{pickTime}}" value="pickTime"></wxc-button>
        </wxc-panel>

        <wxc-panel title="input component" type="primary">
            <text>onchange: {{txtChange}}</text>
            <input
                    type="date"
                    placeholder="select date"
                    class="input"
                    autofocus="false"
                    value=""
                    onchange="onchange"
                    max = "2029-11-28"
                    min = "2015-11-28"
            />
            <input
                    type="time"
                    placeholder="select time"
                    class="input"
                    autofocus="false"
                    value=""
                    onchange="onchange"
            />
        </wxc-panel>
    </scroller>
</template>

<style>
    .input {
        font-size: 60px;
        height: 80px;
        width: 400px;
    }
</style>

<script>
    require('weex-components');
    module.exports = {
        data: {
            value: '',
            index: 0,
            txtChange: ''
        },
        methods: {
            pick: function() {
                var picker = require('@weex-module/picker');
                var items = new Array("Saab","Volvo","BMW");
                var self = this;
                picker.pick({
                    'items':items,
                    'index':self.index
                },function (ret) {
                    var result = ret.result;
                    if(result == 'success')
                    {
                        self.value = items[ret.data];
                        self.index = ret.data;
                    }
                });

            },
            pickDate: function() {
                var picker = require('@weex-module/picker');
                var self = this;
                picker.pickDate({
                    'value':'2016-11-28',
                    'max':'2029-11-28',
                    'min':'2015-11-28'
                },function (ret) {
                    var result = ret.result;
                    if(result == 'success')
                    {
                        self.value = ret.data;
                    }
                });
            },
            pickTime: function() {
                var picker = require('@weex-module/picker');
                var self = this;
                picker.pickTime({
                    'value':'19:24'
                },function (ret) {
                    var result = ret.result;
                    if(result == 'success')
                    {
                        self.value = ret.data;
                    }
                });
            },
            onchange: function(event) {
                this.txtChange = event.value;
                console.log('onchange', event.value);
            }
        }
    }
</script>