<template>
	<view class="container">
		<view class="page" :style="{'padding-top': statusBarHeight + 'px'}">
			<view class="nav-top-box" @click="toCommunity()">
				<view class="nav-top" v-if="houseInfo.platformName">
					<view class="title">{{houseInfo.platformName}}</view>
					<image v-if="canChange" mode="aspectFill" src="../../static/images/icon_up.png" class="icon"></image>
				</view>
			</view>
			<view class="banner">
				<swiper class="swiper" :autoplay="false" :interval="3000" :circular="true">
					<swiper-item v-for="item in bannerList" :key="item.id">
						<image @click="onJump(item.advUrl)" mode="aspectFill" :src="item.imageUrl" class="swiper-item"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="message" v-if="messageList.length">
				<image src="../../static/images/icon_notice.png" class="icon"></image>
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval='3000'
					:vertical="true">
					<swiper-item :key="index" v-for="(item, index) in messageList">
						<view class="text" @click="toDetails(1)">{{item.noticeContent}}</view>
					</swiper-item>
				</swiper>
			</view>
			<template v-if="userType === '1'">
				<view class="quick-entry">
					<view class="item" @click="quickEntry(1)">
						<view class="item-img">
							<image src="../../static/images/quick01.png" class="icon"></image>
							<view v-if="communityInfo.noticeNotRead" class="num">{{communityInfo.noticeNotRead}}</view>
						</view>
						<text>我的消息</text>
					</view>
					<view class="item" @click="quickEntry(2)">
						<image src="../../static/images/quick02.png" class="icon"></image>
						<text>房屋登记</text>
					</view>
					<view class="item" @click="quickEntry(3)">
						<view class="item-img">
							<image src="../../static/images/quick03.png" class="icon"></image>
							<view v-if="communityInfo.notPay" class="num">{{communityInfo.notPay}}</view>
						</view>
						<text>生活缴费</text>
					</view>
					<view class="item" @click="quickEntry(4)">
						<image src="../../static/images/quick04.png" class="icon"></image>
						<text>维修上报</text>
					</view>
					<view class="item" @click="quickEntry(5)">
						<image src="../../static/images/quick05.png" class="icon"></image>
						<text>小区投诉</text>
					</view>
					<view class="item" @click="quickEntry(6)">
						<image src="../../static/images/quick06.png" class="icon"></image>
						<text>公告公示</text>
					</view>
					<view class="item" @click="quickEntry(7)">
						<image src="../../static/images/quick07.png" class="icon"></image>
						<text>缴纳物业费</text>
					</view>
				</view>
				<!-- <view v-if="communityInfo.adminPhone" class="housekeeper" style="background-image: url('../../static/images/bg_guanjia.png');"> -->
				<view v-if="communityInfo.adminPhone" class="housekeeper">
					<view class="information">
						<image :src="communityInfo.adminAvatar" class="icon"></image>
						<view class="title">
							<text class="name">{{communityInfo.adminName}}</text>
							<text class="about">您的专属管家</text>
						</view>
					</view>
					<view class="phone" @click="onCallPhone">
						<image src="../../static/images/icon_phone.png" class="icon"></image>
						<text>{{communityInfo.adminPhone}}</text>
					</view>
				</view>
				<!-- <view class="housekeeper">
					<view class="information">
						<image src="../../static/images/img01.png" class="icon"></image>
						<view class="title">
							<text class="name">王一一</text>
							<text class="about">您的专属管家</text>
						</view>
					</view>
					<view class="phone">
						<image src="../../static/images/icon_phone.png" class="icon"></image>
						<text>159-2546-5285</text>
					</view>
				</view> -->


				<view v-if="noticeList.length" class="news">
					<view class="title">
						<text>社区活动公告</text>
						<image src="../../static/images/icon_more.png" class="icon"></image>
					</view>
					<view class="list">
						<view class="item" v-for="item in noticeList" :key="item.id" @click="toDetails(2)">
							<image src="../../static/images/img02.png" class="icon"></image>
							<view class="con">
								<view class="name">{{item.noticeTitle}}</view>
								<view class="time">物业服务中心 2020/09/08</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view v-if="userType === '2'" class="news">
				<view class="title">
					<text>社区活动公告</text>
					<image src="../../static/images/icon_more.png" class="icon"></image>
				</view>
				<view class="list">
					<view class="item" @click="toDetails(2)">
						<image src="../../static/images/img02.png" class="icon"></image>
						<view class="con">
							<view class="name">开展民族团结进步创建进社区 活动</view>
							<view class="time">物业服务中心 2020/09/08</view>
						</view>
					</view>
					<view class="item" @click="toDetails(2)">
						<image src="../../static/images/img03.png" class="icon"></image>
						<view class="con">
							<view class="name">开展民族团结进步创建进社区 活动</view>
							<view class="time">物业服务中心 2020/09/08</view>
						</view>
					</view>
				</view>
			</view>


			<authorization-modal ref="authorization" @loginEnd="onLoginEnd" @refuse="onRefuse" />
		</view>
	</view>
