<template>
	<van-overlay :show="true">
		<div class="wrapper" @click.stop>
			<div class="block">
				<van-form @submit="handleCashout">
					<van-cellGroup inset>
						<van-field v-model="amount" label="提现金额(元)" type="number" placeholder="请输入提现金额" />
					</van-cellGroup>
					<div class="submit-box">
						<van-button :loading="loading" :disabled="!amount" type="primary" hairline native-type="submit"
							loading-text="结算中..."> 提现 </van-button>
						<van-button @click="closeCashout" type="default" hairline> 取消 </van-button>
					</div>
				</van-form>
			</div>
		</div>
	</van-overlay>
</template>

<script lang="ts">
import { Toast } from "vant";
import { CashOutModel } from "@/model/cashOut";
import { ref, defineComponent } from "vue";
export default defineComponent({
	setup(props, context) {
		const cashOutModel = new CashOutModel();
		const useCashout = () => {
		
			const amount = ref<number>();
			const loading = ref(false);
			const cashout = async () => {
				if (!amount.value) {
					Toast.fail("请输入金额");
					return false;
				}
				loading.value = true;
				const data = await cashOutModel.cashout(amount.value * 100);
				loading.value = false;
				if (data.code === 200) {
					Toast.success("提现成功");
					return true;
				} else {
					Toast.fail(data.msg);
					return false;
				}
			};
			const handleCashout = async () => {
				if (await cashout()) {
					console.log(context.emit)
					context.emit('close')


				}
			};
			const closeCashout = ()=>{
				context.emit('close')

			}
			return {

				amount,
				loading,
				cashout,
				handleCashout,
				closeCashout
			};
		};

		return {
			...useCashout()


		}
	},
})
</script>



<style scoped lang="scss">
.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.block {
	width: 600px;
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
}

.user-img {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	margin-bottom: 10px;
}

.submit-box {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 10px;
}
</style>
