<template>
    <div>
        <van-nav-bar
                title="picker"
                left-arrow
                @click-left="back"
        />
        <div class="page">
            <ul>
                <li class="section">
                    <div>{{r1}}</div>
                    <y-picker :columns="a1" :visible-item-count="5" :value-key="r1" @update:valueKey="val=>r1=val"></y-picker>
                </li>
                <hr/>
                <li class="section">
                    <div>{{r3}}</div>
                    <y-picker :columns="a3" :visible-item-count="5" v-model="r3"></y-picker>
                </li>
                <hr/>
                <li class="section">
                    <div>{{r4}}</div>
                    <y-picker :columns="a4" :visible-item-count="5" v-model="r4"></y-picker>
                </li>
                <hr/>
                <li class="section">
                    <div>{{r5}}</div>
                    <y-picker :columns="a5" :visible-item-count="5" v-model="r5" is-combo></y-picker>
                </li>
            </ul>
        </div>
    </div>
</template>

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

    export default {
        components: {
            [NavBar.name]: NavBar,
            yPicker
        },
        data: () => {
            return {
                r1: "浙江",
                r3: "hangzhou",
                r4: "",
                r5:["广西","广西2","广西2-2"],
                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"
                    }
                ],
                a5: [
                    {
                        values:[
                            {
                                value: "广东",
                                key: "广东",
                                children:[
                                    {
                                        key:"1",
                                        value:"广东1",
                                        children:[
                                            {
                                                key:"11",
                                                value:"广东1-1"
                                            },
                                            {
                                                key:"12",
                                                value:"广东1-2"
                                            },
                                            {
                                                key:"13",
                                                value:"广东-3"
                                            },
                                            {
                                                key:"14",
                                                value:"广东-4"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                value: "广西",
                                key: "广西",
                                children:[
                                    {
                                        key:"2",
                                        value:"广西",
                                        children:[
                                            {
                                                key:"21",
                                                value:"广西-1"
                                            },
                                            {
                                                key:"22",
                                                value:"广西-2"
                                            },
                                            {
                                                key:"23",
                                                value:"广西-3"
                                            },
                                        ]
                                    }
                                ]
                            },
                            {
                                value: "浙江",
                                key: "浙江",
                                children:[
                                    {
                                        key:"浙江",
                                        value:"浙江",
                                        children:[
                                            {
                                                key:"浙江-1",
                                                value:"浙江-1"
                                            },
                                            {
                                                key:"浙江-2",
                                                value:"浙江-2"
                                            },
                                            {
                                                key:"浙江-3",
                                                value:"浙江-3"
                                            },
                                        ]
                                    },
                                    {
                                        key:"浙江1",
                                        value:"浙江1",
                                        children:[
                                            {
                                                key:"浙江1-1",
                                                value:"浙江1-1"
                                            },
                                            {
                                                key:"浙江1-2",
                                                value:"浙江1-2"
                                            },
                                            {
                                                key:"浙江1-3",
                                                value:"浙江1-3"
                                            },
                                        ]
                                    },
                                    {
                                        key:"浙江2",
                                        value:"浙江2",
                                        children:[
                                            {
                                                key:"浙江2-1",
                                                value:"浙江2-1"
                                            },
                                            {
                                                key:"浙江2-2",
                                                value:"浙江2-2"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                value: "青海",
                                key: "青海",
                                children:[
                                    {
                                        key:"青海",
                                        value:"青海",
                                        children:[
                                            {
                                                key:"青海-1",
                                                value:"青海-1"
                                            },
                                            {
                                                key:"青海-2",
                                                value:"青海-2"
                                            },
                                            {
                                                key:"青海-3",
                                                value:"青海-3"
                                            },
                                        ]
                                    },
                                    {
                                        key:"青海1",
                                        value:"青海1",
                                        children:[
                                            {
                                                key:"青海1-1",
                                                value:"青海1-1"
                                            },
                                            {
                                                key:"青海1-2",
                                                value:"青海1-2"
                                            },
                                            {
                                                key:"青海1-3",
                                                value:"青海1-3"
                                            },
                                        ]
                                    },
                                    {
                                        key:"青海2",
                                        value:"青海2",
                                        children:[
                                            {
                                                key:"青海2-1",
                                                value:"青海2-1"
                                            },
                                            {
                                                key:"青海2-2",
                                                value:"青海2-2"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ],
                        comboNum:3,
                        //labels:["省","市","区"]
                    }
                ],
            }
        },
        methods: {
            "fn_click"(e) {
            },
            back: () => {
                window.history.go(-1);
            }
        },
    }
</script>

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

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