<template>
	<view>
		<view class="home-nav">
			<view class="search-box">
				<input class="home-ipt" v-model="name" placeholder="请输入您要搜索的政策" />
				<icon class="iconfont icon-sousuo search" type=""></icon>
			</view>
			<view class="home-text" @click="searchPolicy">
				搜 索
			</view>
		</view>
		<view class="pt-88 screen-box">
				<view class="content">
					<view @click="showDom">{{defaultCity.areaName}}</view>
					<view class="screen-content" :class="showUni===true ? 'show' : ''" v-for="(item,index) in areaList" :key="index" @click="changeCityValue(item)">{{item.areaName}}</view>
				</view>
				
				<!-- 项目类别，写成一个单独界面，可以多选 -->
				<view class="type-choose" @click="jumpType">
					项目类型选择
				</view>
				
				<!-- 项目类别，写成一个单独界面，可以多选 最多5个-->
				<view class="type-choose" @click="jumpType1">
					产业类别选择
				</view>
				
				<!-- 项目类别选择 -->
				<view class="eject-box" :class="isShow==0 ? 'show' : ''">
					<view class="eject">
						<view class="eject-content" v-for="(item,index) in projectList" :key="index">
							<label>
								<checkbox @click="choice(item)" /><view class="size">{{item}}</view>
							</label>
						</view>
						<button type="default" @click="changeShow">确定</button>
					</view>
				</view>
				<!-- 产业类别选择 -->
				<view class="eject-box" :class="isShow==1 ? 'show' : ''">
					<view class="eject">
						<view class="eject-content" v-for="(item,index) in industryList" :key="index">
							<label>
								<checkbox @click="choice1(item,index)" /><view class="size">{{item}}</view>
							</label>
						</view>
						<button type="default" @click="changeShow">确定</button>
					</view>
				</view>
				

		</view>
		<view class="pt-200">
			<Policy :showModal="showModal"></Policy>
		</view>
	</view>
</template>

<script>
	import { areaquery } from 'api/area'
	import { typeSelection } from 'api/type'
	
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '',
				path: '/pages/HomePages/SearchPage'
			}
		},
		async onLoad(){
			const that = this
			const params = {
				param:{
					type:0
				}
			}
			const data = await typeSelection(params)
			that.projectList = data
			console.log(that.projectList)
			const params1 = {
				param:{
					type:1
				}
			}
			const data1 = await typeSelection(params1)
			that.industryList = data1
			console.log(that.industryList)
		},
		data() {
			return {
				value2: [],
				label2: ['山西','太原','高薪'],
				areaList: this.$store.state.user.cityList,
				defaultCity:{
					id: 140100,
					areaName:'地区选择'
				},
				showModal:{
					"areaId": this.$store.state.user.cityId,
					"industrialCategories": [],			//产业类别
					"name": '',		//项目名称
					"projectCategories": []					//项目类别
				},
				defaultProject:'项目类别选择',
				projectCategories:[],	//项目类别
				projectList:[],	//项目类别组
				defaultIndustry:'产业类别选择',
				industrialCategories:[], //产业类别
				industryList:[], //产业类别组
				name:'', //项目名称
				isShow:2,
				showUni:false
			}
		},
		onReachBottom: function () {
			this.$store.state.policy.pagenum ++
		},
		methods: {
			changeCityValue(value){
				this.defaultCity = value
				this.showUni = false
			},
			showDom(){
				this.showUni = !this.showUni
			},
			jumpType(){
				this.isShow = 0
			},
			jumpType1(){
				this.isShow = 1
			},
			changeShow(){
				const that = this
				if(that.isShow == 1){
					let arr = []
					for(let i=0;i<5;i++){
						arr.push(that.industrialCategories[i])
					}
					for(let j=0;j<arr.length;j++){
						if(arr[j] === undefined){
							arr.splice(j,1)
							j -= 1
						}
					}
					console.log(that.industrialCategories)
				}
				that.isShow = 2
			},
			searchPolicy(){
				const that = this
				that.$store.state.policy.pagenum = 1
				that.showModal.areaId = that.defaultCity.id
				that.showModal.industrialCategories = that.industrialCategories
				that.showModal.name = that.name
				that.showModal.projectCategories = that.projectCategories
			},
			handleConfirm (item) {
				// console.log('confirm::', item)
				this.label2 = [item.item[0].label,item.item[1].label,item.item[2].label]
			},
			choice(item){
				const that = this
				console.log(item)
				if(that.projectCategories.length == 0){
					that.projectCategories.push(item)
				}else{
					for(let i=0;i<that.projectCategories.length;i++){
						if(that.projectCategories[i] == item){
							that.projectCategories.splice(i,1)
							break
						}else if(i == that.projectCategories.length - 1){
							that.projectCategories.push(item)
							break
						}
					}
				}
				console.log(that.projectCategories)
			},
			choice1(item,index){
				const that = this
				if(that.industrialCategories.length == 0){
					that.industrialCategories.push(item)
				}else{
					for(let i=0;i<that.industrialCategories.length;i++){
						if(that.industrialCategories[i] == item){
							that.industrialCategories.splice(i,1)
							break
						}else if(i == that.industrialCategories.length-1){
							that.industrialCategories.push(item)
							break
						}
					}
				}
				if(that.industrialCategories.length > 5){
					uni.showModal({
						title:'最多只能选择5项，多出无效'
					})
				}
				console.log(that.industrialCategories)
			}
		}
	}
