<template>
	<view class="pay-pattern">
		<u-radio-group :value="value" placement="column" @change="groupChange">
			<view class="patter-item" v-for="pattern in payPatternList" :key="pattern.id" @click="change(pattern)">
				<view class="patter-icon" style="width: 50rpx;height: 50rpx;">
					<image :src="pattern.iconUrl" mode="" style="width: 100%;height: 100%"></image>
				</view>
				<view class="patter-name">
					{{pattern.title}}
				</view>
				<view class="patter-chenck-box">
					<u-radio :name="pattern.id" activeColor="#E39B46"></u-radio>
				</view>
			</view>
		</u-radio-group>
	</view>
</template>

<script>
	export default {
		name: "Pay-patter",
		props: {
			value: {
				default: 1
			},
			payPatternList: {
				type: Array,
				default: () => [{
					title: '微信支付',
					iconUrl: '/static/12微信支付@2x.png',
					// #ifdef H5
					id: 0,
					// #endif
					// #ifdef MP-WEIXIN
					id: 2,
					// #endif
				}, {
					title: '余额支付',
					iconUrl: '/static/12余额支付@2x.png',
					id: 1,
				}]
			}
		},
		data() {
			return {
				radioValue: 1
			};
		},
		onReady() {
			this.radioValue = this.value
		},
		methods: {
			change(pattern) {
				this.$emit('change', pattern.id)
				this.$emit('input', pattern.id)
			},
			groupChange(id) {
				this.$emit('change', id)
				this.$emit('input', id)
			},
		}

	}
</script>

<style scoped lang="scss">
	.pay-pattern {
		display: flex;
		flex-direction: column;
	}

	.patter-item {
		display: flex;
		align-items: center;
		// padding: ;
		margin: 20rpx 0;
	}

	.patter-name {
		flex: 1;
	}

	.patter-icon {
		// height: 100%;
		margin-right: 30rpx;
	}
</style>