<template>
	<view class="radio_choice">
		<view class="item" v-for="item in info" :key="item.value" 
		:class="item.value==value?'active':''" @click="select(item.value)">
			{{item.label}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"radio-choice",
		props:{
			list:{
				type:Array,
				default:()=>[]
			},
			value:{
				type:[String,Number],
				default:null
			},
			keyName:{
				type:String,
				default:null
			},
			valueName:{
				type:String,
				default:null
			}
		},
		data() {
			return {
				tempVal:""
			};
		},
		methods:{
			select(val){
				if(this.tempVal!=val){
					this.tempVal=val
				}else{
					this.tempVal=null
				}
				this.$emit("input",this.tempVal)
			}
		},
		computed:{
			info(){
				let arr = this.list.map(item=>{
					if(this.keyName&&this.valueName){
						return {
							label:item[keyName],
							value:item[valueName]
						}
					}else{
						return{
							...item
						}
					}
				})
				return arr
			}
		}
	}
</script>

<style lang="scss" scoped>
.radio_choice{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	.item{
		width: 30%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		background-color: #eee;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
		&.active{
			color: #69BB73;
			background-color:rgba(105,187,115,0.3);
		}
	}
}
</style>