<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>
				</div>
			</div>
			<cashoutDialog @close="()=>{showCashout=false}" v-if="showCashout"></cashoutDialog>
			<div class="draw-button">
				<m-button @click="()=>{
					showCashout=true
				}" class="continue" width="90px" height="30px" text="我要提现" />
			</div>
			<div class="draw-button mr15">
				<m-button class="bank" width="90px" height="30px" text="银行卡提现" />
			</div>
		</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>
				<!-- <td class="oneColunm">{{ item.id }}</td> -->
				<td class="oneColunm">{{ '1000' }}</td>
				<td class="oneColunm">{{ '2020-05-26' }}</td>
			</tr>
		</table>
	</div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
import cashoutDialog from './components/cashoutDialog.vue'
export default defineComponent({
	setup() {
		return {
			searchValue: "",
			profitPrice: "0.00",
			showCashout: ref(false)

		}
	},
	components: {
		cashoutDialog


	},
})
</script>

<style lang="scss" scoped>
.mr15 {
	margin-top: 15px;
}

.header-back {
	width: 750px;
	padding-bottom: 82px;
	background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
	border-radius: 0px 0px 82px 82px;

	.user-data {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.draw-button {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.left {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;

			.name {
				display: flex;
				flex-direction: column;
				font-size: 13px;
				width: 100%;
				color: #ffffff;
				justify-content: space-between;
				margin-left: 6px;

				.grade {
					font-size: 36px;
					padding: 4px;
				}
			}
		}

		.bank {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 19px;
			color: #498ef5;
			background: #fff;
		}

		.continue {
			font-size: 26px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 19px;
			color: #498ef5;
			background: #fff;
		}
	}
}

.content-box {
	width: 690px;
	background: #ffffff;
	box-shadow: 0px 0px 16px rgba(124, 129, 136, 0.2);
	border-radius: 40px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: -164px;
	margin-top: 20px;
}

.summary {
	display: flex;
	justify-content: space-around;
	box-sizing: border-box;
	overflow: hidden;

	.search {
		width: 100%;
	}
}

.test-scores {
	font-size: 26px;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 38px;
	color: #0a1a33;
	padding: 30px;
	box-sizing: border-box;

	.table {
		width: 100%;
		border-collapse: collapse;
		font-size: 26px;

		th {
			padding: 10px;
			color: #0a1a33;
		}

		td {
			text-align: center;
			padding: 10px;
			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>