<script setup>
	/**
	 * 账号挂失
	 */
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		useStore
	} from 'vuex'

	// api
	import api from '@/api/index'
	// 工具库
	import util from '@/common/js/util.js'
	// 支付密码
	import payPwd from '@/components/mine/payPwd.vue'
	const {
		proxy
	} = getCurrentInstance()
	// vuex
	const store = useStore()

	// 表单
	const form = reactive({
		// 手机号
		phoneNumber: '',
	})
	// 用户信息
	const userinfo = computed(() => store.state.user.userinfo)

	// 登录
	function handleSubmit() {
		// 校验
		if (!form.phoneNumber) {
			util.alert('请输入手机号')
			return
		}

		// 
		proxy.$refs.payPwdRef.open()
	}

	/**
	 * 事件
	 * @param {Object} event
	 */
	function handlePayPwd(event) {
		console.log('event', event)
		const data = {
			...form
		}
		data.secondLevelCipher = event

		// 
		api.mine.unfreezeAccount({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="appbw">
		<view class="container">
			<view class="logo mauto">
				<image class="logo br10" src="/static/logo.png" mode="aspectFit" />
			</view>

			<view class="form mt60 mlr60 mb30">
				<view class="title mtb30">账号解冻</view>

				<view class="inputBox mtb20 ptb10 plr30">
					<input type="text" v-model="form.phoneNumber" placeholder="请输入手机号" />
				</view>

				<view class="btn lg bar black mtb60" @click="handleSubmit">解冻</view>
			</view>
		</view>

		<!-- 支付密码 -->
		<payPwd ref="payPwdRef" :check="true" @confirm="handlePayPwd" />
	</view>
</template>

<style lang="scss">
	.image {
		width: 100%;
		height: 100%;
	}

	// 
	.container {
		margin-top: 15vh;

		// 标志
		.logo {
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>