<!-- *******************  多选框  *******************  -->
<template>
	<view class="list">
		<view v-for="(item,index) in settings" :key="index"
			:class="{'txt':true,'active':checkStatus(item.key)}"  @click="setValue(item.key)">{{item.label}}
		</view>
	</view>
</template>

<script>
	import arrMixin from './arrMixin'
	export default {
		name: 'XhRadio',
		components: {},
		mixins: [arrMixin],
		props: {},
		filters:{},
		data() {
			return {}
		},
		computed: {
			settings() {
				return this.item.fieldsOptions || []
			}
		},
		watch: {},
		mounted() {},
		methods: {
			checkStatus(item){
				if(!item){
					return false
				}
				const dataValue = this.dataValue
				let flag = Array.isArray(dataValue) && dataValue.indexOf(item)>-1
				console.log(flag,'flag')
				return flag
			},
			setValue(txt) {
				const dataValue = this.dataValue || []
				let idx = dataValue.indexOf(txt)
				if (idx > -1) {
					dataValue.splice(idx,1)
				} else {
					dataValue.push(txt)
				}
				this.dataValue = dataValue
				this.valueChange(this.dataValue)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.list {
		display: flex;
		flex-wrap: wrap;
		.txt{
			color:#333;
			padding:10rpx 30rpx;
			margin: 10rpx;
			background: #F4F5F7;
			border-radius: 10rpx;
			display: flex;
			flex-wrap: wrap;
			line-height: 50rpx;
			max-width: 46%;
			align-items: center;
			&.active{
				background-color: #2272FF;
				color:#fff;
			}
		}
	}
</style>
