<template>
	<view>
		<!-- 顶部 -->
		<view class="uni-head">
			<view class="uni-head-title">
				radio单选
			</view>			
		</view>
		<view class="uni-padding-wrap">
			<view class="uni-title">默认样式</view>
			<view>
				<radio-group name="">
					<label class="radio"><radio value="r1" :checked="true" />选中</label>
					<label class="radio"><radio value="r2" style="transform:scale(0.7)" />未选中</label>
				</radio-group>
				
			</view>
		</view>
		<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
			<view class="uni-list">
				
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
		</view>
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 items: [{
				                    value: 'USA',
				                    name: '美国',
				                    checked: 'true'
				                },
				                {
				                    value: 'CHN',
				                    name: '中国'
				                },
				                {
				                    value: 'BRA',
				                    name: '巴西'
				                },
				                {
				                    value: 'JPN',
				                    name: '日本'
				                },
				                {
				                    value: 'ENG',
				                    name: '英国'
				                },
				                {
				                    value: 'FRA',
				                    name: '法国'
				                },
				            ],
				            current: 0
			}
		},
		methods: {
			 radioChange: function(evt) {
			            for (let i = 0; i < this.items.length; i++) {
			                if (this.items[i].value === evt.detail.value) {
			                    this.current = i;
			                    break;
			                }
			            }
			        }
		}
	}
</script>

<style>
@import url('../../lib/smart.css');
.uni-list-cell{
	display: flex;
	padding: 20rpx;
	border-bottom: 1rpx solid #eee;
}
</style>
