<template>
	<view class="page">
		<navBar title="智能控制系统" :back="true" color="black" background="white" />

		<image src="/static/index/img1.png" mode="" class="topBg"></image>

		<view class="content">
			<view class="topBox">
				<view class="water">
					CUSTOMIZED LIGHTING
				</view>
				<view class="main">
					<image src="/static/my/dh.png" mode="" style="width: 56rpx;height: 56rpx;"></image>
					<text style="z-index: 3;position: relative;">系统类别</text>
				</view>
			</view>

			<view class="label">
				户型
			</view>

			<view class="parms">
				<view @click="currHouseIndex=index" class="item " :class="[currHouseIndex==index?'act':'']"
					v-for="(item,index) in houseTypeList">
					{{item}}
				</view>
			</view>


			<view class="label">
				生态-品牌
			</view>

			<view class="parms">
				<view @click="currHouseIndex1=index" class="item " :class="[currHouseIndex1==index?'act':'']"
					v-for="(item,index) in brandTypeList">
					{{item}}
				</view>
			</view>

			<view class="label">
				智能锁
			</view>

			<view class="parms">
				<view @click="currHouseIndex2=index" class="item " :class="[currHouseIndex2==index?'act':'']"
					v-for="(item,index) in lockTypeList">
					{{item}}
				</view>
			</view>


			<view class="label">
				智能面板
			</view>

			<view class="parms">
				<view @click="currHouseIndex3=index" class="item " :class="[currHouseIndex3==index?'act':'']"
					v-for="(item,index) in pannelTypeList">
					{{item}}
				</view>
			</view>


			<view class="label">
				智能窗帘
			</view>

			<view class="parms">
				<view @click="currHouseIndex4=index" class="item " :class="[currHouseIndex4==index?'act':'']"
					v-for="(item,index) in chuanglianTypeList">
					{{item}}
				</view>
			</view>


			<view class="label">
				智能窗帘
			</view>

			<view class="parms">
				<view @click="currHouseIndex5=index" class="item " :class="[currHouseIndex5==index?'act':'']"
					v-for="(item,index) in ktTypeList">
					{{item}}
				</view>


			</view>
		</view>

		<view class="rule">
			<image src="/static/my/bj.png" mode=""></image>
			<view class="txt">
				挑选规则
			</view>
		</view>
		<view class="bot">
			<view class="left">
				<view class="price">
					￥2099，9900
				</view>
				<image src="/static/my/bj.png" mode=""></image>
			</view>
			<view class="right" @click="showConfig=true">
				预览配置
			</view>
		</view>


		<u-popup :show="showConfig" @close="close" @open="open" round='10'>
			<view class="topBar" style="">
				<view class="left">

				</view>
				<view class="cen">
					清单
				</view>
				<view class="close" @click="showConfig=false">
					<u-icon name="close"></u-icon>
				</view>
			</view>
			<view class="pupopCon">
				<view class="item" v-for="i in 3">
					<view class="top">
						<view class="name">
							户型
						</view>
						<view class="info">
							一室两厅
						</view>
					</view>
					<view class="bottom" v-for="i in 3">
						<view class="name">
							智能锁
						</view>
						<view class="info">
							1
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				showConfig: false,

				currHouseIndex: 0,
				currHouseIndex1: 0,
				currHouseIndex2: 0,
				currHouseIndex3: 0,
				currHouseIndex4: 0,
				currHouseIndex5: 0,
				houseTypeList: [
					'一室两厅',
					'两室两厅',
					'三室两厅'
				],
				brandTypeList: [
					'品牌1',
					'品牌2',
				],
				lockTypeList: [
					'指纹款',
					'人脸识别款',
				],
				pannelTypeList: [
					'智能中控',
					'智能开关',
				],
				chuanglianTypeList: [
					'4米内(单层)',
					'4米内(双层)',
					'7米内(单层)',
					'7米内(双层)',
				],
				ktTypeList: [
					'柜机',
					'挂机',
					'风管机',
				]
			}
		},
		onLoad(options) {},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>