<template>
	<view>
		<customNav :shownav="true" :title="$t('user.shimingwsmrz')" tinColor="#006AFF" jiantou="0" titledetl=''></customNav>
		<view class="contentColumn contenV">
			<view class="">
				<text>{{$t('user.zhegnjiants')}}</text>
			</view>
			<view class="item_list">
				<view class="item_content" v-for="(item,index) in annexList">
					<myImage class="imageV" :defaultImage="item" :mysrc="item" mymode="widthFix" v-on:Emyimageclick="imageEvent(index)"></myImage>
				</view>
				<view class="item_content">
					<image class="imageV" src="/static/imags/shangctp.png" mode="widthFix" @click="addimage"></image>
				</view>
			</view>
			
		</view>
		<view class="bottomfloatV">
			<view class="querenBt" @click="tijiaoAC">
				<label>{{$t('tixian.shenqingshenhe')}}</label>
			</view>
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="NOMLE" :cancelText="$t('index.quxiao')" :confirmText="$t('index.queren')" :title="$t('user.sanchutp')" :content="sanchumsg" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUserMsg,
		updataUserMsg
	} from '@/pages/api/login';
	
	import {
		UploadImage
	} from '@/pages/api/basic.js';
	export default {
		data() {
			return {
				annexList:[],
				scale:1,
				sanchumsg:'',
				delIndex:-1,
				auditStatus:0
			}
		},
		onShow() {
			var userInfo = uni.getStorageSync('userInfo');
			this.auditStatus = userInfo.auditStatus;
			var annex=[];
			console.log(userInfo.annex)
			if(''==userInfo.annex||undefined==userInfo.annex||null==userInfo.annex){
				
			}
			else{
				annex=userInfo.annex.split(",");
			}
			this.annexList=annex;
		},
		methods: {
			tijiaoAC(){
				if(this.annexList.length<2){
					uni.showToast({
						title:this.$t('user.zhegnjiants'),
						icon:"none"
					})
					return;
				}
				if(this.auditStatus==0){
					uni.setStorageSync('auditStatus',9);
					uni.navigateBack();
				}
			},
			addimage(){
				this.selectImage();
			},
			imageEvent(index){
				console.log('删除图片');
				this.delIndex=index;
				var x=index+1;
				let str1 = this.$t('user.querenscdzt');
				let str2 = str1.replace('x',x);
				this.sanchumsg=str2;
				this.$refs.alertDialog.open('center');
			},
			
			dialogConfirm() {
				console.log('点击确认')
				if(this.delIndex<0||this.delIndex>=this.annexList.length){
					return;
				}
				var tempList = this.annexList;
				tempList.splice(this.delIndex,1);
				this.annexList=tempList;
				var images = this.annexList+'';
				console.log(images);
				var annex = {'annex':images}
				this.updataUserMsg(annex);
			},
			dialogClose() {
				console.log('点击关闭')
			},
			
			selectImage(){
				var that = this;
				uni.chooseImage({
					count: 1,  // 图片数量
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: this.$baseurl+UploadImage, //上传图片api
							filePath: tempFilePaths[0],
							name: 'file',
							header:{
								//"Authorization": userinfo.token
							},
							success: (res) => {
								let group =  JSON.parse(res.data);
								console.log('11',that.annexList)
								if(that.annexList==null){
									that.annexList=[];
								}
								var temp = that.annexList;
								temp.push(group.data);
								that.annexList=temp;
								
								var images = that.annexList+'';
								console.log(images);
								var annex = {'annex':images}
								that.updataUserMsg(annex);
								uni.showToast({
									title:that.$t('user.tupiansccg'),
									icon:"success"
								})
							}
						});
					}
				});
			},
			async updataUserMsg(data){
				var that = this;
				await this.$http.post(`${updataUserMsg}`,data,true)
				.then(async r => {
					console.log('updataUserMsg',r)
					// uni.showToast({
					// 	title:that.$t('user.shenqingshcg'),
					// 	icon:"success"
					// })
					uni.setStorageSync('auditStatus',0);
					that.getUserMsg();
				})
				.catch(err => {
					console.log(err)
				})
			},
			async getUserMsg(){
				//console.log('getUserMsg')
				await this.$http.get(`${getUserMsg}`, {
				},true)
				.then(async r => {
					console.log(r.data)
					uni.setStorageSync('userInfo',r.data.data);
				})
				.catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/common.scss';
	page{
		background-color: white;
	}
	.contenV{
		width: 94%;
		margin-left: 3%;
		margin-top: 30rpx;
	}
	
	.item_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.item_content{
		width: 44%;
		margin: 20rpx;
		box-sizing: border-box;
		border: solid lightgray;
	}

	.imageV{
		width: 100%;
	}
	
	.querenBt{
		width: 80%;
		margin-left: 10%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 20rpx;
		text-align: center;
		justify-content: center;
		background-color: #006AFF;
		color: white;
		box-shadow: 0px 0rpx 10rpx 0rpx #006AFF;
	}
	
	.bottomfloatV{
		position: fixed;
		flex-direction: row;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 30rpx;
		z-index: 999;
		background-color: white;
		height: 80rpx;
	}
</style>
