<template>
	<div class="bg">
		<m-nav-bar mode="white" title="提现"></m-nav-bar>

		<img class="bg-img" :src="bgImgIcon">
		<div class="text">
			<div>可提现金额(元)</div>
			<div class="text-money">{{ userInfo.profitPrice / 100 }}</div>
		</div>
		<div class="form">
			<div class="head">提现金额</div>
			<van-field class="form-input0" format-trigger="onBlur" v-model="amount" center clearable
				placeholder="请输入金额">
				<template #button>
					<span @click="() => {
						amount = userInfo.profitPrice / 100
					
					}" class="font26" style="color:#498EF5">全部提现</span>
				</template>
				<template #left-icon>
					<span class="font48">¥</span>
				</template>

			</van-field>
			<div class="button">
				<van-button @click="cashToWx" class="cash-button" color="#01C18D" round icon="wechat" type="primary">
					提现到微信</van-button>
				<van-button @click="() => {
					cashToCardShow = true
				}" class="cash-button" color="#498EF5" round icon="credit-pay" type="primary">提现到银行卡
				</van-button>
			</div>
			<van-dialog @confirm="cashToCard" v-model:show="cashToCardShow" title="银行卡信息" show-cancel-button>
				<van-cell-group inset>
					<van-field v-model="encTrueName" label="收款人" placeholder="请收款人姓名" />
					<van-field @click="() => {
						bankPickerShow = true
					
					}" is-link v-model="bankName" label="银行" placeholder="请选择银行">

					</van-field>
					<van-field type="digit" v-model="encBankNo" label="银行卡号" placeholder="请输入银行卡号" />
					<van-field is-link url="/cashoutBankList" readonly label="银行卡列表" />
				</van-cell-group>
			</van-dialog>


		</div>
		<van-popup v-model:show="bankPickerShow" position="bottom">
			<van-picker :columns-field-names="wxBankListFieldnames" :columns="wxBankList" @confirm="getBankCode"
				@cancel="bankPickerShow = false" />
		</van-popup>
		<div class="record">
			<div class="head">
				<div class="head-rect1"></div>
				<div class="head-text1">提现记录</div>
			</div>
			<div class="body">
				<div v-for="(item, index) in wxCashoutList" :key="index" class="item">
					<div class="item-row1">
						<div>提现</div>
						<div style="color:#FF4D53">¥{{ item.extractPrice / 100 }}</div>
					</div>
					<div class="item-row2">
						<div>{{ item.createTime }}</div>
						<div>状态:<span v-if="item.status == '1'" style="color:#01C18D">提现成功 </span>
							<span v-if="item.status == '2'" style="color:red"> 提现失败</span>
						</div>
					</div>


				</div>

			</div>

		</div>


	</div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, onMounted } from 'vue'
