<template>
	<view class="content">
			<u-form :model="form" ref="form" label-width="140">
				<!-- <u-form-item label="赠品" label-position="top"></u-form-item> -->
				<u-form-item :label="item.name" v-for="(item, index1) in giftList" :key="index1">
					<u-radio-group v-model="item.value" v-if="item.type == 1">
						<u-radio v-for="(site, index2) in item.itemList" :key="index2" :name="site.id">
							{{site.name}}
						</u-radio>
					</u-radio-group>
					<u-checkbox-group v-model="item.value" v-else>
						<u-checkbox v-model="site.checked" v-for="(site, index2) in item.itemList" :key="index2" :name="site.id">
							{{site.name}}
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u-form>
			<view class="handle-fix-box">
				<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="submitForm">提交</u-button>
			</view>
			<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'customStyle',
			])
		},
		data() {
			return {
				form: {},
				giftList: [],
			}
		},
		onLoad() {
			this.getGiftInfo()
		},
		methods: {
			getGiftInfo() {
				NET.request(API.getGiftList, {}, 'POST').then(res => {
					res.data.forEach(item => {
						if (item == 1) {
							item.value = ''
						} else {
							item.itemList.forEach(site => {
								site.checked = false
							})
						}
					})
					this.giftList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			submitForm() {
				let giftId = []
				this.giftList.forEach(item => {
					if (item.type == 1 && item.value) {
						giftId.push(item.value)
					} else if (item.type == 0) {
						giftId = giftId.concat(item.itemList.filter(site => site.checked).map(site => {
							return site.id
						}))
					}
				})
				console.log(giftId);
				// 调接口
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;
		padding: 0 15px 60px 15px;
		box-sizing: border-box;
	}
</style>
