<template>
	<view class="userinform">
		<view class="userItem">
			<u-collapse :value="item.index" accordion v-for="(item, index) in psychologicalEnumdata" :key="item.index">
				<u-collapse-item :name="item.index" :title="item.name">
					<view class="singleChoice" >
						<u-radio-group  v-model="form[item.key]"  placement="column" @change="(arr)=>addgroup(arr,item.index)">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(items, indexs) in item.dataList"
								iconPlacement="left" size="40" labelSize="24" :key="index" :label="items.name" :name="items.value" >
							</u-radio>
						</u-radio-group>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import {
		psychologicalEnum
	} from './enum.js';
	import {
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				psychologicalEnumdata: psychologicalEnum,
				form: {
					lawEducaValue: 0,
					lawEducation: 0,
                    lawEducationDetail: undefined,
					conflictValue:0,
					conflict:0,
					conflictDetail:undefined,
				},

			};
		},
		created() {
			this.form = this.daily
		},
		computed: {
			// 取数据/
			...mapGetters({
				// 三色预警数据
			 daily: 'daily/getdailyinspection',
			})
		},
		mounted() {},
		methods: {
			// 存vuex数据
			...mapMutations({
				dailyinspectionList: 'daily/dailyinspectionList'
			}),
			addgroup(arr, index) {
				console.log(arr,index);
				let names = '';
				let conuts = 0;
				if (arr && arr!=0) {
					const dataLists = this.psychologicalEnumdata[index].dataList
					const _list = dataLists.filter(item => arr == item.value)
					names = _list.map(e => e.name).join(',')
					conuts = _list.map(e => e.num).reduce((a, b) => a + b)
				}
				switch (index) {
					case 0:
						this.form.lawEducationDetail = names;
						this.form.lawEducation = conuts;
						break;
					case 1:
						this.form.conflictDetail = names;
						this.form.conflict = conuts;
						break;
				}
				this.dailyinspectionList(this.form)
			},
		}
	};
</script>

<style scoped lang="scss">
	.userinform {
		height: 100%;
		width: 100%;
	}

	.userItem {
		color: #7b7b7b;
		font-size: 14px;
		margin-bottom: 8px;

		.textIndex {
			margin-left: 20rpx;
		}
	}

	.text {
		width: 96%;
	}

	.singleChoice {
		width: 90%;
	}

	.label {
		margin: 0 20px;
	}

	/deep/ .u-radio-group--row {
		display: flex;
		flex-direction: row;
		text-align: center;
		align-content: center;
		justify-content: space-evenly;
	}
</style>