<template>
	<view class="container">
		<view class="imgList" v-if="imgList.length > 0">
			<view class="imgBox" v-for="(item,index) in imgList" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</view>
			
			
			
		</view>	
		<u-empty icon="/static/img/user/nodata.png" mode="list" text="你还没有面部档案" width="180rpx" marginTop="120px" v-if="imgList.length == 0"></u-empty>
		<view class="newBtn" v-if="imgList.length == 0" @click="newInfo">去创建</view>  	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				imgList:[],
			}
		},
		onLoad(options){
			var _this =this;
			console.log('options', options);
			_this.id = options.id;
			_this.getDetail();
		},
		methods: {
			getDetail()
			{
				var _this =this;
				var id = _this.id;
				if(id > 0)
				{
					
					var post ={id:_this.id};
					_this.$api.get('api/portrait/details',post,function(rs){
						console.log('档案详情',rs);
						var imgs = rs.users_images;
						    imgs.forEach((item, index) => {
								imgs[index] = _this.$api.ossurl(item);
							})
						
						 _this.imgList = imgs;
					});
				}
			},
			newInfo(){
				uni.navigateTo({
					url:'/pagesA/merge/face_1'
				})
			},
		}
	}
</script>

<style lang="scss">
.container{padding: 20rpx 26rpx;}
.imgList{width: 100%; height: auto; display: flex; flex-wrap: wrap; gap:12rpx;}
.imgBox{width: 130rpx; height: 130rpx; margin-top: 10rpx;}
.imgBox image{width: 140rpx; height: 140rpx;}

.newBtn{
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 48rpx;
		border: 2rpx solid #9B75FF;
		text-align: center;
		margin: 20rpx auto;
		color: #9B75FF;
		font-size: 30rpx;
		font-weight: bold;
	}
</style>
