<template>
	<view class="page">
		<navBar title="网络规划-全屋WiFi" :back="true" color="black" background="white" />

		<image :src="picUrl + '/static/other/c1.png'" mode="" class="topBg"></image>

		<view class="content">
			<view class="topBox">
				<view class="lTxt">
					<image src="/static/index/water.png" mode="" class="water1"></image>
					<view class="main">
						<image src="/static/index/halfCircle_275.png" mode="" style="width: 56rpx;height: 56rpx;">
						</image>
						<text style="z-index: 3;position: relative;">定制我家的全屋WiFi</text>
					</view>
				</view>
				<view class="rDes">
					<view class="con">
						详情
					</view>
					<image src="/static/index/halfRight.png" mode="" style="width: 24rpx;height: 8rpx;">
					</image>
				</view>
			</view>

			<view class="label" @click="handleOpenOrClose(1)">
				<view class="txt">
					户型
				</view>
				<image :src="addOrLessIcon1" mode="" class="" :style="{height:addOrLessIcon1=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}" style="width: 22rpx;margin-right: 56rpx;">
				</image>
			</view>

			<view class="parms">
				<view v-if="show1" @click="currHouseIndex=index" class="item " :class="[currHouseIndex==index?'act':'']"
					v-for="(item,index) in houseTypeList" :style="{'margin-right': index==1?'0':''}">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 	<view class="rule">
			<image src="/static/index/ruleImg.png" mode=""></image>
			<view class="txt">
				挑选规则
			</view>
		</view> -->
		<view class="bot">
			<view class="left">
				<view class="price">
					￥2099，9900
				</view>
				<image src="/static/index/arrDown.png" mode=""></image>
			</view>
			<view class="right">
				一键下单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				picUrl: this.$picUrl,

				addOrLessIcon1: '/static/index/add.png',
				addOrLessIcon2: '/static/index/add.png',
				addOrLessIcon3: '/static/index/add.png',
				addOrLessIcon4: '/static/index/add.png',
				addOrLessIcon5: '/static/index/add.png',
				// lessIcon: require('/static/index/shortLine.png'),

				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,

				currHouseIndex: 0,
				houseTypeList: [
					'一室两厅',
					'两室两厅',
					'三室两厅'
				]
			}
		},
		onLoad(options) {},
		methods: {
			handleOpenOrClose(i) {
				if (this['addOrLessIcon' + i] == '/static/index/shortLine.png') {
					this['addOrLessIcon' + i] = '/static/index/add.png'
					this['show' + i] = false
				} else if (this['addOrLessIcon' + i] == '/static/index/add.png') {
					this['addOrLessIcon' + i] = '/static/index/shortLine.png'
					this['show' + i] = true
				}
			},
		}
	}
</script>

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