<template>
	<view class="main">
		<p>选择您常使用的设备</p>
		<view class="desc">
			为您推荐更多相关信息
		</view>
		<view class="content">
			<u-grid :col="3">
				<view class="box" style="position: relative;" v-for="(item,index) in list" :class="item.isCheck ? 'click-hover':''"
					@click="checked(index)">
					<image style="width: 150rpx; height: 150rpx;" :src="item.image_url" mode=""></image>
					<image src="/static/Frame@2x (1).png" v-if="item.isCheck" style="width: 32rpx; height: 32rpx; position: absolute; top: 0; right: 0;" 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: '',
				arr:[],
				checkboxValue1:'',
				list: [

				]
			}
		},
		methods: {
			checkboxChange(e){
				if(e.length == 0){
					uni.showToast({
						title:'请勾选选项后重试',
						icon:'none'
					})
				}else if(e.length>3){
					this.checkboxValue1 = e.pop()
					uni.showToast({
						title:'最多勾选三项',
						icon:'none'
					})
					return
				}
			},
			goIndex(val) {
				console.log(this.checkboxValue1)
				if(this.arr.length == 0){
					uni.showToast({
						title:'请勾选后重试',
						icon:'none'
					})
				}else if(this.arr.length > 3){
					uni.showToast({
						title:'最多勾选三项,请取消多余勾选后重试',
						icon:'none'
					})
				}else{
					let arrs = this.arr.map(item => item.id)
					console.log(arrs.toString());
					// 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) {
				// console.log(this.list[idx].isCheck);
				if(!this.list[idx].isCheck){
					this.arr = this.list.filter(item => item.isCheck == true)
					// console.log(this.arr);
					if(this.arr.length > 2){
						uni.showToast({
							title:'最多勾选三项,请取消多余勾选后重试',
							icon:'none'
						})
						return
					}
					this.list[idx].isCheck = !this.list[idx].isCheck
				}else{
					this.list[idx].isCheck = !this.list[idx].isCheck
				}
				
			}
		},
		onLoad(option) {
			console.log(option);
			this.flag = option.val
			uni.$u.http.get('/api/common/category_rec').then(res => {
				this.list = res.data.map(item => {
					return{
						...item,
						isCheck: false
					}
					
				})
			}).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 {
			border: 2rpx solid #3375d8ff;
			background: #ecf2feff;
		}
		.imgbox{
			background-image: url('/static/Frame@2x (1).png');
			
		}
		.bom {
			margin-bottom: 16rpx;
			position: fixed;
			bottom: 40rpx;
			width: 92%;
		}
	}
</style>