<template>
	<view class="hzIndex">
	<hzHeader title="服务指南"></hzHeader>
	<view class="hzContent" style="padding-top: 100upx;">
	
	<view class="container box box-column "  :style="'height: ' + containerHeight +'px;'" >
		<!-- url(../../static/imgs/weekbg.png) -->
		<view >
			<image style="width:100%;height: 530upx;" src="../../static/images/serviceguide/servicebackgroun.png"></image>
			<view style="position: absolute; top: 11%;left: 25%;" @click="changePoint('调度楼')">
				<image v-show="point=='调度楼'" src="../../static/images/serviceguide/diaodulouiconselect.png" style="width: 201upx;height: 215upx;"></image>
				<image v-show="point!='调度楼'" src="../../static/images/serviceguide/diaodulouicon.png" style="width: 155upx;height: 140upx;"></image>
				
			</view>
			<view style="position: absolute; top: 28%;left: 14%;" @click="changePoint('科技楼')">
				<image v-show="point=='科技楼'" src="../../static/images/serviceguide/kejilouiconselect.png" style="width: 202upx;height: 215upx;"></image>
				<image v-show="point!='科技楼'" src="../../static/images/serviceguide/kejilouicon.png" style="width: 158upx;height: 140upx;"></image>
			</view>
			<view style="position: absolute; top: 22%;left: 76%;" @click="changePoint('后勤楼')">
				<image v-show="point=='后勤楼'" src="../../static/images/serviceguide/houqinlouiconselect.png" style="width: 148upx;height: 273upx;"></image>
				<image v-show="point!='后勤楼'" src="../../static/images/serviceguide/houqinlouicon.png" style="width: 92upx;height: 203upx;"></image>
			</view>
		</view>
		<view style="width: 100%; display: flex;justify-content: space-between;padding: 30upx;">
			<view>
				<view v-if="point=='调度楼'" style="width: 220upx;height: 300upx;margin-top: 20upx;border-radius: 20upx;">
					<image style="width: 220upx;height: 300upx;border-radius: 20upx;" src="../../static/images/serviceguide/diaodulou.png"></image>
				</view>
				<view v-if="point=='科技楼'" style="width: 220upx;height: 300upx;margin-top: 20upx;border-radius: 20upx;">
					<image style="width: 220upx;height: 300upx;border-radius: 20upx;" src="../../static/images/serviceguide/kejilou.png"></image>
				</view>
				<view  v-if="point=='后勤楼'" style="width: 220upx;height: 300upx;margin-top: 20upx;border-radius: 20upx;">
					<image style="width: 220upx;height: 300upx;border-radius: 20upx;" src="../../static/images/serviceguide/houqinlou.png"></image>
				</view>
			</view>
			<view class="">
				<view style="font-size: 34upx;font-weight: 600;padding: 20upx 0upx 20upx 20upx;">
					{{point}}
				</view>
				<view style="padding: 20upx	;font-size:30upx;color: #666666;">
					职工服务指南旨在为职工提供分部服务项目便捷查询，用户可通过点击各类服务了解服务基本信息。
				</view>
			</view>
		</view>
		<view class="box box-between">
			<view style="width: 100%;height: 400upx;overflow: scroll;display: flex;flex-wrap: wrap;" >
				<view  @click="showDetail(index)"  v-for="(listItem, index) in showList" :key="index" style="height: 80upx;width: 25%;border:1px solid #07AF9E;text-align: center;border-radius: 10upx; font-size: 28upx;margin-bottom: 20upx;margin-left: 5%;line-height: 80upx;color: #07AF9E;">
					{{listItem.name}}
				</view>
			</view>
		</view>
		<view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false" >
			<view class="popup-order" style="background: white;height: 900upx;width: 90%;border-radius: 10upx;padding-top: 20upx ;overflow: auto;">
				<view style="overflow: scroll;padding: 20upx 20upx;" :style="showDetailItem.page_path?'height: 740upx;':'height: 820upx;'">
					<view style="color:#07B0A7;font-weight: 500;font-size: 36upx;text-align: center;">
						{{showDetailItem.name}}
					</view>
					<view>
						<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
							服务简介
						</view>
						<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
							{{showDetailItem.content}}
						</view>
					</view>
					<view>
						<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
							服务时间
						</view>
						<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
							{{showDetailItem.service_time}}
						</view>
					</view>
					<view>
						<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
							服务地点
						</view>
						<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
							{{showDetailItem.address}}
						</view>
					</view>
					<view v-if="showDetailItem.charges">
						<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
							收费标准
						</view>
						<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
							{{showDetailItem.charges}}
						</view>
					</view>
					<view v-if="showDetailItem.phone">
						<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
							咨询电话
						</view>
						<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
							{{showDetailItem.phone}}
						</view>
					</view>
					<view v-if="showDetailItem.remark">
						<view style="color: #343434;font-size: 28upx;padding-bottom: 6upx;padding-top: 20upx;">
							注意事项
						</view>
						<view style="background-color: #E2F4F3;padding: 28upx;font-size: 28upx;border-radius: 10upx;">
							{{showDetailItem.remark}}
						</view>
					</view>
				</view>
				<view v-if="showDetailItem.page_path" @click.stop="goPagePath(showDetailItem.page_path)" class="fooot-button">
					去预约
				</view>
			
			</view>
		</view>
	</view>

	</view>
	</view>
