vue.component('mw-select', {
    template: '\
        <div class="mw-select">\
            <div class="mw-select-title" @click.stop="showlist = !showlist">{{ selected.text }}</div>\
            <ul class="mw-select-options" v-show="showlist" ref="options">\
                <slot></slot>\
            </ul>\
        </div>\
    ',
    data: function () {
        return {
            list: [],
            showlist: false
        };
    },
    mounted: function () {
        var options = this.$refs['options'].getelementsbytagname('li');
        if (options.length > 0) {
            for (var i = 0; i < options.length; i++) {
                this.list.push({
                    value: options[i].getattribute('value'),
                    selected: options[i].getattribute('selected'),
                    text: options[i].innerhtml
                });
            }
        }
        var the = this;
        document.addeventlistener('click', function (e) {
            if (the.showlist) {
                the.showlist = false
            }

        });
    },
    computed: {
        selected: function () {
            if (this.list.length > 0) {
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].selected) {
                        return this.list[i];
                    }
                }
                return this.list[0];
            }
            return {
                value: null,
                selected: null,
                text: ''
            };
        }
    },
    methods: {
        handleclick: function (value) {
            var option = this.$refs['options'].getelementsbyclassname('mw-select-option');
            for (var i = 0; i < option.length; i++) {
                option[i].removeattribute('selected');
            }
            this.list.foreach(function (item, index) {
                item.selected = null
                if (item.value === value) {
                    item.selected = 'selected'
                    option[index].setattribute('selected', 'selected');
                }
            });
            this.showlist = false;
        }
    }
});

vue.component('mw-option', {
    template: '<li class="mw-select-option" :selected="selected" :value="value" @click="onclick"><slot></slot></li>',
    props: {
        value: {
            type: [string, number],
            required: true
        },
        selected: boolean
    },
    methods: {
        onclick: function () {
            this.$parent.handleclick(this.value);
        }
    }
});

new vue({
    el: '#root',
    data: {
        shownav: false,
        allswiper: [],
        showjobs: {},
        showtable: {}
    },
    mounted: function () {
        var the = this;
        object.keys(this.$refs).foreach(function (item, index) {
            if (item.indexof('swiper-') === 0) {
                the.allswiper[item] = the.newswiper(the.$refs[item].getattribute('class'));
            }
        });

    },
    methods: {
        newpostion: function (name) {
            if (this.showjobs[name]) {
                this.showjobs[name] = !this.showjobs[name]
            } else {
                this.showjobs = {};
                this.$set(this.showjobs, name, true);
            }
        },
        newspopu: function (name) {
            this.$set(this.showtable, name, true);
        },
        showmobilenav: function () {
            this.shownav = !this.shownav;
        },
        newswiper: function (elem) {
            var pgbox = document.getelementsbyclassname(elem + '-pg');
            var options;
            if (pgbox.length > 0) {
                options = {
                    loop: true,
                    calculateheight: true,
                    csswidthandheight: 'height',
                    pagination: '.' + elem + '-pg',
                    grabcursor: true,
                    paginationclickable: true
                }
            } else {
                options = {
                    loop: true,
                    calculateheight: true,
                    csswidthandheight: 'height'
                }
            }
            return new swiper('.' + elem, options);
        },
        swipernext: function (key) {
            if (this.allswiper[key]) {
                this.allswiper[key].swipenext();
            }
        },
        swiperprev: function (key) {
            if (this.allswiper[key]) {
                this.allswiper[key].swipeprev();
            }
        }
    }
})