jy/src/web/staticres/vipsubscribe/js/updateArea.js

$(function () {
    // 后端数据结构
//  var areaData = {
//      'data': {
//          // 选择的数量
//          'area': {
//              '北京': [],
//              '河南': [
//                  '洛阳市',
//                  '驻马店市',
//                  '周口市',
//                  '郑州市'
//              ],
//              '湖南':['长沙市'],
//              '澳门': [],
//              '甘肃': []
//          },
//          'buyset': {
//              // 购买的全省的数量(不带市)
//              'areacount': 7,
//              'buyerclasscount': 11,
//              // 购买的城市
//              'citys': {
//                  '河南': 4,
//                  '湖南': 3,
//                  '吉林': 2
//              }
//          }
//      },
//      'errMsg': '',
//      'success': true
//  };
    var areaData = {
        'data': {
            // 选择的数量
            'area': {},
            'buyset': {
                // 购买的全省的数量(不带市)
                'areacount': 7,
                'buyerclasscount': 11,
                // 购买的城市
                'citys': {}
            }
        },
        'errMsg': '',
        'success': true
    };
    

    // 已经购买过的城市数量
    var alreadyBuy = {
        province: {
            totalCount: 0,
            selectedCount: 0
        },
        city: {
            totalCount: 0,
            selectedCount: 0
        }
    }
    // 新增城市数量（排除修改的数量）
    var newlyAdded = {
        province: 0,
        city: 0
    }
	
    // ----------------- 以下定义功能函数 ----------------------------
    function createMoreCity(arr) {
        var tempHtml = arr.map(function (v) {
            return '<button class="city">' + v.name + '</button>'
        }).join('')
        return tempHtml
    }

    // 新增求值 ---- 统计数量，不做视图操作
    function getResult0(callback) {
        if (areaData.data.buyset.areacount === -1) {
            $('.result_text.add_new .added-info').hide()
            return
        }
        // 升级新增清空
        $('.result_text.add_new .added-info').text('')

        var isWholeSelected = $('.tab.whole input').is(':checked')
        var isWholeDisabled = $('.tab.whole input').prop('disabled')
        
        // 已购买省份改变的数量
        var dBuySetProvinceCount = 0
        // 新增省份改变的数量
        var dAddedProvinceCount = 0
        
        // 已购买城市改变的数量
        var dBuySetCityCount = 0
        // 新增城市的数量
        var dAddedCityCount = 0
        $('.area-list li:not(.index)').each(function(i, dom){
            if ($(dom).children('.tab').hasClass('whole')) return true
            // 统计非全国的数量
            // 没有'data-buy-city-count'属性的 $(dom).attr('data-buy-city-count') 为undefined
            if ($(dom).attr('data-buy-city-count')) {
                /********  此处判断的是已购买的城市下的  ********************/
                // 获取购买城市的数量
                var buyCount = $(dom).attr('data-buy-city-count') - 0   // 隐式转换成Number
                // 获取城市不可点击的数量
                var alreadySelectedCount = $(dom).find('button[disabled]').length
                // 选择城市的数量(包括不可点击的)
                var hasActiveCount = $(dom).find('button.active').length

                if (hasActiveCount > buyCount) {
                    // dBuySetCityCount += buyCount
                    // dAddedCityCount += (hasActiveCount - buyCount)

					if (alreadySelectedCount - hasActiveCount === 0) {
						dBuySetCityCount += buyCount
						dBuySetProvinceCount ++
					} else {
						dBuySetCityCount += buyCount
						dAddedCityCount += (hasActiveCount - buyCount)
					}
                } else {
                    // 操作已购买的数量
                    dBuySetCityCount += hasActiveCount
                }
            } else {
                // 是不是直辖市或自治区，在有data-buy-count没必要判断
                var hasCities = $(dom).find('.tab').hasClass('municipality')
                // 是否购买过该省份(还需要判断该省份下面的城市是否全部disabled --- 同时满足才算购买过全省)
                var provinceInput = $(dom).find('input')
                // 循环着的当前的省份是否可选 和 是否被选中
                var isBoughtProvince = provinceInput.prop('disabled')
                var isChecked = provinceInput.is(':checked')

                // 可得到已经购买的省份的数量(循环完成后可得到，循环过程中的值可能不全)

                // 判断是否为购买过的城市
                if (isBoughtProvince) {
                    // 将已购买(选中但不能单击的)城市选中
                    if (isChecked) {
                        dBuySetProvinceCount ++
                    }
                } else {
                    // 判断是否是直辖市或自治区(省份下面没有城市的和有城市的分开计算)
                    if (hasCities) {
                        // 直辖市、自治区 -----直接进行省份的操作
                        // 并且没有购买过该省的，并且选中的
                        if (isChecked) {
                            dAddedProvinceCount ++
                        }
                    } else {
                        // 带有市的省份城市(该省份下以前没有购买过任何城市)
                        // 两种情况：1. 全选    2. 不全选
                        var allCityLength = $(dom).find('button').length
                        var otherTotalAddCount = $(dom).find('button.active').length

                        if (allCityLength === otherTotalAddCount && isChecked) {
                            // 选中了省份下的所有城市
                            dAddedProvinceCount ++
                        } else {
                            // 对城市做新增操作
                            dAddedCityCount += otherTotalAddCount
                        }
                    }
                }
            }
        })

        // 循环完成判断已经选择的省份数量 是否 大于购买过的数量
        if (dBuySetProvinceCount + dAddedProvinceCount > alreadyBuy.province.totalCount) {
            // 如果已选择的数量和新增的数量大于已购买过的数量，说明我有购买新的城市
            dAddedProvinceCount -= (alreadyBuy.province.totalCount - dBuySetProvinceCount)
            dBuySetProvinceCount = alreadyBuy.province.totalCount
        } else {
            dBuySetProvinceCount += dAddedProvinceCount
            dAddedProvinceCount = 0
        }

        // 已购买城市下选项改变，状态更新
        alreadyBuy.city.selectedCount = dBuySetCityCount
        newlyAdded.city = dAddedCityCount

        alreadyBuy.province.selectedCount = dBuySetProvinceCount
        newlyAdded.province = dAddedProvinceCount

        callback && callback()

        setDataInResult()

        // 全国被选中了
        if (isWholeSelected && !isWholeDisabled) {
            $('.result_text.add_new .added-info').text('全国')
            $('.result_text.add_new').show()
            isLockedTipButtons(false)
        }
    }
	
	
	
	// 新增求值 ---- 统计数量，不做视图操作
	function getResult(callback) {
	    if (areaData.data.buyset.areacount === -1) {
	        $('.result_text.add_new .added-info').hide()
	        return
	    }
	    // 升级新增清空
	    $('.result_text.add_new .added-info').text('')
	
	    var isWholeSelected = $('.tab.whole input').is(':checked')
	    var isWholeDisabled = $('.tab.whole input').prop('disabled')
	    
	    // 已购买省份改变的数量
	    var dBuySetProvinceCount = 0
	    // 新增省份改变的数量
	    var dAddedProvinceCount = 0
	    
	    // 已购买城市改变的数量
	    var dBuySetCityCount = 0
	    // 新增城市的数量
	    var dAddedCityCount = 0
	    $('.area-list li:not(.index)').each(function(i, dom){
	        if ($(dom).children('.tab').hasClass('whole')) return true
	        // 统计非全国的数量
	        // 没有'data-buy-city-count'属性的 $(dom).attr('data-buy-city-count') 为undefined
	        if ($(dom).attr('data-buy-city-count')) {
	            /********  此处判断的是已购买的城市下的  ********************/
	            // 获取购买城市的数量
	            var buyCount = $(dom).attr('data-buy-city-count') - 0   // 隐式转换成Number
	            // 获取城市不可点击的数量
	            var alreadySelectedCount = $(dom).find('button[disabled]').length
	            // 选择城市的数量(包括不可点击的)
	            var hasActiveCount = $(dom).find('button.active').length
				var allCitylength = $(dom).find('button').length
	
	            if (hasActiveCount > buyCount) {
					if (alreadySelectedCount - hasActiveCount === 0) {
						dBuySetCityCount += buyCount
						dBuySetProvinceCount ++
					} else if (allCitylength === hasActiveCount) {
						// 如果选中全省,则多修改
						dBuySetCityCount += buyCount
						dAddedProvinceCount ++
					} else {
						dBuySetCityCount += buyCount
						dAddedCityCount += (hasActiveCount - buyCount)
					}
	            } else {
	                // 操作已购买的数量
	                dBuySetCityCount += hasActiveCount
	            }
	        } else {
	            // 是不是直辖市或自治区，在有data-buy-count没必要判断
	            var hasCities = $(dom).find('.tab').hasClass('municipality')
	            // 是否购买过该省份(还需要判断该省份下面的城市是否全部disabled --- 同时满足才算购买过全省)
	            var provinceInput = $(dom).find('input')
	            // 循环着的当前的省份是否可选 和 是否被选中
	            var isBoughtProvince = provinceInput.prop('disabled')
	            var isChecked = provinceInput.is(':checked')
	
	            // 可得到已经购买的省份的数量(循环完成后可得到，循环过程中的值可能不全)
	
	            // 判断是否为购买过的城市
	            if (isBoughtProvince) {
	                // 将已购买(选中但不能单击的)城市选中
	                if (isChecked) {
	                    dBuySetProvinceCount ++
	                }
	            } else {
	                // 判断是否是直辖市或自治区(省份下面没有城市的和有城市的分开计算)
	                if (hasCities) {
	                    // 直辖市、自治区 -----直接进行省份的操作
	                    // 并且没有购买过该省的，并且选中的
	                    if (isChecked) {
	                        dAddedProvinceCount ++
	                    }
	                } else {
	                    // 带有市的省份城市(该省份下以前没有购买过任何城市)
	                    // 两种情况：1. 全选    2. 不全选
	                    var allCityLength = $(dom).find('button').length
	                    var otherTotalAddCount = $(dom).find('button.active').length
	
	                    if (allCityLength === otherTotalAddCount && isChecked) {
	                        // 选中了省份下的所有城市
	                        dAddedProvinceCount ++
	                    } else {
	                        // 对城市做新增操作
	                        dAddedCityCount += otherTotalAddCount
	                    }
	                }
	            }
	        }
	    })
	
	    // 循环完成判断已经选择的省份数量 是否 大于购买过的数量
	    if (dBuySetProvinceCount + dAddedProvinceCount > alreadyBuy.province.totalCount) {
	        // 如果已选择的数量和新增的数量大于已购买过的数量，说明我有购买新的城市
	        dAddedProvinceCount -= (alreadyBuy.province.totalCount - dBuySetProvinceCount)
	        dBuySetProvinceCount = alreadyBuy.province.totalCount
	    } else {
	        dBuySetProvinceCount += dAddedProvinceCount
	        dAddedProvinceCount = 0
	    }
	
	    // 已购买城市下选项改变，状态更新
	    alreadyBuy.city.selectedCount = dBuySetCityCount
	    newlyAdded.city = dAddedCityCount
	
	    alreadyBuy.province.selectedCount = dBuySetProvinceCount
	    newlyAdded.province = dAddedProvinceCount
	
	    callback && callback()
	
	    setDataInResult()
	
	    // 全国被选中了
	    if (isWholeSelected && !isWholeDisabled) {
	        $('.result_text.add_new .added-info').text('全国')
	        $('.result_text.add_new').show()
	        isLockedTipButtons(false)
	    }
	}
	
	

    function setDataInResult() {
        var buySetInfo = {
            p: "省级区域"+alreadyBuy.province.selectedCount+"/"+alreadyBuy.province.totalCount,
            c: "地市"+alreadyBuy.city.selectedCount+"/"+alreadyBuy.city.totalCount
        }
        var addedInfo = {
            p: "省级区域 "+newlyAdded.province,
            c: "地市 "+newlyAdded.city
        }

        // 修改数量并进行重新赋值
		if (alreadyBuy.city.totalCount === 0) {
			// 只买了省级区域
			$('.result_text.already .buy-set-info').text(buySetInfo.p)
		} else if (alreadyBuy.province.totalCount === 0){
			// 只买了市
			$('.result_text.already .buy-set-info').text(buySetInfo.c)
		} else {
			$('.result_text.already .buy-set-info').text(buySetInfo.p+"、"+buySetInfo.c)
		}
        
        // 升级新增赋值
		if (newlyAdded.city === 0) {
			// 只买了省级区域
			$('.result_text.add_new .added-info').text(addedInfo.p)
		} else if (newlyAdded.province === 0){
			// 只买了市
			$('.result_text.add_new .added-info').text(addedInfo.c)
		} else {
			$('.result_text.add_new .added-info').text(addedInfo.p+"、"+addedInfo.c)
		}

        if (newlyAdded.province !== 0 || newlyAdded.city !== 0) {
            $('.result_text.add_new').show()
            isLockedTipButtons(false)
        } else {
            $('.result_text.add_new').hide()
            isLockedTipButtons(true)
        }
    }

    // 求需要M的数量
	// window.getResultWithMCount = getResultWithMCount
    function getResultWithMCount() {
        var added = {
            country: 0,
            province: 0,
            city: {
                // '河南': 1,
                // '吉林': 1
            }
        }
		var allDisabledButHasCityCount = {}
        // 购买过的省份数量
        var buySetProvinceCount = $('.area-list').attr('data-buy-province-count') - 0  // 隐式转换成Number
        
        $('.area-list li:not(.index)').each(function(i, dom) {
            if ($(dom).children('.tab').hasClass('whole')) {
                // 判断是否被选中
                if ($(dom).find('input.other').is(':checked')) {
                    added.country = -1
                    added.province = 0
                    added.city = {}
                    return false
                }
            } else {
                added.country = 0
                var pName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
                // 获取当前dom下有几个按钮有active样式(点亮和灰色按钮的总数)
                var activeButtonLength = $(dom).find('button.active').length
				var allCitylength = $(dom).find('button').length

                // 判断该省是否有购买过的城市
                if ($(dom).attr('data-buy-city-count')) {
                    var buyCityCount = $(dom).attr('data-buy-city-count') - 0
					// 获取城市不可点击的数量(灰色按钮的数量)
					var alreadySelectedCount = $(dom).find('button[disabled]').length
					// 得到你需要付钱的数量(可能是负值)
                    var aCityCount = activeButtonLength - buyCityCount
					
                    if (aCityCount > 0) {
						// 说明有购买的城市
						if (activeButtonLength - alreadySelectedCount === 0) {
							added.province ++
							allDisabledButHasCityCount[pName] = buyCityCount
						} else if (activeButtonLength === allCitylength) {
							// if(alreadySelectedCount < activeButtonLength){
							// 	allDisabledButHasCityCount[pName] = buyCityCount
							// }
							added.province ++
						} else {
							added.city[pName] = aCityCount
						}
                    } else {
                        // 选不到购买的个数
                    }
                } else {
                    // 判断是否是直辖市
                    var isMunicipality = $(dom).find('.tab').hasClass('municipality')
                    var allCitylength = $(dom).find('button').length

                    if (isMunicipality) {
                        if ($(dom).find('input').is(':checked')) {
                            added.province ++
                        }
                    } else {
                        if (activeButtonLength === allCitylength) {
                            added.province ++
                        } else {
                            if (activeButtonLength !== 0) added.city[pName] = activeButtonLength
                        }
                    }
                }
            }
        })

        // 循环完成判断计算省份
        var aProvinceCount = added.province - buySetProvinceCount
        if (aProvinceCount > 0) {
            added.province = aProvinceCount
        } else {
            added.province = 0
        }
        return { added, allDisabledButHasCityCount }
    }

    // 点亮的城市数量详情(需要省和城市名称)
    function getActiveCityDetail(state = '') {
        var isWholeCountry = $('.tab.whole input').is(':checked')
        if (isWholeCountry) {
            // 选择全国
            var str = $('.area-list li .tab.whole .province').text().replace(/\s+ | [\r\n]/g, '')
            var obj = {}
            obj[str] = []
            return obj
        } else {
            var arr = []
            $('.area-list li:not(.index)').each(function(i, dom) {
                if ($(dom).children('.tab').hasClass('whole')) return
                var isMunicipality = $(dom).find('.tab').hasClass('municipality')
                var pName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
                var selectedObj = {
                    name: pName,
                    children: []
                }
                
                // 是否是直辖市或自治区
                if (isMunicipality) {
                    if ($(dom).find('input:not([disabled])').is(':checked')) {
                        arr.push(selectedObj)
                    }
                } else {
                    var allCitylength = $(dom).find('button').length

                    if (state === 'notDisabled') {
                        // 判断是否全省被选中
                        if ($(dom).find('button.active:not([disabled])').length === allCitylength) {
                            arr.push(selectedObj)
                        } else {
                            $(dom).find('button.active:not([disabled])').each(function(c, dom) {
                                var cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
                                selectedObj.children.push(cName)
                            })
                            if (selectedObj.children.length) {
                                arr.push(selectedObj)
                            }
                        }
                    } else {
                        // 判断是否全省被选中
                        if ($(dom).find('button.active').length === allCitylength) {
                            arr.push(selectedObj)
                        } else {
                            $(dom).find('button.active').each(function(c, dom) {
                                var cName = $(dom).text().replace(/\s+ | [\r\n]/g, '')
                                selectedObj.children.push(cName)
                            })
                            if (selectedObj.children.length) {
                                arr.push(selectedObj)
                            }
                        }
                    }
                }
            })

            // 处理arr
            // [
            //     {
            //         name: '安徽',
            //         children: ["合肥市", "蚌埠市", "阜阳市"]
            //     },
            //     {
            //         name: '海南',
            //         children: ["三亚市", "文昌市"]
            //     },
            //     {
            //         name: '河南',
            //         children: ["郑州市", "信阳市"]
            //     }
            // ]
            var selectedCityDetail = {}
            arr.forEach(function(item, i) {
                selectedCityDetail[item.name] = item.children
            })
            return selectedCityDetail
        }
    }

    // 初始选择的城市恢复，根据传入的p恢复为Disabled灰色按钮
    function renderSelectedCityDisabled(p = {}) {
        for (const k in p) {
            if (p[k].length == 0) {
                // 购买的省份
                $('.province').each(function () {
                    var t = $(this).text().trim();
                    if (k == t) {
                        $(this).children('.checkbox').prop('checked',true).attr('disabled',true);
                        $(this).parents('li').children('.tab_content').find('.city').addClass('active').attr('disabled',true);
                    }
                })
            } else {
                $('.city').each(function () {
                    var that =$(this)
                    var t = $(this).text().trim();
                    p[k].forEach(function(v){
                        if(v !== t) return
                        // var that = $(this).parents('li').find('.tab:not(.municipality)');
                        // 改变状态按钮
                        that.addClass('active').attr('disabled',true).parent().siblings('.tab').find('input').addClass('half').attr('disabled',true);
                    })
                })
            }
        }
    }

    // 初始选择的城市恢复，根据传入的p恢复为Active蓝色按钮
    // 需要放到init之后
    function renderSelectedCityActive(p = {}) {
        for (const k in p) {
            if (k === '全国') {
                $('.area-list li:not(.index):eq(0)').find('input').trigger('click')
                return
            }
            
            if (p[k].length == 0) {
                // 购买的省份
                $('.province').each(function () {
                    var t = $(this).text().trim();
                    if (k == t && p[k].length == 0) {
                        $(this).parent().siblings().find('.city').trigger('click')
                    }
                })
            } else {
                $('.city').each(function () {
                    var that =$(this)
                    var t = that.text().trim();

                    p[k].forEach(function(v){
                        if(v !== t) return
                        // var that = $(this).parents('li').find('.tab:not(.municipality)');
                        // 改变状态按钮
                        that.trigger('click')
                    })
                })
            }
        }
        getResult()
    }
	
    function isLockedTipButtons(f) {
        $('.tips_btn button').prop('disabled', f)
    }

    // 根据数据进行求总数 --- 上方提示数据信息的初始化
    function initAlreadyBuy(p, buyset, citys) {
        // 此处在数据返回后根据数据进行求值
        if (buyset.areacount === -1) {
            $('.result_text.already .buy-set-info').text('全国')
            $('.result_text.add_new .added-info').hide().text('')
        }

        // 选择的省和市的数量
        for (var a in p) {
            if (p[a].length) {
                // 已经选择的市的数量
                alreadyBuy.city.selectedCount += p[a].length
            } else {
                // 已经选择的省的数量
                alreadyBuy.province.selectedCount ++
            }
        }

        // 购买的全省的数量（不包含市）
        alreadyBuy.province.totalCount = buyset.areacount;
        // 购买的城市数量
        for (const c in citys) {
            alreadyBuy.city.totalCount += citys[c]
        }
        // console.log(alreadyBuy)
        var buySetInfo = {
            p: "省级区域"+alreadyBuy.province.selectedCount+"/"+alreadyBuy.province.totalCount+"、",
            c: "地市"+alreadyBuy.city.selectedCount+"/"+alreadyBuy.city.totalCount
        }
        $('.result_text.already .buy-set-info').text(buySetInfo.p + buySetInfo.c)
        $('.result_text.add_new .added-info').text('')
    }

    // 初始化方法
    function init() {
        var data = areaData.data
        var buyset = data.buyset;
        var citys = buyset.citys;
        initAlreadyBuy(data.area, buyset, citys)
        // 1.根据返回数据进行渲染
        if (buyset.areacount === -1) {
            // 购买全国
            if (Object.keys(data.area).length === 0) {
                // 选中全国
                // 不能操作
                $('.checkbox.other').prop('disabled', true).prop('checked', true)
                $('.checkbox:not(.other)').prop('disabled', true)
                $('.city').attr('disabled', true)
            } else {
                renderSelectedCityDisabled(data.area)
            }
            isLockedTipButtons(true)
            $('.result_text.already .buy-set-info').text('全国')
        } else {
            // 购买的非全国
            renderSelectedCityDisabled(data.area)
        }
        // 2.根据数据绑定data-buy-count，并赋值
        // area-list上绑定购买的省份数量
        $('.area-list').attr('data-buy-province-count', buyset.areacount)
        $('.area-list li:not(.index)').each(function(i, dom){
            if ($(dom).children('.tab').hasClass('whole')) return
            // 获取省的名字，并去空格.回车.换行
            var provinceName = $(dom).find('.province').text().replace(/\s+ | [\r\n]/g, '')
            for (var c in citys) {
				// var areaLeng;
				// try{
				// 	areaLeng = data.area[c].length
				// 	if (c === provinceName && areaLeng !== 0) {
				// 	    $(dom).attr('data-buy-city-count', citys[c])
				// 	}
				// }catch(e){
					//TODO handle the exception
					if (c === provinceName) {
					    $(dom).attr('data-buy-city-count', citys[c])
					}
				// }
            }
        })
        $('.add_new').hide()
        getResult()
    }

    // ----------------- 以下绑定事件 ----------------------------
    // 0.渲染城市列表
    $(".select-area-box ul li:not('.index')").each(function () {
        var text = $(this).find(".province").text().trim()
        var data = null
        chinaMapJSON.some(function (v) {
            data = v
            return v.name.indexOf(text) !== -1
        })
        var box = $(this).find('div.tab_content')
        var html = createMoreCity(data.city)
        box.html(html)
    })
    // fastClick初始化: https://github.com/ftlabs/fastclick
	//  FastClick.attach(document.body)
    // 1.省下拉市
    var isAnimating = false
    $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
        if (isAnimating) return
        isAnimating = true
        if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
            $(this).children().children('i').css({
                "display": "inline-block",
                "transform": "rotate(0)"
            })
        } else {
            $(this).children().children('i').css({
                "display": "inline-block",
                "transform": "rotate(-180deg)"
            })
        }
        $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
        $(this).parent().siblings().children('.tab').removeClass('selected');
        setTimeout(function() {
            isAnimating = false
        }, 500)
    })
    // 2.点击全国按钮onchange事件；
    $('.checkbox.other').on('change', function () {
        var isChecked = $(this).is(':checked')
        if(isChecked){
            $(this).prop('checked',true);
            $('.checkbox:not(.other):not([disabled])').prop('checked',false).removeClass('half');
            $('.city:not([disabled])').removeClass('active');
            $('.tab_content').slideUp();
        }
        getResult()
    })
    // 3.点击非全国按钮onchange事件
    $('.checkbox:not(.other)').on('change', function () {
        $('.checkbox.other').prop('checked',false);
        var isChecked = $(this).is(':checked');
        if(isChecked){
            $(this).prop('checked',true).removeClass('half');
            $(this).parents('li').find('.city').addClass('active');
            // 控制点击checkbox时候是否展开下方的城市列表
            // $(this).parent().parent('.tab:not(.municipality)').siblings('.tab_content').slideDown();
        }else{
            $(this).prop('checked',false);
            $(this).parents('li').find('.city').removeClass('active');
        };
        getResult();
        showOther();
    })
    // 4.点击半选按钮触发的事件
