<template>
    <div>
        <van-nav-bar
                title="datetimePicker"
                left-arrow
                @click-left="back"
        />
        <div class="page">
            <ul>
                <li class="section">
                    <y-datetime-picker :columns="a1" :visible-item-count="5" v-model="r1" max-date="now"></y-datetime-picker>
                </li>
                <li class="section">
                    <y-datetime-picker :columns="a1"
                                       :visible-item-count="5"
                                       type="dateHour"
                                       date-format="YYYY-mm-dd hh:ii"
                                       :hour-pools="[6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]"
                                       v-model="r2"
                                       max-date="now"></y-datetime-picker>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {NavBar} from 'vant';
    import yDatetimePicker from '../components/yDatetimePicker'

    export default {
        components: {
            [NavBar.name]: NavBar,
            yDatetimePicker
        },
        data: () => {
            return {
                r1: new Date().getTime(),
                r2: new Date().getTime(),
                r3: "hangzhou",
                r4: {
                    0:"ningbo",
                    1:"广西"
                },
                a1: ["广东", '广西', '浙江', '青海', '四川', '甘肃', '河北', '内蒙古', '黑龙江', '吉林', '浙江'],
                a2: ["广州", '杭州', '宁波', '温州', '嘉兴', '湖州', '北京', '深圳', '上海', '青海', '四川'],
                a3: [
                    {
                        value: "广州",
                        key: "guangzhou"
                    },
                    {
                        value: "杭州",
                        key: "hangzhou"
                    },
                    {
                        value: "宁波",
                        key: "ningbo"
                    },
                    {
                        value: "温州",
                        key: "wenzhou"
                    },
                    {
                        value: "嘉兴",
                        key: "jiaxing"
                    },
                    {
                        value: "湖州",
                        key: "chaozhou"
                    },
                ],
                a4: [
                    {
                        values: [
                            {
                                value: "广州",
                                key: "guangzhou"
                            },
                            {
                                value: "杭州",
                                key: "hangzhou"
                            },
                            {
                                value: "宁波",
                                key: "ningbo"
                            },
                            {
                                value: "温州",
                                key: "wenzhou"
                            },
                            {
                                value: "嘉兴",
                                key: "jiaxing"
                            },
                            {
                                value: "湖州",
                                key: "chaozhou"
                            },],
                        className:"a1"
                    },{
                        values: ["广东", '广西', '浙江', '青海', '四川', '甘肃', '河北', '内蒙古', '黑龙江', '吉林', '浙江'],
                        className:"a2"
                    }
                ],
            }
        },
        methods: {
            "fn_click"(e) {
            },
            back: () => {
                window.history.go(-1);
            }
        },
    }
</script>

<style lang="scss">
    .page {
        padding: 10px;
    }

    .test {
        width: 400px;
        text-align: left;
    }
</style>
