<template>
	<view class="content">
		<!-- 当前城市 -->
		<view class="city">
			<view class="localcity flexone">
				<view class="localname">定位</view>
				<view class="localleft">
					<image src="../../static/loaclcity.png" mode=""></image>
				</view>
			</view>
			<view class="citybox flexone">
				<view class="cityboxitem " :class="selcurrent==1?'selcityactive':''" wx:key="" @click="selcurrentcity" :data-name="currentcity">{{currentcity}}</view>
			</view>
		</view>
		<!-- 热门城市 -->
		<view class="city">
			<view class="citytop">热门城市</view>
			<view class="nodata" v-if="hotcityarr.length==0" style="margin-top:10rpx;padding-bottom: 20rpx;box-sizing: border-box;">暂无热门城市</view>
			<view class="citybox flexone" v-else>
				<view class="cityboxitem" :class="selhot==index?'selcityactive':''" v-for="(item,index) in hotcityarr" :key="index" @click="selhotcity(item,index)"
				>{{item.name}}</view>
			</view>
		</view>
		<!-- 当前城市 -->
		<view class="city">
			<view class="citytop">全部城市</view>
			<view class="citybox flexone">
				<view class="cityboxitem" :class="selall==index?'selcityactive':''" v-for="(item,index) in cityarr" :key='' @click="selallcity(item,index)"
				>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	    export default {
	        data() {
	            return {
	                showbanben: false,
					cityarr:[],
					provincename:'',
					selhot:-1,
					selall:-1,
					selcurrent:1,
					currentcity:'',
					hotcityarr:[],
					seltype:''
	            }
	        },
	        onLoad(options) {
				this.seltype=options.seltype
				this.provincename=uni.getStorageSync("provincename")
				this.getprovincelist();
				this.currentcity=uni.getStorageSync("currentcity");
				// 获取热门省份
				this.gethotprovince()
	
	        },
	        methods: {
				// 选择当前城市
				selcurrentcity(e){
					let cityname=e.currentTarget.dataset.name;
					if(this.seltype==1){
						uni.setStorageSync("newprovincename",cityname);
					}else if(this.seltype==2){
						uni.setStorageSync("provincename",cityname);
					}else if(this.seltype==3){
						uni.setStorageSync("provincenamek",cityname);
					}
					
					
					
					uni.navigateBack({
						checked:true
					})
				},
				// 获取热门省份
				gethotprovince(){
					
					let that = this;
					var url = 'forum/get_province';
					var params = {
						is_forum_hot: 1
					}
					console.log('7766554', params)
					app.post(url, params).then((res) => {
						console.log(res);
						that.hotcityarr = res.data.data;
						
					}).catch((err) => {
						           
					})
				},
				
	           // 获取全部省份列表
	           getprovincelist() {
	           	let that = this;
	           	var url = 'forum/get_province';
	           	var params = {
	           		is_forum_hot: ''
	           	}
	           	console.log('7766554', params)
	           	app.post(url, params).then((res) => {
	           		console.log(res);
	           		that.cityarr = res.data.data;
					
	           	}).catch((err) => {
	           
	           	})
	           },
			   // 选择城市
			   selhotcity(item,index){
				   console.log(item);
				   this.selhot=index;
				   this.selall=-1;
				   this.selcurrent=0;
				   
				  if(this.seltype==1){
				  	uni.setStorageSync("newprovincename",item.name);
				  }else if(this.seltype==2){
				  	uni.setStorageSync("provincename",item.name);
				  }else if(this.seltype==3){
				  	uni.setStorageSync("provincenamek",item.name);
				  }
				  
				
				    uni.$emit('provinceid',{provinceid:item.id,protype:1})
				   uni.navigateBack({
				   	checked:true
				   })
				   
			   },
			   selallcity(item,index){
				   this.selall=index;
				   this.selhot=-1;
				   this.selcurrent=0;
				  if(this.seltype==1){
				  	uni.setStorageSync("newprovincename",item.name);
				  }else if(this.seltype==2){
				  	uni.setStorageSync("provincename",item.name);
				  }else if(this.seltype==3){
				  	uni.setStorageSync("provincenamek",item.name);
				  }
				  
				   
				   console.log('37347438934',uni.getStorageSync("newprovincename"))
				   console.log(item.id)
				   uni.$emit('provinceid',{provinceid:item.id,protype:1})
				   uni.navigateBack({
				   	checked:true
				   })
			   },
	           
	           
	      
	        }
	
	    }
</script>

<style>
	page{
		background: #fff;
	}
	.city{
		border-bottom:16rpx solid #F7F7F7
	}
	.localcity{
		margin-top:34rpx;
	}
	.localleft{
		width:32rpx;
		height: 32rpx;
		font-size: 0;
		margin-left:8rpx;
	}
	.localname{
		color:#3D444C;
		font-size: 28rpx;
		margin-left:20rpx;
	}
	.search {
	  color: #06121e;
	  font-size: 28rpx;
	}
	
	.headmiddle {
	  width: 596rpx;
	}
	
	.tou {
	  background: #fff;
	}
	
	page {
	  background: #f9f9fb;
	}
	
	/* 城市 */
	
	.citybox {
	  display: flex;
	  flex-wrap: wrap;
	  margin-top:26rpx;
	}
	
	
	.city {
	  padding: 0 12rpx 0 32rpx;
	  box-sizing: border-box;
	}
	.citytop{
	  color:#707070;
	  font-size: 32rpx;
	  margin-top:44rpx;
	  font-weight: bold;
	  
	}
	
	.cityboxitem {
	  width: 216rpx;
	  height: 68rpx;
	  background: rgba(255, 255, 255, 1);
	  border: 1rpx solid rgba(189, 196, 206, 1);
	  opacity: 1;
	  border-radius: 8rpx;
	  color: #06121e;
	  font-size: 28rpx;
	  text-align: center;
	  line-height: 68rpx;
	  margin-right:14rpx;
	  margin-bottom:24rpx;
	}
	.selcityactive{
		background:#C29445 ;
		color:#fff;
		font-size: 28rpx;
		
	}

</style>