<template>
	<view class="pb100">
		<view class="form-group">
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('CK_KS_14') }}
				</view>
				<view class="disabled-input">{{ form.memberName }}</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('MN_F_23') }}
				</view>
				<view class="disabled-input">{{ form.phone }}</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('MY_CK_8') }}
				</view>
				<input class="form-input" type="text" v-model="form.changeMemberName" :placeholder="$t('S_C_70')" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('MY_CK_9') }}
				</view>
				<input class="form-input" type="text" v-model="form.changePhone" :placeholder="$t('S_C_70')" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('w_0043') }}
				</view>
				<input class="form-input" type="text" v-model="form.verificationCode" :placeholder="$t('S_C_70')" />
				<button class="get-code-btn" type="default" @click="sendCode"
					:disabled="is_send">{{ send_btn_txt }}</button>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('MY_CK_10') }}
				</view>
				<textarea auto-height class="form-textarea" v-model="form.description" placeholder="" />
			</view>
			<view class="form-item" style="display: block;">
				<view class="form-label">
					<text class="white mr10">*</text>
					{{ $t('MY_CK_11') }}
				</view>
				<view class="d-b-c p-20-0">
					<view>
						<image class="card-pic" :src="form.idFront" mode="aspectFit"></image>
					</view>
					<view>
						<image class="card-pic" :src="form.idBack" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="form-item" style="display: block;">
				<view class="form-label">
					<text class="white mr10">*</text>
					{{ $t('MY_CK_12') }}
				</view>
				<view class="d-b-c p-20-0">
					<view>
						<image @click="clearImage('changeIdFront')" v-if="form.changeIdFront" class="card-pic"
							:src="form.changeIdFront" mode="aspectFit"></image>
						<image @click="openUpload('changeIdFront')" v-else class="card-pic" src="/static/new-card.png"
							mode="aspectFit"></image>
					</view>
					<view>
						<image @click="clearImage('changeIdBack')" v-if="form.changeIdBack" class="card-pic"
							:src="form.changeIdBack" mode="aspectFit"></image>
						<image @click="openUpload('changeIdBack')" v-else class="card-pic" src="/static/new-card.png"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('MY_CK_6') }}({{currencyIcon()}})
				</view>
				<view class="disabled-input">{{ formatNum(form.amount) }}</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('MY_WAL_22') }}
				</view>
				<textarea auto-height class="form-textarea" v-model="form.remark" placeholder="" />
			</view>
		</view>
		<button class="normal-sub-btn" style="margin-top: 37rpx;" @click="isPopup = true">{{ $t('w_0035') }}</button>
		<template v-if="isPopup">
			<view class="pop-bg" @click="isPopup = false"></view>
			<view class="pop-success" v-if="isPopup">
				<view class="d-c d-b-c hh100">
					<view class="d-e-c ww100"><u-icon name="close" size="34rpx" color="#999"
							@click="isPopup = false"></u-icon></view>
					<view><u-icon size="77rpx" name="/static/icon/warn.png"></u-icon></view>
					<view class="f24 gray9 tc">{{ $t('w_0422') }}</view>
					<view class="f24 gray9 tc">{{$t('PER_DA_35')}}</view>
					<button class="pop-btn" @click="subfunc()">{{ $t('w_0035') }}</button>
				</view>
			</view>
		</template>
		<Upload :num="1" v-if="isUpload" @getImgs="getImgsFunc"></Upload>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Popup,
			Upload
		},
		data() {
			return {
				isPopup: false,
				/*是否已发验证码*/
				is_send: false,
				/*发送按钮文本*/
				send_btn_txt: this.$t('w_0055'),
				/*当前秒数*/
				second: 60,
				upload_type: '',
				isUpload: false,
				form: {
					amount: '', //扣费金额
					changeIdFront: '', //变更证件正面
					changeIdBack: '', //变更证件反面
					changeMemberName: '', //变更会员名称
					changePhone: '', //变更联系方式
					description: '',
					idBack: '', //证件反面
					idFront: '', //证件正面
					memberCode: '', //会员编号
					memberName: '', //会员名称
					phone: '', //联系方式
					pkAccount: 0, //扣费账户ID
					remark: '',
					verificationCode: ''
				}
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				let self = this;
				self.loading = false;
				self._get('member/api/change-domicile/show-change-domicile', {}, res => {
					Object.assign(self.form, res.data);
				});
			},
			subfunc() {
				let self = this;
				let params = self.form;
				let flag = false;
				let values = [{
						name: self.$t('S_C_70') + self.$t('w_0274'),
						value: 'changeMemberName',
						callback: function(e) {
							return e != '';
						}
					}, {
						name: self.$t('S_C_70') + self.$t('MY_CK_10'),
						value: 'description',
						callback: function(e) {
							return e != '';
						}
					},
					{
						name: self.$t('S_C_70') + self.$t('MY_CK_5'),
						value: 'changePhone',
						callback: function(e) {
							return e != '';
						}
					},
					{
						name: self.$t('S_C_70') + self.$t('MY_ORD_60'),
						value: 'changeIdFront',
						callback: function(e) {
							return e != '';
						}
					},
					{
						name: self.$t('S_C_70') + self.$t('MY_ORD_61'),
						value: 'changeIdBack',
						callback: function(e) {
							return e != '';
						}
					},
					{
						name: self.$t('S_C_70') + self.$t('w_0043'),
						value: 'verificationCode',
						callback: function(e) {
							return e != '';
						}
					}
				];
				values.forEach((item, index) => {
					if (!flag && !item.callback(params[item.value])) {
						flag = item.name;
						return;
					}
				});
				if (flag) {
					uni.showToast({
						title: flag,
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				self._post('member/api/change-domicile/change-domicile', params, res => {
					uni.showModal({
						title: self.$t('w_0034'),
						content: res.msg,
						success() {
							uni.navigateBack();
						}
					})
				})
			},
			/*获取上传的图片*/
			getImgsFunc(e) {
				let self = this;
				self.isUpload = false;
				if (e && typeof e != 'undefined') {
					self.form[self.upload_type] = e[0].url;
				}
			},
			/*打开上传图片*/
			openUpload(type) {
				this.upload_type = type;
				this.isUpload = true;
			},
			clearImage(name) {
				this.form[name] = '';
			},
			/*发送短信*/
			sendCode() {
				let self = this;
				if (self.form.changePhone == '') {
					uni.showToast({
						title: self.$t('w_0134'),
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				console.log(self.form.changePhone)
				self._get(
					'member/api/sms/verification', {
						phone: self.form.changePhone
					},
					result => {
						uni.showToast({
							title: self.$t('MY_WAL_49')
						});
						self.is_send = true;
						self.changeMsg();
					},
					err => {
						console.log(err);
					}
				);
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + 'S';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = this.$t('w_0055');
					this.second = 60;
					this.is_send = false;
				}
			},
			hidePopupFunc() {
				this.isPopup = false;
			}
		}
	};
</script>

<style lang="scss">
	.agreement-box {
		width: 750rpx;
		background: #ffffff;
		padding: 28rpx 22rpx;
		box-sizing: border-box;
		margin-top: 2rpx;
		margin-bottom: 20rpx;

		.agreement-content {
			font-size: 24rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #999999;
			line-height: 32rpx;
			word-break: break-all;
			margin-bottom: 32rpx;
		}

		.agreement-btn {
			min-width: 320rpx;
			height: 76rpx;
			line-height: 1.5;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #282828;
			border-radius: 38rpx;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.form-title {
		width: 750rpx;
		height: 106rpx;
		background: #fb3024;
		padding-left: 44rpx;
		position: relative;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #fff;
		line-height: 106rpx;
		font-weight: bold;
		z-index: 1;
	}

	.form-title::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		left: 25rpx;
		width: 6rpx;
		height: 24rpx;
		background-color: #fb3024;
		z-index: 1;
	}

	.form-group {
		padding: 0 22rpx;
		background: #ffffff;

		.form-item {
			min-height: 104rpx;
			box-sizing: border-box;
			padding: 15rpx 0;
			line-height: 1.5;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #eee;

			.icon-jiantou {
				font-size: 32rpx;
				color: 090000;
			}

			.form-tips {
				font-size: 24rpx;
				color: #999;
			}

			.form-label {
				width: 255rpx;
				flex-shrink: 0;
				word-break: break-all;
				margin-right: 20rpx;
			}

			.disabled-input {
				width: 450rpx;
				height: 78rpx;
				padding: 0 18rpx;
				line-height: 78rpx;
				background: #eee;
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}

			.form-textarea {
				width: 450rpx;
				padding: 0 18rpx;
				line-height: 1.5;
				font-size: 28rpx;
				color: #333;
				flex: 1;
				background: #fff;
			}

			.form-input {
				width: 450rpx;
				height: 78rpx;
				padding: 0 18rpx;
				line-height: 78rpx;
				background: #fff;
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}

			.form-item:last-child {
				border: none;
			}
		}
	}

	.form-upload {
		padding: 30rpx 23rpx;
	}

	.form-upload-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.form-upload-tips {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.form-upload-tips2 {
		font-size: 24rpx;
		color: #fb3024;
		line-height: 1.5;
	}

	.upload-add {
		width: 142rpx;
		height: 142rpx;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
	}

	.tips-box {
		padding: 33rpx 27rpx 29rpx 41rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		word-break: break-all;
	}

	.address-box {
		width: 706rpx;
		padding: 21rpx 26rpx;
		background-color: #f5f5f5;
		border-radius: 15rpx;
	}

	.address-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.radio-check {
		width: 40rpx;
		height: 40rpx;
		background: #ffffff;
		border: 1rpx solid #dddddd;
		border-radius: 50%;
		box-sizing: border;
		position: relative;
		margin-right: 20rpx;
	}

	.radio-check.checked {
		border: 1rpx solid #fb3024;
		background: #fb3024;
	}

	.icon.icon-guanbi {
		font-size: 24rpx;
		color: #999;
	}

	.s-pop-btn {
		width: 462rpx;
		height: 78rpx;
		background: #fb3024;
		border-radius: 39rpx;
		text-align: center;
		line-height: 1.2;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		margin: 0 auto;
		margin-bottom: 68rpx;
	}

	.get-code-btn {
		min-width: 72rpx;
		height: 62rpx;
		background: #333333;
		line-height: 62rpx;
		padding: 0rpx 20rpx;
		border-radius: 40rpx;
		white-space: nowrap;
		// border: 1rpx solid $dominant-color;
		color: #ffffff;
		box-sizing: border-box;
		margin-left: 46rpx;
		font-size: 24rpx;
	}

	.get-code-btn[disabled='true'] {
		// border: 1rpx solid #cccccc;
		color: #333;
		background-color: #ffffff;
	}

	.card-pic {
		width: 316rpx;
		height: 192rpx;
	}
</style>