var vm = new Vue({
    el:"#school-list",
    data:{
        loading:false,
        allSchools:[],
        vsSchools:[],
        page:0,
        uniOrCollege:'university',
        localProvinceRange:['山东省', '浙江省', '广东省', '海南省', '辽宁省'],
        uniProvince:['北京', '天津', '河北', '山西', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '重庆', '四川', '陕西', '内蒙古','广西','海南','贵州','云南','西藏','甘肃','青海','宁夏','新疆','台湾','香港','澳门'],
        uniType:['综合','理工','农林','医药','师范','语言','财经','政法','体育','艺术','民族','军事','其他'],
        uniProperty:['公立','民办','中外合作办学','内地与港澳台地区合作办学'],
        universityTags: ['C9','985','211','保研资格','研究生院','教育部直属','中央部属','强基计划','世界一流大学建设高校','世界一流学科建设高校'],
        collegeTags: ['中央部属','高水平学校建设单位(A档)','高水平学校建设单位(B档)','高水平学校建设单位(C档)','高水平专业群建设单位(A档)','高水平专业群建设单位(B档)','高水平专业群建设单位(C档)'],
        uniTags:[],
        searchWords: '',
        sortBy: 'id',
        signature:'',
    },
    methods: {
        getSignature(){
            this.signature = this.getCookie('signature')
        },
        switchUniOrCollege(){
            this.uniOrCollege = this.uniOrCollege == 'university' ? 'college' : 'university';
            if(this.uniOrCollege == 'university'){
                this.uniTags = this.universityTags;
            }else{
                this.uniTags = this.collegeTags;
            }
            this.initSchool();
        },
        search(){
            document.getElementById("form").reset();

            //start to search data
            this.initSchool();
        },
        //school change listener
        schoolChangeListener(e){
            //judge click from
            if((e.target).tagName != "LABEL"){
                //console.log((e.target).tagName)

                this.allSchools = [];
                this.page = 0;
                this.getSchoolData();
            }
            
        },
        //init filter parameter
        initSchool(){
            this.allSchools = [];
            this.page = 0;
            this.getSchoolData();
        },
        // get form data
        getSchoolData(){
            // set loading status
            this.loading = true;

            // start to get school data
            setTimeout(() => {
                const formDom = document.getElementById("form");
                let formData = new FormData(formDom);
                //ajax call
                this.ajaxInvoke(formData);
            }, 33);
            this.page++;
        },
        // ajax post
        ajaxInvoke(formData){
            let Ajax = new XMLHttpRequest();
            let url = 'https://api.suscoo.com/gaokao/api.school/filter';
            Ajax.open("POST", url);
            formData.append('page',this.page);
            formData.append('item',this.uniOrCollege);
            formData.append('sort',this.sortBy);
            formData.append('search',this.searchWords);
            formData.append('signature',this.signature);
            Ajax.send(formData);
            Ajax.onreadystatechange = ()=> {
                if(Ajax.readyState==4){
                    //console.log(Ajax.responseText);
                    let data = Ajax.responseText;
                    data = atob(data);
                    if(JSON.parse(data).code == '400'){
                        alert('页面停留太久，请刷新...');
                    }
                    let res = JSON.parse(data).data;
                    let code = res.uni_code;
                    this.allSchools = this.allSchools.concat(res);

                    // get the result,close the loading bar
                    this.loading = false;

                    //add web detail information
                    this.addWebInfo()
                }
            }
        },
        addWebInfo(){
            // add web information
            let num = this.allSchools.length;
            // edit loading message
            if(num ==0){
                document.getElementById("loading").innerHTML = "o(╥﹏╥)o，没找到结果，换个条件吧...";
            }else{
                document.getElementById("loading").innerHTML = "点击加载更多...";
            }

            //add web information
            for (let index = 0; index < num; index++) {
                let code = this.allSchools[index].uni_code;
                this.getWebInfo(index, code);
            }
        },
        // add university to vs
        addToVs(e){
            // console.log(e.target.attributes[0].value)
            id = e.target.attributes[0].value

            if(this.vsSchools.indexOf(this.allSchools[id]) < 0){
                if(this.vsSchools.length < 5){
                    this.vsSchools = this.vsSchools.concat(this.allSchools[id])
                }else{
                    alert('最多支持5个院校对比哦~')
                }
                
            }
        },
        // clear vs schools
        clearVsItems(){
            this.vsSchools = []
        },
        // create vs schools result
        createVsResult(){
            vsSchoolsCode = ''
            for (let index = 0; index < this.vsSchools.length; index++) {
                const element = this.vsSchools[index].uni_code;
                vsSchoolsCode = vsSchoolsCode + '|' + element
            }

            this.setCookie("vsSchoolsCk", vsSchoolsCode)

            // open new tab
            window.open("/university-all/compare.php",'_blank')
        },
        // set cookie
        setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/";
        },
        // get cookie
        getCookie(cname){
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) 
            {
                var c = ca[i].trim();
                if (c.indexOf(name)==0) return c.substring(name.length,c.length);
            }
            return "";
        },
        // get web school information
        getWebInfo(index, code){
            let Ajax = new XMLHttpRequest();
            let url = '/index.php?m=api&c=school&a=info';
            Ajax.open("POST", url);
            let postData = 'code=' + code;
            Ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            Ajax.send(postData);
            Ajax.onreadystatechange = ()=> {
                if(Ajax.readyState==4){
                    let data = Ajax.responseText;
                    res = JSON.parse(data).data;
                    
                    //set school detail info
                    if(res[0] != undefined && res[0] != "" && vm.allSchools[index]){
                        Vue.set( vm.allSchools[index], "webUrl", res[0].url);
                        Vue.set( vm.allSchools[index], "webThumb", res[0].thumb);
                        Vue.set( vm.allSchools[index], "views", res[0].views);
                    }
                }
            }
        },
        pressEnter(){
            document.addEventListener("keydown", (event)=> {
                // enter to search
                if (event.code === 'Enter') {
                    this.search();
                }
            })
        },
        loadingMore(){
            let num = this.allSchools.length;
            if(num > 100){
                alert('小主，您操作太频繁啦，休息一下继续...');
            }else{
                this.getSchoolData();
            }
        }
    },
    mounted(){
        // init get signature
        this.getSignature();

        // init uniTags
        this.uniTags = this.universityTags;

        // get school information
        this.initSchool();
        
        //deal with press enter button
        this.pressEnter();
    },
});