<template>
	<u-popup v-model="localShow" :mode="mode" :border-radius="10">
		<view class="content">
			<view class="label">
				<slot>{{label}}</slot>
			</view>
			<view class="btns">
				<view class="btn cancel-btn" @click="cancelBtnClick">{{cancelText}}</view>
				<view class="btn confim-btn" @click="confimBtnClick">{{confimText}}</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		components: {
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: 'center'
			},
			label: String,
			cancelText: {
				type: String,
				default: '取消'
			},
			confimText: {
				type: String,
				default: '充值'
			}
		},
		computed: {
			localShow: {
				get () {
					return this.show
				},
				set (val) {
					this.$emit('update:show', val)
				}
			}
		},
		methods: {
			cancelBtnClick () {
				this.localShow = false
				this.$emit('cancelBtnClick')
			},
			confimBtnClick () {
				this.localShow = false
				this.$emit('confimBtnClick')
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-drawer__scroll-view {
		background-color: #2B3062;
	}
	.content {
		width: 472rpx;
		// padding: 0 56rpx;
		text-align: center;
	}
	.label {
		padding: 46rpx 0;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.btns {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		& .btn {
			flex: 1;
			font-size: 32rpx;
			text-align: center;
			color: #FFFFFF;
		}
		& .cancel-btn{
			background-color: #3A4299;
		}
		& .confim-btn{
			background-color: #FE192F;
		}
	}
	
</style>
