<template>
	<div class="">
		<div class="header0">
			<m-nav-bar :transparent="true" title="提现记录" style="color: #ffffff" />
			<div class="btn1-container">
				<div @click="()=>{
					push('/drawByBank')
					}" class="btn1">
					<img class="" src="@/assets/img/提现到银行卡.png" />
					<span class="btn1-text">提现到银行卡</span>
				</div>
			</div>
		</div>
		<div class="rect1"></div>
		<div class="list">
			<div class="draw">
				<span class="draw-text1">最近提现·一点即提</span>
				<span class="draw-text2">查看全部</span>
			</div>
			<div @click="()=>{
				push({
					name:'drawByBank',
					query:{
						encBankNo:item.encBankNo,
						encTrueName:item.encTrueName,
						bankCode:item.bankCode

					}
				})
				}" v-for="(item,index) in wxBankCardList" class="list-item" :key="index">
				<img src="@/assets/img/招行.png" class="bank-logo" />
				<div>
					<div class="list-item-text1">{{item.encTrueName}}</div>
					<div class="list-item-text2">{{getBankNameByCode(item.bankCode)}}({{item.encBankNo}})</div>
				</div>
				<div class="list-item-text3">{{item.createTime}}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { cashOut } from "@/api";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useWxBank } from "@/hooks/bank/wxBank"
const query = useRouter().currentRoute.value.query
const wxBankCardList = ref([{}])
const { wxBankList,getBankNameByCode } = useWxBank()
const push = useRouter().push
const getWxBankList = () => {
	cashOut
		.studentWxBankList({
			pageNum: 1,
			pageSize: 50,
		})
		.then((res) => {
			wxBankCardList.value = res.data.rows;
            console.log(res.data.rows)
		});
    
};
getWxBankList()
</script>

<style lang="scss" scoped>
.header0 {
	background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
}
.btn1-container {
	padding-top: 26px;
	padding-bottom: 30px;
}
.btn1 {
	margin: 0 auto;
	width: 256px;
	border-radius: 10px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 55px;
	.btn1-text {
		font-size: 16px;
		color: #498ef5;
	}

	img {
		width: 31px;
		height: 24px;
		margin-right: 8px;
	}
}
.rect1 {
	width: 100%;
	height: 13px;
	background: #f5f5f5;
}
.list {
	.draw {
		width: 100%;
		height: 63px;
		padding-left: 29px;
		padding-right: 29px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.draw-text1 {
			font-size: 15px;
			color: #333;
			font-weight: 600;
			font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
		}
		.draw-text2 {
			font-size: 13px;
			color: #498ef5;
		}
	}
	.list-item {
		width: 345px;
		height: 65px;
		margin: 0 auto;
		display: flex;
		position: relative;
		align-content: flex-start;
		align-items: flex-start;
		border-bottom: 1px solid #e8e8e8;
		.bank-logo {
			width: 25px;
			height: 25px;
			margin-right: 8px;
			margin-top: 19px;
			// opacity: 0;
		}
		.list-item-text1 {
			font-size: 15px;
			margin-top: 11px;
		}
		.list-item-text2 {
			font-size: 13px;
			color: #5c6066;
		}
		.list-item-text3 {
			position: absolute;
			right: 0;
			font-size: 11px;
			color: #8a9099;
			top: 15px;
		}
	}
}
</style>