<template>
 <view>
   <view class="foot fixed">
	   <uni-section type="line"
	   			style="margin-bottom: 3px;">
	   			<view class="box-bg">
	   				<uni-nav-bar border="false" title="image" >
						<block slot="left">
							<!-- <view ><uni-icons type="back" size="30"></uni-icons></view> -->
							<view class="icon-all"><image class="imgsize"src='../../static/icon/left.png' @click="back()"/></view>
						</block>
						<block slot="right">
							
							<view class="text-bg" @click="Sub()">submit</view>
							
						</block>
						</uni-nav-bar>
	   			</view>
	   	</uni-section>
   </view>

  <view class="detail">
   <view class="contain" v-for="(item,index) in imglist" :key="index">
    <!-- <view class="icon imgsize" :style="{backgroundImage :'url(' + item +')'}"></view> -->
	
	<view class="icon" @click="tabActive(index,item)">
		
		<image class="imgsize":src="item"></image>
		 <radio class="main-icon-radio" v-show="current>-1"  :checked="index == current?true:false" />
	</view>
   
   </view>
  </view>
 </view>
</template>

<script>
	import {defaultRequest} from '../../api/index.js'
 export default {
  data() {
   return {
	   current:-1,
	   active_img:'',
    query:{
		_action:'getinfo'
		
	},
	query2:{
		_action:'updateinfo',
		nickname:'',
		sex:'',
		birthday:'',
		user_head:'',
		email:''
	},
	imglist:[]
   }
  },
  onLoad() {
  	this.getimglist()
  },
  methods: {
   getimglist(){
	   defaultRequest(this.query).then(res =>
	   {
		   // console.log(res.data.headicons,'图片')
		   this.imglist = res.data.headicons
		    console.log(res.data)
			this.query2.nickname = res.data.nickname
			// for(let i of this.imglist)
			// console.log(i)
	   })
		},   
	   
   tabActive(index,item){
	   this.current = index
       console.log(index)
	   this.active_img = item
   },
   // 提交图片
   Sub(){
	   this.query2.user_head = this.active_img;
	  defaultRequest(this.query2).then( res => {
		 
		  if(res.error==0){
			setTimeout(() =>{
				uni.showToast({
					title:'ok!',
					icon:'none'
					
				})
			},500)
			uni.switchTab({
				url:'./index'
			})
			
			
		}
	  })
	   
   },
   back(){
	   uni.navigateBack({
	   	delta:1
	   })
   }
  }
 }
</script>

<style>
	.foot{
		height:120rpx;
		width: 100vw;
	    padding:50rpx 0 0 0;
		background-color: #fff;
		position: fixed;
	}
	.fixed{
		position: fixed;
		z-index: 99;
	}
	.icon-all{
		height: 30rpx;
		width:30rpx ;
	}
.detail{
 display: flex;
 flex-wrap: wrap;
 margin:10rpx 4vw  10rpx 2vw;
 padding: 100rpx 0;
 background-color: #fff;
 

}
.text-bg{
	background-color: black;
	color: aliceblue;
	padding: 6rpx 10rpx;
	border-radius: 15rpx;
}
.contain{
 width: 26vw;
 height: 200rpx;
 display: flex;
/* background-color: antiquewhite; */
 flex-direction: column;
 margin: 50rpx 20rpx 10rpx 20rpx;
  /* padding: 10rpx; */
 position: relative;
 justify-content: center;
 /* align-items: center; */
}
.icon{
 height: 100%;
 width:26vw;
 /* margin: 15rpx; */
 display: flex;
 justify-content: flex-end;
 position: absolute;
 align-items: center;
}
.imgsize{
	width: 100%;
	height: 100%;
}
.main-icon-radio {
	position: absolute;
	
	margin-top: 15vw;
	
}
</style>