<template>
	<view class="content">
		<uni-list v-for="(item,index) in listData" :key=index>
			 <view class="itemclass" hover-class="hoverclass" hover-stay-time="40" @click="itemClick(item,index)">
				 <view>
					<image v-if="!item.selected " class="iconsel" mod="aspectFit" src="../../static/common/unselected.png" />
					<image v-if="item.selected" class="iconsel" mod="aspectFit" src="../../static/common/selected.png" />
					<text>{{item.name}}</text> 
				 </view>
				 <image class="icongo" mod="aspectFit" src="../../static/common/arrow_right_gray.png" />
			 </view>
		</uni-list>
	</view>
</template>

<script>
	import uniList from "@/components/list/uni-list/uni-list.vue"
	import uniListItem from "@/components/list/uni-list-item/uni-list-item.vue"
	import uniNavBar from "@/components/uni-header/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				title: ["校区","楼栋","楼层","教室"],
				listData:[],
				index:0,
				addressSel:[],
				id:""
			}
		},
		onLoad(option) {
			if(option.maxLevel){
				this.maxLevel = option.maxLevel
			}
			if(option.id){
				this.id = option.id
			}
			if(option.lastIndex){
				this.index = parseInt(option.lastIndex) +1;
			}
			if(this.index == 0){
				this.getStartId()
			}else{
				this.getData(this.id);
			}
			uni.setNavigationBarTitle({
				title:this.title[this.index]
			})
		},
		methods: {
			onNavigationBarButtonTap(){
				this.saveClick();
				console.log("ad")
			},
			goBackClick:function(){
				uni.navigateBack({
					
				})
			},
			saveClick:function(){
				if(this.maxLevel-1 == this.index){
					uni.navigateBack({
						delta:parseInt(this.maxLevel)
					})
					uni.$emit("addressSave");
				}
			},
			itemClick:function(item,index){
				if(this.GLOBALUTIL.addressSelectionTemp[this.index]){
					this.GLOBALUTIL.addressSelectionTemp[this.index].name = item.name;
					this.GLOBALUTIL.addressSelectionTemp[this.index].id = item.name;
					this.GLOBALUTIL.addressSelectionTemp[this.index].code = item.code;
				}else{
					this.GLOBALUTIL.addressSelectionTemp.push({
						code:item.code,
						id:item.id,
						name:item.name
					})
				}
				this.listData.map((opt)=>{
					opt.selected = false;
				})
				this.listData[index].selected = true;
				if(this.index == this.maxLevel-1){
					return 
				}else{
					uni.navigateTo({
						url:'../../components/address-select/index?lastIndex='+this.index+"&maxLevel="+this.maxLevel+"&id="+item.id
					})
				}
			},
			getData:function(id){
				var body = {};
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/base-data/v1/dict-items?sort_property=ID&sort_direction=ASC&dict_code=jsxx&&page_number=1&page_size=100&prev_id='+id, 
					method: 'GET',
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						 'user' : JSON.stringify(user)
				    },
					body:null,
				    success: (res) => {
						console.log(JSON.stringify(res)) 
						var list = res.data.data;
						list.map((opt)=>{
							opt.selected = false;
						})
						this.listData = list
				    }
				})
			},
			getStartId(){
				var body = {};
				var user = {};
				user.id = this.GLOBALUTIL.user.userid;
				user.name = encodeURI(this.GLOBALUTIL.user.username);
				uni.request({
				    url: this.GLOBALUTIL.url+'/base-data/v1/dicts-code/jsxx', 
					method: 'GET',
				    header: {
				        'Accept': 'application/json',
				        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						 'user' : JSON.stringify(user)
				    },
					body:null,
				    success: (res) => {
						this.getData(res.data.id);
				    }
				})
			}
		},
	    components: {uniList,uniListItem,uniNavBar}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		background-color: #F7F7F7;
		padding:0
	}
	.status_bar {
		  height: var(--status-bar-height);
		  width: 100%;
	 }
	 .itemclass {
		 display: flex;
		 width:100%;
		 height: 80rpx;
		 background-color: #FFFFFF;
		 border: 1px solid #D8D8D8;
		 flex-direction: row ;
		 justify-content: space-between;
		 align-items: center;
	 }
	 .icongo {
		width:40rpx;
		height:30rpx;
	 }
	 .iconsel {
		 width:30rpx;
		 height:30rpx;
	 }
	 .hoverclass{
		 opacity: 0.5;
		 background-color:#F5F5F5;
	 }
</style>
