<template>
	<view class="whole">
		<view class="warning">提示：为保证顺利清关，请确保实名认证和付款人信息保持一致</view>
		<view class="item">
			<view class="row">
				<text>姓名</text>
				<input v-model="pageInfo.name" placeholder="请填写真实" class="input" />
			</view>
			<view class="row">
				<text>身份证</text>
				<input v-model="pageInfo.cert_id" placeholder="请填写您的身份证号码" class="input" />
			</view>
		</view>
		<view class="btn" @click="toCommit()">保存</view>
	</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({
				pageInfo: {
					name: '',
					cert_id: ''
				},
				id: '',
				Color: uni.getStorageSync('theme_color')
			})
			
			function getListInfo() {
				get('/api/v1/identityCard').then((res) => {
					data.pageInfo = res.data[0] || {}
				})
			}
			
			function toCommit(id) {
				if(!data.pageInfo.name || !data.pageInfo.cert_id) {
					showToast('请填写完整信息')
					return false
				}
				if(data.id) {
					post('/api/v1/identityCard/' + data.id, data.pageInfo, 'PUT').then((res) => {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 1000,
							mask: true,
							success() {
								setTimeout(() => {
									uni.navigateBack({ delta: 1 })
								}, 1000)
							}
						})
					})
				} else {
					post('/api/v1/identityCard', data.pageInfo).then((res) => {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 1000,
							mask: true,
							success() {
								setTimeout(() => {
									uni.navigateBack({ delta: 1 })
								}, 1000)
							}
						})
					})
				}
			}

			return {
				...toRefs(data),
				getListInfo,
				toCommit
			}
		},
		onLoad(options) {
			this.id = options.id || ''
			this.getListInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		padding: 16rpx 26rpx;
		box-sizing: border-box;
		.warning{
			background: rgba(241,73,57,0.06);
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			color: v-bind('Color');
			font-size: 22rpx;
			margin-bottom: 20rpx;
		}
		.btn{
			position: fixed;
			bottom: 60rpx;
			width: 86%;
			height: 80rpx;
			background: v-bind('Color');
			border-radius: 80rpx;
			font-size: 30rpx;
			color: #fff;
			left: 7%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.item{
		background: #fff;
		padding: 10rpx 30rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		width: 100%;
		.row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 0;
			text{
				font-size: 28rpx;
				color: #656565;
				font-weight: 600;
			}
			.input{
				font-size: 28rpx;
				color: #2C2C2C;
				text-align: right;
			}
		}
		
	}
</style>
