<template>
	<view class="container">
		<view class="page-bg">
			<view class="title">认证越多 曝光率越高</view>
			<view class="content">
				<view>进行认证可提升您的综合竞争力</view>
				<view>可获得优先匹配和更多推荐机会</view>
			</view>
		</view>
		<view class="user-list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="navTo(item)">
				<view class="content">
					<view class="icon">
						<image :src="item.icon" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="title">{{ item.name }}</view>
						<view class="desc">{{ item.desc }}</view>
					</view>
				</view>
				<view class="btn">
					{{item.submitText}}
					<u-icon name="arrow-right" color="#681752"></u-icon>
				</view>
			</view>
			
			<!-- <u-list @scrolltolower="scrolltolower">
				<view class="list">
					<u-list-item v-for="(item, index) in list" :key="index">
						<u-cell :title="`${item.name}`" :icon="item.icon">
							<view slot="right-icon" class="follow-btn" @click="navTo(item)">
								<text>aa{{ item.submitText }}</text>  
							</view>
						</u-cell>
					</u-list-item>
					<u-empty v-if="list.length == 0" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png">
					</u-empty>
				</view>
			</u-list> -->
		</view>
	</view>
</template>

<script>
	import * as CertificateApi from '@/api/love-certificate.js'
	import * as UserProfileApi from '@/api/love-user-profile.js'

	const userId = uni.getStorageSync('userId')

	export default {
		data() {
			return {
				form: {
					userId
				},
				list: [{
						type: 'idCard',
						icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/idcard.png',
						name: '身份认证',
						desc: '远离骗子与婚托，真诚交友安全有保障',
						url: 'sub_pages/certification/id-card/id-card',
						submitText: '去认证',
						isEdit: false
					},
					{
						type: 'house',
						icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/house.png',
						name: '房屋认证',
						desc: '有趣的灵魂万里挑一，遇见同频的TA',
						url: 'sub_pages/certification/house/house',
						submitText: '去认证',
						isEdit: false
					},
					{
						type: 'education',
						icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/xueli.png',
						name: '学历认证',
						desc: '有车一族，来一场说走就走的旅行',
						url: 'sub_pages/certification/education/education',
						submitText: '去认证',
						isEdit: false
					},
					{
						type: 'car',
						icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/card.png',
						name: '车辆认证',
						desc: '完成房产认证，证实你的实力',
						url: 'sub_pages/certification/car/car',
						submitText: '去认证',
						isEdit: false
					}
				],
				page: 0,
				where: {},
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				disabled: false
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.where = options
		},
		onShow() {
			console.log("onSHow");
			this.getData()
		},

		methods: {
			getData() {
				const app = this
				const {
					form
				} = this
				CertificateApi.listCertificate(form).then(res => {
					res.data.map(d => {
						if(d.certificateType == 'idCard' ){
							if(d.status == 30){
								app.list[0].submitText = '已认证'
								app.list[0].isEdit = true
							}else if(d.status == 20){
								app.list[0].submitText = '已驳回'
								app.list[0].isEdit = false
							}else if(d.status == 10){
								app.list[0].submitText = '认证中'
								app.list[0].isEdit = false
							}
						}
						if(d.certificateType == 'house' ){
							if(d.status == 30){
								app.list[1].submitText = '已认证'
								app.list[1].isEdit = true
							}else if(d.status == 20){
								app.list[1].submitText = '已驳回'
								app.list[1].isEdit = false
							}else if(d.status == 10){
								app.list[1].submitText = '认证中'
								app.list[1].isEdit = true
							}
						}
						if(d.certificateType == 'education' ){
							if(d.status == 30){
								app.list[2].submitText = '已认证'
								app.list[2].isEdit = true
							}else if(d.status == 20){
								app.list[2].submitText = '已驳回'
								app.list[2].isEdit = false
							}else if(d.status == 10){
								app.list[2].submitText = '认证中'
								app.list[2].isEdit = true
							}
						}
						if(d.certificateType == 'car'){
							if(d.status == 30){
								app.list[3].submitText = '已认证'
								app.list[3].isEdit = true
							}else if(d.status == 20){
								app.list[3].submitText = '已驳回'
								app.list[3].isEdit = false
							}else if(d.status == 10){
								app.list[3].submitText = '认证中'
								app.list[3].isEdit = true
							}
						}
					})
				})
			},
			// 刷新会员列表
			onRefreshList() {
				const app = this
				app.where.page = app.page
				return new Promise((resolve, reject) => {
					UserProfileApi.pageUserProfile(app.where)
						.then(result => {
							const list = result.data.list
							// 合并新数据
							app.list = app.list.concat(list)
							if (result.data.count > app.list.length) {
								app.canReset = true
							} else {
								app.canReset = false
							}
							resolve(list)
						})
				})
			},
			scrolltolower(e) {
				console.log("e: ", e);
			},
			navTo(item) {
				console.log("item: ",item);
				
				this.$push(item.url)
			},
			onFollow(e) {
				console.log("e11: ", e);
			},
			onSearch() {
				this.list = []
				this.where.page = 1
				this.onRefreshList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// background-color: #ffffff;
	}

	.search-wrapper {
		display: flex;
		height: 64rpx;
	}

	.user-list {
		margin: 0 auto;
		.list{
			.icon{
				padding: 10rpx;
			}
		}
		
		.item{
			width: 660rpx;
			height: 130rpx;
			margin: 50rpx auto;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			.content{
				display: flex;
				.icon{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					image{
						width: 70rpx;
						height: 70rpx;
					}
				}
				.info{
					margin-left: 16rpx;
					.title{
						font-size: 32rpx;
						font-weight: 700;
						padding-bottom: 5rpx;
					}
					.desc{
						font-size: 26rpx;
						color: #666666;
					}
				}
			}
			.btn{
				font-size: 28rpx;
				color: #681752;
				width: 120rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.follow-btn {
		padding: 4rpx 20rpx;
		color: #ffffff;
		font-size: 26rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
		background: linear-gradient(#47076b, #8d1a50);
		.content{
			display: flex;
			flex-direction: column;
		}
		image {
			width: 24rpx;
			height: 66rpx;
			margin-right: 6rpx;
		}
	}
	
	.page-bg {
		width: 750rpx;
		height: calc(200rpx + var(--status-bar-height));
		background: linear-gradient(to bottom, $main-bg, $main-bg2);
		color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.title{
			font-size: 38rpx;
		}
		.content{
			color: #f3f3f3;
			font-size: 28rpx;
			line-height: 1.3rem;
			display: flex;
			flex-direction: column;
		}
	}
</style>
