<template>
	<view class="pay-options">
		<view class="flex align_center justify_between">
			<text>{{title}}：</text>
		</view>
		<view class="pay-item">
			<view class="flex align_center justify_between" @tap="changeItem(0)">
				<view>
					<uni-icons size="18" :type="defaultValue=='0'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
				</view>
				<view>充值余额(<text class="pf">￥</text>{{balance}})</view>
			</view>
			<view class="flex align_center justify_between" @tap="changeItem(1)">
				<view>
					<uni-icons size="18" :type="defaultValue=='1'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
				</view>
				<view>微信支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '支付方式'
			},
			value: {
				type: String,
				default: '1'
			},
			balance: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				defaultValue: this.value,
			}
		},
		methods: {
			changeItem(val){
				this.defaultValue = val
				this.$emit('input',this.defaultValue)
				this.$emit('change',this.defaultValue)
			}
		},
		watch: {
			value(val) {
				this.defaultValue = val
			}
		}
	}
</script>

<style lang="less" scoped>
	.pay-options {
		padding: 0;
		.pay-item {
			margin-top: 10upx;
			>view {
				padding: 10upx 0;
				font-size: 28upx;
				color: #666;
			}
			.pf{
				font-size:20rpx;
			}
			>view:last-child {
				border-bottom: none;
			}
		}
	}
</style>