//  $('.checkbox.half').on('change', function () {
//      $('.checkbox.other').prop('checked', false)
//      var isChecked = $(this).is(':checked')
//      $(this).prop('checked', isChecked).removeClass('half')
//      console.log("!1")
//      getResult();
//  })
    // 5.点击城市按钮触发的事件
    $('.tab_content').on('click', '.city', function () {
        // 全国取消选中
        $('.checkbox.other').prop('checked',false);
        $(this).toggleClass('active')
        // 省下所有选中的地市数量
        var activeCityLength = $(this).parent().find('.city.active').length;
        // 省下一共有几个城市
        var cityLength = $(this).parent().find('.city').length;
        var oInput = $(this).parents('li').find('input.checkbox')
        
        if (activeCityLength === cityLength) {//当选中的城市数量等于该省下所有城市总数时，即为全选
            if ($(this).siblings('.city[disabled]').length === 0) {
                oInput.removeClass('half').prop('checked', true)
            }
        } else if (activeCityLength === 0){
            oInput.prop('checked', false).removeClass('half')
        } else {//半选
            oInput.prop("checked",false).addClass('half')
        }
        getResult();
        showCityTips(this)
    })
    // 6. 重置按钮点击事件
    $('.reset-btn').on('click', function() {
        // alreadyBuy = {
        //     province: {
        //         totalCount: 0,
        //         selectedCount: 0
        //     },
        //     city: {
        //         totalCount: 0,
        //         selectedCount: 0
        //     }
        // }
        // newlyAdded = {
        //     province: 0,
        //     city: 0
        // }
		// sessionStorage.removeItem("vipAddCount");
		// sessionStorage.removeItem("vipSubSelectAreaAdd");
		// sessionStorage.removeItem("vipSubSelectCity");
        // 数组置0，在重新从数据中计算初始状态结果并返回
        for (var i in alreadyBuy) {
            for(var ii in alreadyBuy[i]) {
                alreadyBuy[i][ii] = 0
            }
        }
        for (var j in newlyAdded) {
            newlyAdded[j] = 0
        }
        $(".select-area-box .tab:not(.municipality) .icon").css({
            "display": "inline-block",
            "transform": "rotate(0)"
        });

        $('.checkbox').prop('checked', false).removeAttr('disabled');
        $('.city').removeClass('active');
        $('input').removeClass('half')
        $('.tab_content').slideUp();
        $('.optional').remove()
        init();
        $(".tips_d_text").hide();
        $(".btns .reset-btn").prop("disabled",false);
        $(".btns .save-btn").prop("disabled",false);
    })

    // 7.锚点跳转
    $("body").on('click', '.slide a', function () {
        var s = $(this).html()
        if (s == '#') {
            return;
        }
        document.querySelector('#' + s).scrollIntoView({
            block: 'center'
        });
    })
    // 阻止input checkbox选中取消 触发父元素下拉事件
    $('.checkbox').click(function (e) {  
        e.stopPropagation();
    })

	function showCityTips(dom){
		var isAll = $(".area-list").attr("data-buy-province-count");
		if(Number(isAll)===-1){
			return
		}
		var activeCityLength = $(dom).parent().find('.city.active').length;
		var selectedCityLength = $(dom).parent().find('.city.active:not([disabled])').length;
		var disabledCityLength = $(dom).parent().find('.city[disabled]').length;
		var cityLength = $(dom).parent().find('.city').length;
		// var dataCount = Number($(dom).parent().parent().attr("data-buy-city-count"));
		// if(dataCount === undefined){
		// 	dataCount = 0;
		// }else{
		// 	if(Number(dataCount) !== disabledCityLength){
		// 		if(disabledCityLength === 0){
		// 			dataCount = 0;
		// 		}else{
		// 			dataCount = dataCount - disabledCityLength;
		// 		}
		// 	}
		// }
		// var countShow = 0;
		var showCounts = selectedCityLength + disabledCityLength;
		// var showCount = selectedCityLength - dataCount;
		if(showCounts > 2){
			if(selectedCityLength === 0){
				$(".tips_d_text").hide();
			}else{
				$(".tips_d_text").text("已选择"+showCounts+"个市，建议购买“全省”");
				$(".tips_d_text").show();
			}
		}else{
			$(".tips_d_text").hide();
		}
		if(showCounts === cityLength){
			showOther();
		}
	}
	
	function showOther(){
		var areaCount = areaData.data.buyset.areacount;
		var areaSelect = $('.checkbox:checked:not([disabled])').length;
		if(areaSelect === 0){
			$(".tips_d_text").hide();
			return
		}
		var showCounts = 0;
		if(areaCount === -1){
			$(".tips_d_text").hide();
		}else{
			showCounts = newlyAdded.province + areaCount;
		}
		if(showCounts > 9){
			$(".tips_d_text").text("已选择"+showCounts+"个省，建议购买“全国”")
			$(".tips_d_text").show();
		}else{
			$(".tips_d_text").hide();
		}
	}

    // ----------------------- 以下数据交互 ------------------
    $DoPost("/subscribepay/renewUpgrade/getBuyMsg", {}, function (data) {
    	if(data.success){
        	areaData["data"] = {
        		"area" : data.data.area,
        		"buyset" : data.data.buyset, 
        	}
        	init();
    	}
    }, false);
    // 确认按钮事件
    $('.save-btn').on('click', function(){
        // 获取added城市详情
        var activeCityDetail = getActiveCityDetail()
        var areaCount = getResultWithMCount().added
		var lastSet = getResultWithMCount().allDisabledButHasCityCount
//      console.log("111",areaCount)
//      console.log(JSON.stringify(activeCityDetail))
//      console.log(activeCityDetail)
//      console.log(areaData)
//      console.log(alreadyBuy)
        sessionStorage.vipAddCount = JSON.stringify(newlyAdded);
        sessionStorage.vipSubSelectCity = newlyAdded.city;
        sessionStorage.vipSubSelectAreaUpgrade = JSON.stringify(activeCityDetail);
        sessionStorage.vipSubSelectAreaAdd = JSON.stringify(areaCount);
		sessionStorage.vipallDisabledButHasCityCount = JSON.stringify(lastSet);
		//
		if(areaCount.country === 0){
			if(areaCount.province === 0 && checkObj(areaCount.city)){
				sessionStorage.removeItem("vipSubSelectAreaUpgrade");
			}
		}
				
        history.go(-1);
    })
	
	function checkObj(obj) {
	    //检验数组
	    if (Array.prototype.isPrototypeOf(obj) && obj.length === 0) {
	        return true;
	    }
	    //检验对象
	    if (Object.prototype.isPrototypeOf(obj) && Object.keys(obj).length === 0) {
	        return true;
	    }
	    return false;
	}
	//
	if(sessionStorage.vipSubSelectAreaUpgrade!==undefined&&sessionStorage.vipSubSelectAreaUpgrade!==""){
		var areaObj = JSON.parse(sessionStorage.vipSubSelectAreaUpgrade);
		renderSelectedCityActive(areaObj);
	}
    // 求需要M的城市数量
    // getResultWithMCount()
    // 获取点亮的城市的列表详情（带省名和城市名）
    // getActiveCityDetail()

    // 回显为蓝色激活样式
    // renderSelectedCityActive()
    // 回显为灰色不可点击样式
    // renderSelectedCityDisabled()
})