<template>
	<div class="login-form">
		<a-card :bordered="false">
			<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical" class="ant-advanced-search-form mb-4">
				<a-row :gutter="24">
					<a-col :span="24">
						<a-form-item label="手机号：" name="phone">
							<a-input v-model:value="formData.phone" placeholder="请输入手机号" allow-clear/>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="账号：" name="account">
							<a-input v-model:value="formData.account" placeholder="请输入账号"/>
						</a-form-item>
					</a-col>
					<a-col :span="15">
						<a-button type="primary" @click="onSubmit" :loading="submitLoading">立即绑定</a-button>
					</a-col>
				</a-row>
			</a-form>
		</a-card>
	</div>
</template>

<script>
import tool from '@/utils/tool'
import {cloneDeep} from 'lodash-es'
import {required} from '@/utils/formRules'
import bindingApi from "@/api/auth/bindingApi";

export default {
	name: 'binding',
	components: {},
	data() {
		return {
			formRef: ref(),
			formRules: {
				phone: [required('请输入')],
				account: [required('请输入')],
			},
			formData: {
				phone: '',
				account: '',
			},
			submitLoading: false,
		}
	},
	methods: {
		async onSubmit() {
			this.$refs.formRef.validate().then(async () => {
				this.submitLoading = true
				bindingApi
					.binding(cloneDeep(this.formData))
					.then((data) => {
					})
					.finally(() => {
						this.submitLoading = false
					})
			})
		}
	},
}

</script>

<style scoped>

</style>
