<template>
	<view class="main">
		<p>选择您常使用的设备</p>
		<view class="desc">
			为您推荐更多相关信息
		</view>
		<!-- <view class="content">
			<u-grid :col="3">
				<view class="box" v-for="(item,index) in list" :class="isActive===index? 'click-hover':''"
					@click="checked(index)">
					<image style="width: 150rpx; height: 150rpx;" :src="item.image_url" mode=""></image>
					<p style="color: #3375d8ff;font-size: 30rpx;font-weight: 400;">{{item.name}}</p>
				</view>
			</u-grid>
		</view> -->
		<view class="" >
			 <u-checkbox-group
			            v-model="checkboxValue1"
			            placement="column"
			            @change="checkboxChange"
						
			        >
					<view class=""  v-for="(item, index) in list" style="width: 30%; display: flex; align-items: center; flex-direction: column; margin-bottom: 10%;">
						<image style="width: 150rpx; height: 150rpx;margin-bottom: 15rpx;" :src="item.image_url" mode="" ></image>
						<u-checkbox
						    :customStyle="{marginBottom: '8px'}"
						    :key="index"
						    :label="item.name"
						    :name="item.id"
						>
						</u-checkbox>
					</view>
			            
			        </u-checkbox-group>
		</view>
		<view class="bom">
			<u-button type="primary" @click="goIndex">进入平台</u-button>
		</view>
	</view>
</template>

<script>
	const {
		http
	} = uni.$u
	export default {
		data() {
			return {
				isActive: 0,
				flag: '',
				checkboxValue1:'',
				list: [

				]
			}
		},
		methods: {
			checkboxChange(e){
				if(e.length == 0){
					uni.showToast({
						title:'请勾选选项后重试'
					})
				}else if(e.length>3){
					this.checkboxValue1 = e.pop()
					uni.showToast({
						title:'最多勾选三项'
					})
					return
				}
			},
			goIndex(val) {
				console.log(this.checkboxValue1)
				if(this.checkboxValue1.length == 0){
					uni.showToast({
						title:'请勾选后重试'
					})
				}else if(this.checkboxValue1.length > 3){
					uni.showToast({
						title:'最多勾选三项,请取消多余勾选后重试'
					})
				}else{
					uni.$u.http.post('/api/common/add_category_rec', {
						ids: this.checkboxValue1.toString()
					}).then(res => {
						console.log(this.flag);
						if (this.flag == '买') {
							uni.switchTab({
								url: '/pages/index/buy'
							})
						} else {
							uni.switchTab({
								url: '/pages/index/sell'
							})
						}
					}).catch(err => {
						console.log(err);
					})
				}
			

			},
			checked(idx) {
				this.isActive = idx
				console.log(idx);
			}
		},
		onLoad(option) {
			console.log(option);
			this.flag = option.val
			uni.$u.http.get('/api/common/category_rec').then(res => {
				this.list = res.data
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-checkbox-group{
		flex-direction: row!important;
		align-items: center!important;
		flex-wrap: wrap!important;
		justify-content: space-between!important;
	}
	.main {
		padding: 32rpx;

		p {
			color: #000000e6;
			font-size: 48rpx;
			font-weight: 500;
			margin: 24rpx 0 16rpx 0;
		}

		.content {
			margin-left: 3%;
		}

		.desc {
			color: #00000099;
			font-size: 28rpx;
			font-weight: 400;
			margin-bottom: 56rpx;
		}

		.box {
			width: 31%;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			height: 286rpx;
			border-radius: 8rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background: #ffffffff;
		}

		.box:nth-child(3n+3) {
			margin-right: 0;
		}

		.click-hover {

			background-color: #ecf2feff;

		}

		.bom {
			margin-bottom: 16rpx;
			position: fixed;
			bottom: 40rpx;
			width: 92%;
		}
	}
</style>