</template>

<script>
import {mapMutations,mapState} from 'vuex';
import {getServiceGuideList} from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, formatDate, getNumDate,getWeek } from '@/common/util.js';
import contentNone from '@/components/contentNone.vue';
export default {
	data() {
		return {
			userInfo: getStorage('userInfo'),
			areas:[{id:'1',name:'科技楼'},{id:'2',name:'后勤楼'},{id:'3',name:'调度楼'}],
			areasIndex:0,
			//day:new Date().getDay(),
			containerHeight:'',
			contentHeight:'',
			imgWidth:'',
			
			list:[],
			showList:[],
			showDetailItem:{},
			showAlert:false,
			point:'科技楼',
		};
	},
	components: {
		contentNone
	},
	onLoad() {
		this.setHeight();
		this.initData();
	},
	computed: {
		...mapState(['authUrl'])  
	},
	methods: {
		showDetail(v){
			this.showDetailItem = this.showList[v];
			this.showAlert=true;
		},
		goPagePath(e){
			var url = e||"";
			if(this.authUrl.toString().indexOf(url.split("?")[0])==-1){
				alertTip("暂无访问权限");
				return;
			}
			uni.navigateTo({
				url
			});
		},
		changePoint(a){
			this.point = a;
			var arr = [];
			for(var i=0;i<this.list.length;i++){
				if(this.list[i].point==a){
					if(a=='后勤楼'){
						if(this.list[i].name!="洗车服务"){
							arr.push(this.list[i]);
						}
					}else{
						arr.push(this.list[i]);
					}
				}
			}
			console.log(arr)
			this.showList=arr;
		},
		setHeight() {
			let windowHeight = uni.getSystemInfoSync().windowHeight;//页面可见区域
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			this.containerHeight = windowHeight;
			this.contentHeight = windowHeight-60-46-50;
			this.imgWidth = (windowWidth-50)*0.5;
			
		},
		initData() {
			let params = {
				method: getServiceGuideList,
				data: {
					userId: this.userInfo.id,
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					var result = res.data.returnData||[];
					this.list = result;
					var arr = [];
					for(var i=0;i<this.list.length;i++){
						if(this.list[i].point=='科技楼'){
							arr.push(this.list[i]);
						}
					}
					this.showList=arr;
				}
			});
		}
	}
};
</script>

<style lang="scss">
	image{
		will-change: transform
	}
.common-shade{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background: rgba(0,0,0,0.7);
	z-index:99;
}
.chooseArea{
	font-size: 32upx!important;
	color: #4db4ea!important;
	font-weight: 600;
}
.areas{
	padding: 0upx 20upx;
	font-size: 26upx;
}
.menuType{
	padding: 18upx 60upx;
	font-size: 24upx;
	border: 1px solid #E5E5E5;
	border-radius: 50upx;
	color: #666;
	background-color: #E5E5E5;
}
.chooseMenuType{
	border: 1px solid #4db4ea;
	background-color: white;
	color: #4db4ea;
}
.bg{
	height: 120upx;
	width: 100%;
	position: fixed; 
	z-index: 0;
}
.box {
	display: flex;
	display: -webkit-flex;
}

.box-row-reverse {
	flex-direction: row;
}

/*上下排列*/
.box-column {
	flex-direction: column;
}

/*上下排列*/
.box-left {
	justify-content: flex-start;
}

/*居右*/
.box-right {
	justify-content: flex-end;
}

/*居左*/
.box-center {
	justify-content: center;
}

/*居中*/
.box-between {
	justify-content: space-between;
}

/*两端对齐*/
.box-align-center {
	align-items: center;
}

.box-wrap {
	flex-wrap: wrap;
}
.scroll-view {
	border-radius: 20upx 20upx 0upx 0upx;
	padding: 30upx 0;
	white-space: nowrap;
	width: 100%;
	background: #fff;
	.time-item-box {
		padding: 0 10upx;
		margin: 0 16upx;
		display: inline-block;
		text-align: center;
		.time {
			display: block;
			width: 100%;
			font-size: 28upx;
			color: #666;
		}
		.week {
			display: block;
			width: 100%;
			font-size: 32upx;
			color: #666;
		}
	}
	.time-active {
		.time {
			color: #4db4ea;
		}
		.week {
			color: #4db4ea;
		}
	}
}
.fixedView{
	height: 50px;
	line-height: 50px;
	padding-left: 10px;
	background-color: white;
	width: 100%;
	/* border-radius: 10px; */
	/* margin-left: 5%; */
	font-size: 14px;
	/* border: 1px solid #cfcfcf; */
	position: fixed;
	bottom: 0px;
}

.fooot-button{
	height: 80upx;
	background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #C1EFEA;
	font-size: 28upx;
	color: white;
	line-height: 80upx;
	text-align: center;
	border-radius: 40upx;
	width: 90%;
	margin: auto;
	margin-bottom: 20upx;
}
</style>
