<template>
	<div class="header-back">
		<m-nav-bar :transparent="true" title="提现页面" style="color: #ffffff" />
		<div class="user-data">
			<div class="left">
				<m-user-avatar />
				<div class="name">
					<m-user-name />
					<span
						>可提现余额<span class="grade">{{ profitPrice }}</span
						>元</span
					>
				</div>
			</div>
			<m-button @click="showCashout(updateExtractList)" class="continue" width="90px" height="30px" text="我要提现" />
		</div>
	</div>
	<div class="summary content-box">
		<form action="/" class="search">
			<van-search v-model="searchValue" shape="round" placeholder="请输入单号" />
		</form>
	</div>
	<div class="test-scores content-box">
		<table class="table">
			<tr>
				<!-- <th class="oneColunm">id</th> -->
				<th class="oneColunm">金额</th>
				<th class="oneColunm">提现时间</th>
			</tr>
			<tr v-for="(item, index) in extractList.filter((item) => item.partnerTradeNo.includes(searchValue))" :key="index">
				<!-- <td class="oneColunm">{{ item.id }}</td> -->
				<td class="oneColunm">{{ item.extractPrice / 100 }}</td>
				<td class="oneColunm">{{ item.createTime }}</td>
			</tr>
		</table>
	</div>
</template>

<script lang="ts">
	import { CashOutModel } from "@/model/cashOut";
	import { ref, onBeforeMount } from "vue";
	const cashOutModel = new CashOutModel();

	/**用户提现列表展示 */
	const useExtract = () => {
		type ExtractType = {
			status: number;
			extractPrice: number;
			partnerTradeNo: string;
			id: number;
			createTime: string;
		};

		const extractList = ref<Array<ExtractType>>([]);

		const updateExtractList = async () => {
			const extractListRes = await cashOutModel.extractList();
			extractList.value = extractListRes.rows;
		};

		onBeforeMount(updateExtractList);

		return {
			extractList,
			updateExtractList,
		};
	};
</script>

<script lang="ts" setup>
	import { useProfitPrice } from "@/hooks/user";
	import { showCashout } from "./components/cashout";
	const searchValue = ref("");

	const { profitPrice } = useProfitPrice();
	const { extractList, updateExtractList } = useExtract();
</script>

<style scoped lang="scss">
	.header-back {
		width: 375px;
		padding-bottom: 82px;
		background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
		border-radius: 0px 0px 82px 82px;
		.user-data {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 19px 17px 24px;
			.left {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name {
					display: flex;
					flex-direction: column;
					font-size: 13px;
					color: #ffffff;
					justify-content: space-between;
					margin-left: 6px;
					.grade {
						font-size: 24px;
						padding: 4px;
					}
				}
			}
			.continue {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 19px;
				color: #ffffff;
				background: #01c18d;
			}
		}
	}
	.content-box {
		width: 345px;
		background: #ffffff;
		box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.2);
		border-radius: 10px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: -82px;
		margin-top: 10px;
	}
	.summary {
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		overflow: hidden;
		.search {
			width: 100%;
		}
	}
	.test-scores {
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 19px;
		color: #0a1a33;
		padding: 15px;
		box-sizing: border-box;
		.table {
			width: 100%;
			border-collapse: collapse;
			font-size: 13px;

			th {
				padding: 5px;
				color: #0a1a33;
			}
			td {
				text-align: center;
				padding: 5px;
				color: #8a9099;
			}
			tr {
				&:nth-of-type(n) {
					background: #ffffff;
				}
				&:nth-of-type(2n) {
					background: rgba(73, 142, 245, 0.15);
				}
			}

			.oneColunm {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				width: 50px;
			}
		}
	}
</style>