import bgImgIcon from '@/assets/img/bgImg.png'
import { useStore } from 'vuex'
import api from '@/api'
import { Dialog, Toast, PickerOption } from 'vant';
import WXBANKLIST from '@/assets/js/wxBankList';
import { useRoute } from 'vue-router';
export default defineComponent({
	setup() {
		const store = useStore()
		const route = useRoute()
		const amount = ref(0)
		const userInfo = computed(() => {
			return store.state.userInfo
		})
		const wxCashoutList = ref<any[]>([])
		const cashToCardShow = ref(false)
		const bankPickerShow = ref(false)
		const bankCode = ref<number>()
		const bankName = ref('')
		const encBankNo = ref('')
		const encTrueName = ref('')
		const wxBankListFieldnames = { text: 'bankName', values: 'values', children: 'children' }
		const wxBankList = reactive(WXBANKLIST);
		const getBankCode = (val: {
			bankCode: number,
			bankName: string
		}) => {
			bankCode.value = val.bankCode
			bankName.value = val.bankName
			bankPickerShow.value = false

		}
		api.wx.studentWxExtractlist({
			pageNum: 1,
			pageSize: 1000
		}).then(res => {
			wxCashoutList.value = res.data.rows

		})
		const cashToCard = () => {
			if (amount.value < 0.3) {
				Toast.fail('提现金额需要0.3元以上')

				return
			}

			api.wx.studentWxExtractWxwithbankdrawal({
				amount: amount.value * 100,
				bankCode: bankCode.value,
				encBankNo: encBankNo.value,
				encTrueName: encTrueName.value

			}).then(res => {
				Toast.success('提现成功,到账有延迟')
				store.dispatch('getUserInfo');
				api.wx.studentWxExtractlist({
					pageNum: 1,
					pageSize: 1000
				}).then(res => {
					wxCashoutList.value = res.data.rows

				})


			})





		}
		const cashToWx = () => {
			Dialog.confirm({
				title: '提现申请',
				message:
					'提现到微信',
			})
				.then(() => {
					if (amount.value < 1) {
						Toast.fail('提现金额需要大于1元')
						return
					}
					api.wx.studentWxExtractWithdraw({
						amount: amount.value * 100
					}).then(res => {
						Toast.success('提现成功,到账有延迟')
						store.dispatch('getUserInfo');
						api.wx.studentWxExtractlist({
							pageNum: 1,
							pageSize: 1000
						}).then(res => {
							wxCashoutList.value = res.data.rows

						})

					})
					// on confirm
				})
				.catch(() => {
					// on cancel
				});






		}
		onMounted(() => {
			if (route.query.cashToCardShow) {
				cashToCardShow.value = Boolean(route.query.cashToCardShow)
				encBankNo.value = String(route.query.encBankNo)
				bankName.value = String(route.query.bankName)
				bankCode.value = Number(route.query.bankCode)
				encTrueName.value = String(route.query.encTrueName)

			}


		})
		return {
			wxBankList,
			wxBankListFieldnames,
			bankCode,
			bankName,
			encBankNo,
			encTrueName,
			wxCashoutList,

			userInfo,
			searchValue: "",
			profitPrice: "0.00",
			showCashout: ref(false),
			bankPickerShow,
			cashToCardShow,
			bgImgIcon,
			amount,
			cashToWx,
			cashToCard,
			getBankCode

		}
	},
	components: {



	},
})
</script>

<style lang="scss" scoped>
.font48 {
	font-size: 48px;
}

.font26 {
	font-size: 26px;
}

.bg {

	min-height: 100vh;
	width: 100%;

	.bg-img {
		position: absolute;
		top: 0;
		width: 750px;
		height: 424px;
		left: 0;
		z-index: -10;
	}
}

.form {
	width: 690px;
	height: 334px;
	margin: 0 auto;
	margin-top: 40px;
	background: #fff;
	border-radius: 16px;
	padding: 30px 30px 30px 30px;

	.button {
		width: 100%;
		height: 160px;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: space-between;

		.cash-button {
			width: 300px;
			height: 80px;
		}

	}

	.head {
		color: #0A1A33;
		text-align: left;
		font-size: 30px;
		font-weight: bold;
	}

	.form-input0 {
		font-size: 48px;
		padding-left: 0;
		padding-right: 0;
		border-bottom: 2px #E8E8E8 solid;
	}

}

.text {
	margin-top: 58px;
	color: #fff;
	padding-left: 30px;
	text-align: left;
	font-size: 26px;

	.text-money {
		font-size: 80px;
		margin-top: 20px;
		text-align: left;
	}

	.text-money::before {
		content: '¥ ';
		font-size: 50px;
	}
}

.record {
	width: 690px;
	padding-left: 30px;
	padding-right: 30px;
	background: #ffffff;
	margin: 0 auto;
	margin-top: 18px;

	.head {
		width: 100%;
		height: 92px;
		display: flex;
		align-content: center;
		align-items: center;
		border-bottom: 2px #E8E8E8 solid;

		.head-rect1 {
			width: 6px;
			height: 30px;
			background: #498EF5;
		}

		.head-text1 {
			font-size: 34px;
			color: #333;
			font-weight: bold;
			margin-left: 15px;
		}
	}

	.body {
		.item {
			display: flex;
			width: 100%;
			height: 138px;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
			border-bottom: 2px #E8E8E8 solid;

			.item-row1 {
				display: flex;
				width: 100%;
				font-size: 30px;
				vertical-align: baseline;
				height: 42px;
				line-height: 42px;
				justify-content: space-between;


			}

			.item-row2 {
				display: flex;
				width: 100%;
				font-size: 24px;
				height: 34px;
				line-height: 34px;
				justify-content: space-between;
				margin-top: 14px;

			}

		}
	}


}
</style>