<template>
	<view class="page">
		<view class="navBox" :style="'height:'+navHeight+'px;padding-top:'+topSafeHeight+'px'">
			<text :style="'line-height:' + navLineHeight + 'px'"
				class="text-44 text-fe text-bold margin-right-10">禾大师</text>
			<text class="text-26 text-fe">你身边的总工</text>
		</view>
		<view class="pageMain" :style="'padding-top:' + navHeight + 'px'" v-if="showPage">
			<view class="gzhBox flex align-center" v-if="!isSubscribeWeixin">
				<view class="flex-one text-30 text-ff margin-right-10">关注公众号，接受消息提醒</view>
				<view class="gzhBtn text-center text-208 text-30 text-bold text-center"
					@click="go('/pages/home/webUrl')">去关注</view>
			</view>
			<view class="topBox">
				<view class="searchBox flex align-center margin-bottom-20" @click="go('/pages/home/search')">
					<view class="tyIcon-sousuo text-98 text-24"></view>
					<view class="text-28 text-b3 margin-left-10">请输入您想咨询专家的专业方向、建筑类型</view>
				</view>
				<view class="swiperBox" v-if="swipers.length > 0">
					<swiper :indicator-dots="swipers.length >1 ? true : false" :autoplay="true" :interval="3000"
						indicator-active-color="#fff" indicator-color="rgba(255,255,255,.3)" circular
						class="width-100p height-100p">
						<swiper-item class="width-100p height-100p" v-for="(item,index) in swipers" :key="index">
							<image :src="item.image" class="swiperImg" mode="aspectFill" @click="go(item.link_url)">
							</image>
						</swiper-item>
					</swiper>
				</view>
				<view class="flex">
					<view class="flex-one flex flex-direction align-center" @click="go('/pages/expert/index',3)">
						<image src="/static/home/homeIcon1.png" class="iconImg"></image>
						<view class="text-33 text-bold text-30">专家咨询</view>
						<view class="text-24 text-aa text-cut-one">{{configData.one_category_subtitle}}</view>
					</view>
					<view class="flex-one flex flex-direction align-center" @click="go('/pages/material/index' , 3)">
						<image src="/static/home/homeIcon2.png" class="iconImg"></image>
						<view class="text-33 text-bold text-30">材料查询</view>
						<view class="text-24 text-aa text-cut-one">{{configData.two_category_subtitle}}</view>
					</view>
					<view class="flex-one flex flex-direction align-center" @click="go('/pages/home/knowledgeList')">
						<image src="/static/home/homeIcon3.png" class="iconImg"></image>
						<view class="text-33 text-bold text-30">消防知识</view>
						<view class="text-24 text-aa text-cut-one">{{configData.three_category_subtitle}}</view>
					</view>
				</view>
				<view class="margin-top-35 zjBox">
					<view class="flex align-center justify-between margin-bottom-25">
						<view class="flex align-center">
							<image src="/static/home/icon-zhuanjia.png" class="iconZjImg margin-right-5"></image>
							<text class="text-32 text-33 text-bold line-40">在线</text>
							<text class="text-ff85 text-32 text-bold line-40">总工</text>
						</view>
						<view class="flex align-center" @click="go('/pages/expert/index',3)">
							<view class="text-26 text-77">更多</view>
							<view class="tyIcon-fanhui text-aa text-24 margin-left-5"></view>
						</view>
					</view>
					<view class="flex align-center align-center" v-for="(item,index) in experts"
						:class="index == 0 ? '' : 'margin-top-30'" :key="index"
						@click="go('/pages/expert/detail?id=' + item.id)">
						<view class="zjHeader margin-right-15">
							<image :src="item.head_img" mode="aspectFill" class="width-100p height-100p">
							</image>
						</view>
						<view class="flex-one">
							<view class="flex margin-bottom-5">
								<view class="flex-one margin-right-30 text-30 text-33 text-bold">{{item.name}}</view>
								<view class="text-ff85 text-price text-bold text-32">{{item.price}}</view>
							</view>
							<view class="text-909298 text-26 text-cut-one">{{item.brief}}</view>
						</view>
					</view>
				</view>
				<view class="margin-top-35">
					<view class="text-32 text-33 text-bold line-40 padding-bottom-5">
						消防计算器
					</view>
					<view class="flex flex-wrap ">
						<view class="text-26 text-33 text-bold jsq1" style="background: #F5FAE6;"
							@click="go('/pages/home/calculator?type=1')">疏散宽度计算</view>
						<view class="text-26 text-33 text-bold jsq1" style="background: #E7F5FB;"
							@click="go('/pages/home/calculator?type=2')">疏散距离查询</view>
						<view class="text-26 text-33 text-bold jsq2" style="background: #FDF3FD;"
							@click="go('/pages/home/calculator?type=3')">安全出口数量查询</view>
						<view class="text-26 text-33 text-bold jsq1" style="background: #E7F5FB;"
							@click="go('/pages/home/calculator?type=4')">楼梯类型查询</view>
						<view class="text-26 text-33 text-bold jsq1" style="background: #F7F2E4;"
							@click="go('/pages/home/calculator?type=5')">防火间距查询</view>
					</view>
				</view>
			</view>
			<view class="margin-top-25 quesBox">
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<image src="/static/home/icon-wenti.png" class="wtImg"></image>
						<view class="margin-left-5">
							消防常见问题
						</view>
					</view>
					<view class="flex align-center" @click="go('/pages/home/knowledgeList')">
						<view class="text-26 text-77 margin-right-5">更多</view>
						<view class="tyIcon-fanhui text-aa text-24"></view>
					</view>
				</view>
				<view class="padding-top-30 padding-bottom-15" v-for="(item,index) in knowledges" :key="index"
					:class="index == (knowledges.length - 1)?  '' : 'border-bottom-ed'"
					@click="go('/pages/home/knowledgeDetail?id='+item.id)">
					<view class="text-33 line-40 text-30 margin-bottom-10 text-cut-two">
						{{item.title}}
					</view>
					<view class="text-24 text-aa">
						{{item.show_create_time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navHeight: 0, //顶部导航栏高度
				topSafeHeight: 0, //顶部导航兰安全区域
				navLineHeight: '', //顶部导航栏展示高度
				isSubscribeWeixin:true,//是否关注公众号
				swipers: [],
				experts: [],
				knowledges: [],
				configData: {},
				home_share: {},
				showPage: false,
			}
		},
		onLoad(options) {
			//自定义顶部导航兰
			const systemInfo = uni.getSystemInfoSync();
			const menu = uni.getMenuButtonBoundingClientRect()
			this.navHeight = systemInfo.statusBarHeight + menu.height + (menu.top - systemInfo.statusBarHeight) * 2;
			this.topSafeHeight = systemInfo.statusBarHeight;
			this.navLineHeight = menu.height + (menu.top - systemInfo.statusBarHeight) * 2;

			// this.getPageData();
			// this.getShareMsg()
		},
		onShow() {
			if (this.cn.isLogin()) {
				this.getBottomTabRed()
				this.rq.getData('base/mpweixin/api/User/isSubscribeWeixin').then(res => {
					if (res.code == 0) {
						this.isSubscribeWeixin = res.data.is_subscribe_weixin
					}
				})
			}
			this.getPageData();
			this.getShareMsg()
		},
		onShareAppMessage() {
			return {
				title: this.home_share.home_share_title,
				imageUrl: this.home_share.home_share_img_url,
				path: '/pages/home/index'
			}
		},
		methods: {
			getBottomTabRed() {
				this.rq.getData('chat/api/FriendsChat/getNoReadNumber').then((res) => {
					if (res.code == 0) {
						if (res.data.number > 0) {
							uni.showTabBarRedDot({
								index: 1
							})
						} else {
							uni.removeTabBarBadge({
								index: 1
							})
						}
					}
				})
			},
			getShareMsg() {
				this.rq.getData('project/api/Config/getMpweixinConfig').then(res => {
					if (res.code == 0) {
						this.home_share = res.data.mpweixin
					}
				})
			},
			getPageData() {
				this.rq.getData('fire/api/Fire/getIndexData').then(res => {
					if (res.code == 0) {
						this.swipers = res.data.carousel;
						this.experts = res.data.expert;
						this.knowledges = res.data.knowledge;
						this.configData = res.data.config;
						this.showPage = true;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.navBox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		background: #2088FF;
		padding-left: 40rpx;
		box-sizing: border-box;
		z-index: 999;
	}

	.topBox {
		width: 100vw;
		background: linear-gradient(180deg, #2088FF 0%, #FFFFFF 255rpx);
		padding: 15rpx 30rpx 25rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		box-sizing: border-box;
	}

	.searchBox {
		width: calc(100vw - 60rpx);
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 33rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.swiperImg,
	.swiperBox {
		width: calc(100vw - 60rpx);
		height: 290rpx;
		border-radius: 20rpx;
	}

	.swiperBox {
		overflow: hidden;
	}

	.iconImg {
		width: 130rpx;
		height: 130rpx;
	}

	.zjBox {
		width: 100%;
		padding: 25rpx 25rpx 30rpx;
		box-sizing: border-box;
		background: linear-gradient(170deg, #E5F1FF 0%, #F9F1FF 100%);
		border-radius: 15rpx;
	}

	.iconZjImg {
		width: 40rpx;
		height: 40rpx;
	}

	.zjHeader {
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.jsq1 {
		width: 200rpx;
		height: 88rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 88rpx;
		margin-right: 14rpx;
		margin-top: 15rpx;
	}

	.jsq2 {
		width: 262rpx;
		height: 88rpx;
		background: #FDF3FD;
		text-align: center;
		line-height: 88rpx;
		margin-top: 15rpx;
		border-radius: 10rpx;
	}

	.quesBox {
		width: 100vw;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background: #fff;
		padding: 25rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.wtImg {
		width: 40rpx;
		height: 40rpx;
	}

	/* 3qi */
	.gzhBox {
		width: 100vw;
		height: 100rpx;
		background: #2088FF;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.gzhBtn {
		width: 150rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		line-height: 60rpx;
	}
</style>