<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.unbind')" title-align="center" background-color="#007AFF" />
	</page-meta>
	<view class="secure-bind-wrap">
		<view class="main-wrap">
			<u--form :model="form" :rules="rules" ref="form" labelWidth="31">
				<u-form-item prop="password" borderBottom>
					<u--input v-model="form.password" type="password" clearable border="none"
						:placeholder="$tt('login.inputPassword')" prefixIcon="lock-fill"
						prefixIconStyle="font-size: 44rpx; color: #3c9cff; margin-right: 10rpx"
						:clearable="true"></u--input>
				</u-form-item>
			</u--form>
			<view style="margin-top: 40rpx;">
				<u-button type="primary" :text="$tt('avatar.relieve')" @click="handleSecureUnbundle()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { secureBind } from '@/apis/modules/common.js'
	export default {
		data () {
			return {
				form: {
					verifyType: 1,
					password: '',
				},
				rules: {
					password: {
						type: 'string',
						required: true,
						min: 5,
						max: 20,
						message: this.$tt('login.inputPassword'),
						trigger: ['blur', 'change']
					},
				}
			};
		},
		methods: {
			handleSecureUnbundle () {
				this.$refs.form.validate().then(res => {
					secureBind(this.form).then(response => {
						if (response.code == 200) {
							uni.switchTab({
								url: '/pages/tabBar/user/user'
							});
						} else {
							uni.$u.toast(response.msg);
						}
					}).catch(err => {
						console.log(err);
					});
				})
			},
		}
	};
</script>

<style lang="scss">
	.secure-bind-wrap {
		.main-wrap {
			padding: 40rpx;
			background: #ffffff;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	}
</style>