</template>

<script>
	import serverConfig from '@/config/server_config.js';
	import {
		getPropertyAdvApi,
		queryCommunityRoomByUnitIdApi,
		getCommunityInfoApi,
		getAdvertisementApi
	} from '@/config/api.js'
	import { authorizationModal } from '@/components/authorization.vue'
	export default {
		name: 'home',
		components: {
			authorizationModal
		},
		data() {
			return {
				statusBarHeight: 24,
				userType: '0',		// 1：业主，2：维修员

				houseList: [],	// 审核通过的小区列表
				waitList: [],	// 待审核或已驳回列表
				houseKey: 0,

				neverRegister: false,

				bannerList: [],

				communityInfo: {},
				// isLogin: false,
				messageList: [{
					noticeContent: '紧急通知！！！ 所有居民请于下午3点于张湾广场'
				}],
				noticeList: []
			}
		},
		computed: {
			isLogin() {
				return uni.getStorageSync('openid')
			},
			houseInfo() {
				return this.houseList[this.houseKey] || {}
			},
			isWaitAudit() {
				return this.waitList.some(item=>item.auditStatus === 'waitAudit')
			},
			isRefuse() {
				return this.waitList.some(item=>item.auditStatus === 'refuse')
			},
			canChange() {
				return this.houseList.length > 1
			}
		},
		methods: {
			getPropertyLogin() {
				let info = uni.getStorageSync('house-info')
				if(info) {
					this.houseInfo = JSON.parse(info)
				}
			},
			async getPropertyAdv() {
				let {result} = await getPropertyAdvApi({
					pageNo: 1,
					pageSize: 10
				})
				this.bannerList = result.records.map(item=> {
					return {
						...item,
						imageUrl: serverConfig.baseURL + '/sys/common/static/' + item.advImageUrl
					}
				})
			},
			toCommunity() {
				if(this.houseList.length <= 1) return
				uni.navigateTo({
					url: '/pages/community/index',
				});
			},
			quickEntry(type) {
				if (!!this.isLogin) {
					if(this.neverRegister) {	// 登录了但是还未认证
						uni.showToast({
							icon: "none",
							title: '暂未查到业主信息，请认证！'
						})
						setTimeout(()=> {
							uni.navigateTo({
								url: '/pages/housing/index',
							});
						}, 1500)
					} else {
						if(this.houseList.length) {
							if (type == 1) {
								let id = this.houseList[this.houseKey].id
								uni.navigateTo({
									url: '/pages/message/index?id=' + id
								});
							} else if (type == 2) {
								if(this.waitList.length) {
									uni.navigateTo({
										url: '/pages/housingAudit/index'
									});
								} else {
									uni.navigateTo({
										url: '/pages/housing/index'
									});
								}
							} else if (type == 3) {
								uni.navigateTo({
									url: '/pages/payCost/index',
								});
							} else if (type == 4) {
								uni.navigateTo({
									url: '/pages/maintenance/index'
								});
							} else if (type == 5) {
								uni.navigateTo({
									url: '/pages/complaints/index'
								});
							} else if (type == 6) {
								uni.navigateTo({
									url: '/pages/announcement/index'
								});
							} else if (type == 7) {
								uni.navigateTo({
									url: '/pages/payCostProperty/index'
								});
							}
						} else {
							if(this.isRefuse) {	// 已驳回
								uni.showToast({
									icon: "none",
									title: "您的房屋认证已被驳回，请确认!"
								})
								setTimeout(()=> {
									uni.navigateTo({
										url: `/pages/housingAudit/index?id=${this.waitList[0].id}`
									});
								}, 1500)
							} else {
								if(type == 2) {
									uni.navigateTo({
										url: `/pages/housingAudit/index?id=${this.waitList[0].id}`
									});
								} else {
									uni.showToast({
										icon: "none",
										title: "您的房屋认证正在审核中，请稍等!"
									})
								}
							}
						}
					}
				} else {
					uni.hideTabBar()
					this.$nextTick(() => {
						this.$refs.authorization.onOpenLogin()
					});
				}
			},
			onLoginEnd(list) {
				uni.showTabBar()
				if(list.length) {
					console.log('维修员或者业主')
				} else {
					uni.showToast({
						icon: "none",
						title: '暂未查到业主信息，请认证！'
					})
					setTimeout(()=> {
						uni.navigateTo({
							url: '/pages/housing/index',
						});
					}, 1500)
				}
			},
			onRefuse() {
				uni.showTabBar()
			},
			toDetails(type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/messageDetails/index',
					});
				} else if (type == 2) {
					uni.navigateTo({
						url: '/pages/announcementDetails/index',
					});
				}
			},
			async getUserInfo() {
				let openId = uni.getStorageSync('openid')
				let phone = uni.getStorageSync('user_phone')
				let {result} = await queryCommunityRoomByUnitIdApi({openId, phone})
				if(result) {
					let houseData = result.communityOwners
					if(houseData.length) {
						this.userType = '1'
						uni.setStorageSync('user_type', '1')
						let houseList = houseData.filter(item=>item.auditStatus === 'auditPass')
						if(houseList.length) {
							uni.setStorageSync('user_name', houseList[0].residentName)
							let house_code = uni.getStorageSync('house_code')
							if(house_code) {
								let houseKey = houseList.findIndex(item=>item.id === house_code)
								this.houseKey = houseKey === -1 ? 0 : houseKey
							}
							this.houseList = houseList.map(item=> {
								return {
									id: item.id,
									platformCode: item.platformCode,
									platformName: item.platformName
								}
							})
							uni.setStorageSync('user_house_list', JSON.stringify(this.houseList))
							uni.setStorageSync('platform_code', this.houseList[this.houseKey].platformCode)
							this.getCommunityInfo()
							this.getAdvertisement()
						}
						this.waitList = houseData.filter(item=>item.auditStatus !== 'auditPass')
					}
					if(result.employeeVos) {
						uni.setStorageSync('employee_name', result.employeeVos.employeeName)
						let employeeData = result.employeeVos.comList
						this.houseList = employeeData.map(item=> {
							return {
								platformCode: item.comCode,
								platformName: item.comName
							}
						})
						uni.setStorageSync('employee_house_list', JSON.stringify(this.houseList))
						if(houseData.length === 0) {
							this.userType = '2'
							uni.setStorageSync('user_type', '2')
							let house_code = uni.getStorageSync('house_code')
							if(house_code) {
								let houseKey = employeeData.findIndex(item=>item.id === house_code)
								this.houseKey = houseKey === -1 ? 0 : houseKey
							} else {
								this.houseKey = 0
							}
							uni.setStorageSync('platform_code', this.houseList[this.houseKey].platformCode)
							this.getCommunityInfo()
							this.getAdvertisement()
						}
					}
					if(houseData.length === 0 && !result.employeeVos) {
						this.neverRegister = true
					}
				}
			},
			async getCommunityInfo() {
				let id = this.houseList[this.houseKey].id
				let {result} = await getCommunityInfoApi({userId: id})
				let communityInfo = {
					notPay: result.notPay,
					noticeNotRead: result.noticeNotRead,
					adminAvatar: serverConfig.baseURL + '/sys/common/static/' + result.community.adminAvatar,
					adminName: result.community.adminName,
					adminPhone: result.community.adminPhone
				}
				this.communityInfo = {...communityInfo}
			},
			async getAdvertisement() {
				let platformCode = this.houseList[this.houseKey].platformCode
				let {result} = await getAdvertisementApi({communityCode: platformCode})
				this.messageList = result.degreeNotice
				this.noticeList = result.companyNotice
			},
			onCallPhone() {
				uni.makePhoneCall({
					phoneNumber: this.communityInfo.adminPhone
				});
			},
			onJump(url) {
				if(!url) return
				uni.navigateTo({
					url
				});
			}
		},
		onLoad() {
			const menuButton = wx.getMenuButtonBoundingClientRect()
			this.statusBarHeight = menuButton.top
			this.getPropertyAdv()
			this.getPropertyLogin()
			if(this.isLogin) {
				let platformCode = uni.getStorageSync('platform_code')
				if(platformCode) {
					let type = uni.getStorageSync('user_type')
					let data = type === '1' ? uni.getStorageSync('user_house_list') : uni.getStorageSync('employee_house_list')
					this.houseList = JSON.parse(data)
					let houseKey = this.houseList.findIndex(item=>item.platformCode === platformCode)
					this.houseKey = houseKey
					if(type === '1') {
						this.userType = '1'
						this.getCommunityInfo()
					} else {
						this.userType = '2'
					}
					this.getAdvertisement()
				} else {	// 已注册，但首次进入
					this.getUserInfo()
				}
			}
		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url('http://192.168.0.118:9999/sys/common/static/scott/pic/bg_home_1686729455023.png');
	}

	.page {
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 30rpx;
	}

	.nav-top-box {
		width: 100%;
		height: 90rpx;
		.nav-top {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
			align-items: center;
			
			.title {
				font-size: 32rpx;
				color: #1D1F1C;
				font-weight: 700;
			}
	
			.icon {
				width: 20rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}
		}

	}

	.banner {
		.swiper-item {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}

	.message {
		height: 70rpx;
		line-height: 70rpx;
		overflow: hidden;
		line-height: 34rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		.icon {
			width: 34rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}

		.swiper {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;

			.text {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-size: 28rpx;
				color: #373737;
			}
		}
	}

	.quick-entry {
		background-color: #ffffff;
		padding: 40rpx 30rpx 0;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;

		.item {
			width: 25%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 40rpx;

			.item-img {
				position: relative;

				.num {
					position: absolute;
					top: -5px;
					right: -5px;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 4rpx 8rpx;
					background-color: #F6C864;
					border-radius: 20rpx;

				}
			}

			.icon {
				width: 74rpx;
				height: 74rpx;

			}

			text {
				margin-top: 12rpx;
				font-size: 28rpx;
				color: #373737;
			}

		}
	}

	.housekeeper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 16rpx;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url('http://192.168.0.118:9999/sys/common/static/scott/pic/bg_guanjia_1686729699631.png');
		padding: 20rpx 30rpx;
		margin: 30rpx 0;

		.information {
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 70rpx;
				height: 70rpx;
				border: 1px solid #F6C864;
				border-radius: 702rpx;
			}

			.title {
				margin-left: 20rpx;

				.name {
					font-size: 28rpx;
					color: #ffffff;
					font-weight: bold;
					display: block;
				}

				.about {
					font-size: 24rpx;
					color: #ffffff;
					display: block;
				}

			}

		}

		.phone {
			height: 30rpx;
			line-height: 30rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			padding: 10rpx 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 24rpx;
				height: 22rpx;
			}

			text {
				margin-left: 14rpx;
				font-size: 24rpx;
				color: #5159EA;
			}
		}
	}

	.news {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 16rpx;

		.title {
			height: 32rpx;
			line-height: 32rpx;
			display: flex;
			justify-content: space-between;

			text {
				font-size: 32rpx;
				color: #373737;
				font-weight: bold;
				padding-left: 18rpx;
				border-left: 3px solid #6852F0;
			}

			.icon {
				width: 10rpx;
				height: 16rpx;
			}
		}

		.list {
			.item {
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
				padding-bottom: 20px;
				border-bottom: 1px solid #F0F0F2;

				.icon {
					width: 280rpx;
					height: 165rpx;
					border-radius: 6rpx;
				}

				.con {
					margin-left: 30rpx;

					.name {
						font-size: 30rpx;
						color: #373737;
					}

					.time {
						font-size: 24rpx;
						color: #B6B6BA;
						height: 30rpx;
						line-height: 30rpx;
						margin-top: 30rpx;
					}

				}
			}
		}


	}
</style>