<template>
	<view class="whole" v-if="!loading">
		<view class="info" v-if="!noInfo">
			<view class="item">
				<view class="left" @click="backPay()">
					<view class="title">
						<text>{{pageInfo.name}}</text>
						<view class="label">默认</view>
					</view>
					<text>{{pageInfo.cert_id}}</text>
				</view>
				<view class="right">
					<view @click="delBtn()">
						<up-icon name="trash" />
					</view>
					<view class="opa" @click="toModify()">
						<up-icon name="edit-pen" />
						<text>编辑</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="noInfo">
			<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/11/23/k0IN8OuPbzWwu7ZNowGRPy3EzvonyzgEbYVdZhdS.png" mode="widthFix" />
			<view class="text">海关要求购买跨境商品需办理清关手续<br>为了购物顺利，请添加实名信息</view>
			<view class="btn_box">
				<view class="btn" @click="addRealName()">添加实名认证</view>
				<view class="know" @click="showKnow = true">了解实名认证&nbsp;<up-icon name="arrow-right" /></view>
			</view>
		</view>
		
		<!-- 了解实名认证 -->
		<up-modal :show="showKnow" :showCancelButton="false" :showConfirmButton="false">
			<view>
				<view class="refTitle">关于实名认证</view>
				<view class="mesg">1.根据海关规定：购买跨境商品需要对订购人进行实名认证。提交的姓名与身份证号码必须相符且真实有效，否则会影响海关审放。<br>
					2.实名购物也是您权利的保障，如果您对所购买的商品有疑问，您可以向海关申清查询货品是否经过海关正规进口流程。<br>
					3.我们不会向除中国海关报关相关机构外任何第三方提供用户的身份信息。<br>
					4.如您还有其他关于实名认证的问题可以联系我们客服为您处理。
				</view>
				<view style="padding: 50rpx;">
					<view class="iknow" @click="showKnow = false">我知道了</view>
				</view>
			</view>
		</up-modal>
		
		<!-- 删除确认 -->
		<up-modal
			:show="showRemove"
			title="确认删除吗？"
			content="海关要求购买跨境商品需提供订购人实名信息，如果删除所有实名信息，下单时需要重新认证。"
			confirmText="删除"
			cancelText="再想想"
			:confirmColor="Color"
			:showCancelButton="true"
			@confirm="commitRemove()"
			@cancel="showRemove = false">
		</up-modal>
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/Api/request.js'
	import { showToast } from '@/components/common.js'
	export default {
		setup(props, context) {
			const data = reactive({
				noInfo: false,
				showKnow: false,
				showRemove: false,
				pageInfo: {},
				loading: false,
				from: '',
				Color: uni.getStorageSync('theme_color')
			})
			
			function getListInfo() {
				data.loading = true
				get('/api/v1/identityCard').then((res) => {
					data.pageInfo = res.data[0] || {}
					if(res.data.length === 0) {
						data.noInfo = true
					} else {
						data.noInfo = false
					}
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			// 编辑
			function toModify() {
				uni.navigateTo({
					url: '/pages/mine/realName/edit?id=' + data.pageInfo.id
				})
			}

			// 删除
			function delBtn(id) {
				data.id = id
				data.showRemove = true
			}

			const commitRemove = async () => {
				let res = await post(`/api/v1/identityCard/` + data.pageInfo.id, {}, 'DELETE')
				showToast('删除成功')
				data.showRemove = false
				getListInfo()
			}
			
			// 去添加实名认证
			function addRealName() {
				uni.navigateTo({
					url: '/pages/mine/realName/edit'
				})
			}
			
			// 如果是从付款页面过来，则附带认证信息返回
			function backPay() {
				if(data.from) {
					uni.navigateBack({
						delta: 1
					})
				}
			}
			
			return {
				...toRefs(data),
				getListInfo,
				addRealName,
				commitRemove,
				delBtn,
				toModify,
				backPay
			}
		},
		onLoad(options) {
			this.from = options.from || ''
		},
		onShow() {
			this.getListInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		.info{
			padding: 30rpx;
			box-sizing: border-box;
		}
	}
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 30rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		width: 100%;
		.left{
			text{
				font-size: 28rpx;
				color: #2C2C2C;
				font-weight: 600;
			}
			.title{
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				.label{
					color: v-bind('Color');
					font-size: 22rpx;
					border: 1px solid v-bind('Color');
					padding: 2rpx 8rpx;
					margin-left: 10rpx;
					border-radius: 6rpx;
				}
			}
		}
		.right{
			text-align: right;
			.opa{
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				text{
					color: #6c6c6c;
					font-size: 26rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
	
	.empty{
		width: 100%;
		height: 100%;
		text-align: center;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		img{
			max-width: 100%;
		}
		.text{
			color: #98989F;
			font-size: 28rpx;
			line-height: 46rpx;
			margin-top: -90rpx;
		}
	}
	
	.btn_box{
		width: 100%;
		margin-top: 180rpx;
		.btn{
			width: 86%;
			height: 80rpx;
			background: v-bind('Color');
			border-radius: 80rpx;
			font-size: 30rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 30rpx;
		}
		.know{
			display: flex;
			align-items: center;
			justify-content: center;
			color: #9C9C9C;
			font-size: 30rpx;
		}
	}
	
	.refTitle{
		font-size: 30rpx;
		color: #000;
		padding: 0 0 30rpx;
		font-weight: bold;
		position: relative;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.mesg{
		font-size: 24rpx;
		color: #303030;
		line-height: 46rpx;
		font-weight: 600;
	}
	.iknow{
		width: 100%;
		height: 80rpx;
		background: v-bind('Color');
		font-size: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 80rpx;
	}
</style>
