<template>
	<view class="main">
		<view class="contents">

			<u-form :model="dataForm" labelWidth="auto" ref="uForm">

				<view class="view-class">
					<u-form-item :label="$t('CK_KS_14')" label-width="200rpx" prop="memberName">
						<u-input v-model="dataForm.memberName" disabled placeholder-class="place-class"
							class="border-color" placeholder="请输入收货人姓名" />

					</u-form-item>
				</view>
				<view class="view-class">
					<u-form-item :label="$t('w_0052')" label-width="200rpx" prop="phone">
						<u-input v-model="dataForm.phone" disabled placeholder-class="place-class" class="border-color"
							placeholder="请输入联系方式" />

					</u-form-item>
				</view>
				<view class="view-class">
					<u-form-item label="新会员姓名" label-width="200rpx" prop="changeMemberName">
						<u-input v-model="dataForm.changeMemberName" placeholder-class="place-class"
							class="border-color" placeholder="请输入收货人姓名" />

					</u-form-item>
				</view>
				<view class="view-class">
					<u-form-item label="新联系方式" label-width="200rpx" prop="changePhone">
						<u-input v-model="dataForm.changePhone" placeholder-class="place-class" class="border-color"
							placeholder="请输入联系方式" />

					</u-form-item>
				</view>
				<view class="view-class">
					<u-form-item label-width="200rpx" :label="$t('w_0043')" prop="verificationCode" borderBottom ref="item1">
						<u--input v-model="dataForm.verificationCode" placeholder="请输入" border="none"></u--input>
						<u-button @tap='getCode' class="getcodes" type="primary" shape="circle" :text="tips"
							color="#2FBC42"></u-button>
					</u-form-item>
				</view>
				<view class="view-class">
					<u-form-item label="情况说明" class="label-style" label-width="200rpx" prop="description">
						<u-textarea v-model="dataForm.description" placeholder-class="place-class" class="border-color"
							placeholder="请输入情况说明" />

					</u-form-item>

				</view>
				<view class="view-class" style="display: flex; align-items: center;justify-content: space-between;">
					<u-form-item labelPosition='top' required label-width="200rpx" label="原证件(正面)">
						<uploadImg :ifsfz='true' @imageUploaded='imageUploaded3' prop="idFront"
							style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard1.png`"
							v-model="dataForm.idFront"></uploadImg>
					
					</u-form-item>
					<u-form-item  labelPosition='top' required label-width="200rpx" label="原证件(反面)">
						<uploadImg :ifsfz='true' @imageUploaded='imageUploaded4' prop="idBack"
							style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard2.png`"
							v-model="dataForm.idBack"></uploadImg>
					
					</u-form-item>
					<!-- <u-form-item labelPosition='top' label="原会员证件照片" prop="remark">
						<image class="idImages" style="margin-right: 20rpx;" :src="dataForm.idFront" mode=""></image>
						<image class="idImages" :src="dataForm.idBack" mode=""></image>
					</u-form-item> -->

				</view>
				<view class="view-class" style="display: flex; align-items: center;justify-content: space-between;">
					<!-- <u-form-item labelPosition='top' label="新会员证件照片" prop="changeIdFront">
						<uploadImg style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard1.png`"
							v-model="dataForm.changeIdFront"></uploadImg>
						<uploadImg :bgimg="`../../../static/images/idCard2.png`" v-model="dataForm.changeIdBack">
						</uploadImg>
					</u-form-item> -->
					<u-form-item labelPosition='top' required label-width="180rpx" label="证件(正面)">
						<uploadImg :ifsfz='true' @imageUploaded='imageUploaded1' prop="changeIdFront"
							style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard1.png`"
							v-model="dataForm.changeIdFront"></uploadImg>

					</u-form-item>
					<u-form-item  labelPosition='top' required label-width="180rpx" label="证件(反面)">
						<uploadImg :ifsfz='true' @imageUploaded='imageUploaded2' prop="changeIdBack"
							style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard2.png`"
							v-model="dataForm.changeIdBack"></uploadImg>

					</u-form-item>
				</view>
				<view class="view-class">
					<u-form-item label="业务扣费(￥)" label-width="200rpx" prop="amount">
						<u-input v-model="dataForm.amount" disabled placeholder-class="place-class" class="border-color"
							placeholder="请输入" />

					</u-form-item>
				</view>
				<view class="view-class">
					<u-form-item :label="$t('MY_WAL_22')" label-width="200rpx" prop="remark">
						<u-input v-model="dataForm.remark" placeholder-class="place-class" class="border-color"
							placeholder="请输入" />

					</u-form-item>
				</view>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
			</u-form>
		</view>

		<u-button type="success" shape="circle" class="btn" @click="submit">{{$t('w_0035')}}</u-button>
		<u-popup class="thePopup" :show="successShow" mode="center" @close="successShow = false">
			<view class="successPopup">

				<view class="poupTop">
					<view class="theiconbox">
						<u-icon name="checkbox-mark" color="#ffffff" size="26"></u-icon>
					</view>
					<view class="theicontitle">
						提交成功
					</view>
				</view>
				<view class="poupContent">
					我们将在24小时内完成业务受理！具体进度将会以
					短信通知形式发送您，请注意查收！</br>
					售后电话：400-111-2818
				</view>
				<view class="poupBtn" @click="sureBtn">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as sel from '@/config/selfService.js'
	import * as ban from "@/config/balance.js"
	import uploadImg from '@/components/uploadImg.vue'
	import {
		setToken
	} from '@/config/auth.js'
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				userInfo: '',
				check: false,
				address: '',
				defaultCode: [],
				urls: '/member/api/maker-space/update-file',
				dataForm: {
					memberName: "",
					phone: "",
					changeMemberName: "",
					changePhone: "",
					description: "",
					amount: "",
					remark: "",
					idFront:"",
					idBack:"",
					changeIdFront: "",
					changeIdBack: ""

				},
				choiceValue: "",
				successShow: false,
				addressList: [],
				rules: {
					changeMemberName: [{
						// 必填项
						required: true,
						// 提示内容（会出现在u-form-item内的底部）
						message: "姓名不能为空",
					}],
					
					changeIdFront: [{
						// 必填项
						required: true,
						// 提示内容（会出现在u-form-item内的底部）
						message: "证件照片不能为空",
					}],
					changeIdBack: [{
						// 必填项
						required: true,
						// 提示内容（会出现在u-form-item内的底部）
						message: "证件照片不能为空",
					}],
					description: [{
						// 必填项
						required: true,
						// 提示内容（会出现在u-form-item内的底部）
						message: "情况说明不能为空",

						trigger: ["change"],
					}],
					changePhone: [{
							required: true,
							message: "请输入手机号",
							trigger: ["blur"],
						},
						// {
						// 	validator: (rule, value, callback) => {
						// 		return this.$u.test.mobile(value);
						// 	},
						// 	message: "手机号格式不正确",
						// 	trigger: ["blur"],
						// },
					],
					idFront: [{
						// 必填项
						required: true,
						// 提示内容（会出现在u-form-item内的底部）
						message: "原证件照片不能为空",
					}],
					idBack: [{
						// 必填项
						required: true,
						// 提示内容（会出现在u-form-item内的底部）
						message: "原证件照片不能为空",
					}],
				},
				tips: '',
				seconds: 60,
			}
		},
		onLoad() {
			this.applyChange()


		},

		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			imageUploaded1(url){
				this.dataForm.changeIdFront= url
			},
			imageUploaded2(url){
				this.dataForm.changeIdBack= url
			},
			imageUploaded3(url){
				this.dataForm.idFront= url
			},
			imageUploaded4(url){
				this.dataForm.idBack= url
			},
			applyChange() {
				sel.showChangeDomicile().then((res) => {
					this.dataForm = res.data;

				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.dataForm.changePhone) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						ban.getVerification({
							phone: this.dataForm.changePhone
						}).then((res) => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast(this.$t('MY_WAL_49'));
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast("请先输入手机号")
					return
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},

			submit() {
				this.$refs.uForm.validate().then((res) => {
					sel.saveChangeDomicile(this.dataForm).then((res) => {
						if (res.code == '200') {
							// uni.showToast({
							// 	title: res.msg,
							// 	icon: 'none',
							// 	success() {

							// 	}
							// })
							this.successShow = true
						}
					})
				})
			},
			sureBtn() {
				uni.navigateBack()
			},



		},
	}
</script>

<style lang="scss" scoped>
	.custom-radio-label {
		display: flex;
		margin-top: 30rpx;
	}

	.custom-label-content {
		margin-left: 20rpx;

		.label_name {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}

		.label_phone {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;
		}

		.label_address {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
		}
	}

	/deep/ .u-form-item__body__right__message {
		margin-left: 215rpx !important;
		padding-bottom: 20rpx;
	}

	.drop {
		image {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 0;
			top: 30rpx;
		}
	}

	.check {
		position: relative;

		view {
			width: 36rpx;
			height: 36rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 50%;
			margin-top: 25rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 0rpx;
			top: 25rpx;
			// margin-top: 20rpx;
		}
	}

	.lis_address {
		background: rgba(231, 20, 26, 0.08);
		border-radius: 15rpx;
		padding: 20rpx 26rpx;

		.lis_title {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FB3024;
		}
	}

	.label-style {
		display: block !important;
	}

	/deep/ .label-style .u-form-item__body__left {
		display: block !important;
		margin-top: 20rpx;
	}

	.uni-textarea {
		height: 100rpx;
	}

	.view-class {
		border-bottom: 1rpx solid #eee;
		margin: 0 30rpx;
		position: relative;
	}

	.border-color {
		border: none;

	}

	page {
		background-color: #f2f2f2;
	}

	.contents {
		background-color: #fff;

		.idImages {
			width: 316rpx;
			height: 192rpx;
		}

	}

	.btn {
		background-color: #FB3024;
		border: none;
		height: 92rpx;
		line-height: 92rpx;
		font-size: 30rpx;
		margin: 40rpx auto;
		width: 690rpx;
	}

	.successPopup {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx 60rpx;

		.poupTop {
			display: flex;
			align-items: center;

			.theiconbox {
				background-color: #029b00;
				border-radius: 50%;
				display: flex;
				align-content: center;
				justify-content: center;
			}

			.theicontitle {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				margin-left: 13rpx;
				color: #333333;
			}
		}

		.poupContent {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 42rpx;
			color: #666666;
		}

		.poupBtn {
			background: #FB3024;
			border-radius: 39rpx;
			padding: 26rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			margin-top: 70rpx;
			margin-bottom: 40rpx;
		}
	}

	::v-deep .u-popup__content {
		background-color: rgba(0, 0, 0, 0);
	}

	.getcodes {
		width: 197rpx;
		// height: 76rpx;
		background: #2FBC42;
		border-radius: 38rpx;
		color: #fff;
	}
</style>