</script>

<style lang="scss" scoped>
.home-nav{
	position: relative;
  height: 88upx;
  background-color: $red;
  position: fixed;
  width: 100%;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.home-ipt{
	flex: 1;
  background-color: white;
  border-radius: 25upx;
  height: 48upx;
  padding-left: 70upx;
  font-size: 24upx;
}
.home-text{
	padding-right: 30upx;
	display: flex;
	justify-content: flex-end;
  color: $white;
  font-size: 24upx;
	vertical-align: middle;
}

.search-box{
	position: relative;
	height: 48upx;
	margin-left: 40upx;
	margin-right: 40upx;
	flex: 1;
	
	.search{
		position: absolute;
		left: 15upx;
		top:50%;
		transform: translate3d(0,-50%,0);
		line-height: 50upx !important;
	  font-size: 40upx;
	  margin-top: 0 !important;
	  padding-top: 0 !important;

	}
}
.triangle{
	margin-left: 6upx;
	display: inline-flex;
	align-items: center;
}
.pt-88{
	padding-top: 88upx;
}
.pt-200{
	padding-top: 188upx;
}
.screen-box{
	display: flex;
	position: fixed;
	width: 750upx;
	z-index: 10;
	
	.content{
		flex: 1;
		height: 48px;
		line-height: 48px;
		text-align: center;
	}
}
.triangle{
	margin-left: 6upx;
	display: inline-flex;
	align-items: center;
	font-size: 24upx;
}
.content-box{
	flex: 1;
	position: relative;
	z-index: 100;
}
.content{
	background-color: $white;
}
.warp{
	flex: 1;
	z-index: 100;
}
.screen-content{
	display: none;
	height: 40px;
	line-height: 40px;
	background-color: #fafafa;
	border-top: 1px solid #f5f5f5;
}
.type-choose{
	flex: 1;
	display: flex;
	height: 48px;
	justify-content: center;
	align-items: center;
	background-color: $white;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
}
.eject-box{
	display: none;
	width: 750upx;
	height: 100vh;
	position: fixed;
	bottom: 0;
	z-index: 100;
	padding:100upx 25upx 3vh 25upx;
	background-color: rgba($color: #000000, $alpha: 0.5);
}
.eject{
	display: flex;
	flex-wrap: wrap;
	border-radius: 10px;
	height: 90vh;
	width: 700upx;
	padding: 20upx;
	background-color: $white;
	overflow-y:auto;
	
	button{
		width: 100%;
	}
}
.eject-content{
	width: 45%;
	margin: 10upx;
	padding: 0 5upx;
	height: 40px;
	font-size: 10px;
	position: relative;
}
.size{
	position: absolute;
	top: 0;
	left: 30px;
}
.show{
	display: block !important;
}
.type-box{
	flex: 1;
	padding-right: 20upx;
	border-radius: 5px;
	margin-bottom: 10upx;
	padding-left: 10px;
	font-size: 14px;
	height: auto;
	min-height: 30px;
	line-height: 30px;
	border: 1px solid #eee;
}
</style>
