<template name="index">
	<view class="index">
		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="4000"
		 duration="800">
			<swiper-item v-for="(item,index) in swiperList" :key="index" @click="viewDetail(item)">
				<image :src="item.url" mode="scaleToFill" v-if="item.type=='image'"></image>
				<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
			</swiper-item>
		</swiper>
		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item quick-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2" @click="clickQuick(item)"
			 hover-class="cell-hover" :hover-stay-time="50">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="notice" v-if="noticeList.length>0">
			<view class="flex">
				<span class="text-left basis-df text-bold" style="font-size:32upx">最新动态</span>
				<span class="padding-top-xs text-right text-xs basis-df" @click="viewMore">查看更多 ></span>
			</view>
			<view style="margin-top:20upx;">
				<swiper style="height: 130upx;" :indicator-dots="false" :circular="true" :vertical="true" :autoplay="true" interval="6000"
				 duration="800">
					<swiper-item v-for="(item,index) in noticeList" :key="index">
						<view class="notice-item" style="margin-top:10upx;" @click="viewAnnounceDetail(item)" hover-class="cell-hover"
						 :hover-stay-time="50">
							<view class="flex">
								<span class="left-content text-cut text-left basis-lg">{{item.announcementTitle}}</span>
								<span class="right-content text-right text-xs basis-sm">
									{{ item.announcementDate.split(" ")[0] }}
									<text class="notice-flag"> {{ item.hospitalBean?'医院发布':'平台发布'}}  </text>
								</span>
							</view>
							<view class="text-cut notice-item-content">
								<span :class="item.type == '2'?'bg-notice':'bg-announcement'">
								</span>
								<span :class="item.type == '2'?'padding-notice':'padding-announcement'">
									{{item.announcementDesc}}
								</span>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view>
			<view class="notice" style="padding-bottom:0;margin:30upx 0;">
				<view class="flex">
					<span class="text-left basis-df text-bold" style="font-size:32upx">筛查进展</span>
				</view>
			</view>

			<view class="sict-step">
			<ul>
				<li>
					<view class="step" :class="count>0?'step-li':'step-none'">1</view>
					<view class="step-title">报名</view>
					<p style="min-height: 100upx;">
						<view class="notice margin-tb-sm">
							<view v-show="count>0">
								<view class="notice-item  margin-top-sm" v-for="(item,index) in registerList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl">{{item.title}}</view>
										<view class="right-content text-right text-xs fr" style="width:140upx">{{ item.sendTime }}</view>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
				<li>
					<view class="step" :class="count>1?'step-li':'step-none'">2</view>
					<view class="step-title">血液检查</view>
					<p style="min-height: 100upx;">
						<view class="notice">
							<view v-show="count>1">
								<view class="notice-item  margin-top-sm" v-for="(item,index) in bloodList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl">{{item.title}}</view>
										<span class="right-content text-right text-xs basis-sm fr" style="width:140upx">{{ item.sendTime }}</span>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
				<li>
					<view class="step" :class="count>2?'':'step-none'">3</view>
					<view class="step-title">风险评估</view>
					<p style="min-height: 100upx;">
						<view class="notice">
							<view>
								<view class="notice-item  margin-top-sm" v-for="(item,index) in riskEvaluationList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl">{{item.title}}</view>
										<view class="right-content text-right text-xs fr" style="width:140upx">{{ item.sendTime }}</view>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
				<li>
					<view class="step" :class="count>3?'':'step-none'">4</view>
					<view class="step-title">内镜检查</view>
					<p style="min-height: 100upx;">
						<view class="notice" v-show="count>3">
							<view>
								<view class="notice-item  margin-top-sm" v-for="(item,index) in gastricList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl">{{item.title}}</view>
										<view class="right-content text-right text-xs fr" style="width:140upx">{{ item.sendTime }}</view>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
				<li>
					<view class="step" :class="count>4?'':'step-none'">5</view>
					<view class="step-title">随访</view>
					<p style="min-height: 130upx;">
						<view class="notice" v-show="count>4">
							<view>
								<view class="notice-item  margin-top-sm" v-for="(item,index) in followUpList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl">{{item.title}}</view>
										<view class="right-content text-right text-xs fr" style="width:140upx">{{ item.sendTime }}</view>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
			</ul>
		</view>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/mix-list-cell';
	import WXBizDataCrypt from '@/utils/WXBizDataCrypt';
	import {
		getSessionKey
	} from '@/utils/index';

	export default {
		components: {
			listCell
		},
		name: "home",
		data() {
			return {
				count: 0,
				selectHostipal: true,
				standardSwiperList: [
					{
						id: 1,
						type: 'image',
						url: '../../static/1.png'
					},
				],
				vanguardSwiperList: [
					{
						id: 4,
						type: 'image',
						url: '../../static/4.jpg'
					}
				],
				swiperList: [],
				towerStart: 0,
				standardCuIconList:[
					{
						cuIcon: 'friendadd',
						color: 'blue',
						badge: 0,
						name: '筛查报名',
						navUrl: "/personModule/standardSignUp/index?type=self"
					}
				],
				vanguardCuIconList: [
					// {
					// 	cuIcon: 'friendadd',
					// 	color: 'blue',
					// 	badge: 0,
					// 	name: '自我报名',
					// 	navUrl: "/personModule/signUp/index?type=self"
					// },
					{
						cuIcon: 'friend',
						color: 'blue',
						badge: 0,
						name: '筛查报名',
						navUrl: "/personModule/signUp/index?type=other"
					},
					{
						cuIcon: 'peoplelist',
						color: 'blue',
						badge: 0,
						name: '筛查档案',
						navUrl: '/personModule/screen/index'
					},
					{
						cuIcon: 'remind',
						color: 'blue',
						badge: 0,
						name: '内镜预约',
						navUrl: "/educationViews/details/index?id=5f55f1a9e4b0397dc58ab18f"
					},
					{
						cuIcon: 'message',
						color: 'blue',
						badge: 0,
						name: '医患沟通',
						navUrl: '/personModule/communicate/index'
					}
				],
				cuIconList:[],
				direction: '',
				glFlag:false,
				modalName: null,
				gridCol: 4,
				gridBorder: false,
				noticeList: [],
				registerList: [],
				bloodList: [],
				riskEvaluationList: [],
				gastricList: [],
				followUpList: [],
			};
		},

		onLoad: function(option) {
			if(option && option.hospitalId){
				this.$store.dispatch('user/setInfo', {hospitalId:option.hospitalId,accessWay:1})
			}else{
				this.$store.dispatch('user/setInfo', {hospitalId:"5f475e56ec2e2bf7756a77a8",accessWay:2})
			}
			// #ifdef MP-WEIXIN 
			wx.setBackgroundFetchToken({
			  token: 'sjf'
			})
			// #endif 
			let list = [{}];
			for (let i = 0; i < 26; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
			}
			this.list = list;
			this.listCur = list[0];
			
			let that = this
			// #ifdef MP-WEIXIN 
			wx.login({
				success(res) {
					if (res.code) {
						let code = res.code
						console.log(code)
						that.getUserInfo(code)
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
			wx.showShareMenu({
				withShareTicket: true
			})
			// #endif 
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$store.getters.userInfo.hospitalName ? this.$store.getters.userInfo.hospitalName : '筛查服务'
			});
			
			// this.glFlag = this.$store.getters.userInfo.diseaseType == 'gc_gl'
			
			// this.cuIconList = this.glFlag?this.vanguardCuIconList:this.standardCuIconList
			// this.swiperList = this.glFlag?this.vanguardSwiperList:this.standardSwiperList
			
			this.cuIconList = this.vanguardCuIconList
			this.swiperList = this.vanguardSwiperList
			// #ifdef MP-WEIXIN 
			wx.showShareMenu({
				withShareTicket: true
			})
			this.getProgress()
			this.getNotice()
			 // #endif 
			 
			 // #ifdef H5
			 this.getProgress()
			 this.getNotice()
			 // #endif 
		},
		methods: {
			// 获取用户信息
			getUserInfo(code) {
				this.$http.post(`/gastric-cancer-user/wechat/user/auth/api?code=${code}`).then(res => {
					const d = res.data
					if (d.code == 1) {
						let userInfo = d.object
						if(d.object.hospitals && d.object.hospitals.length>0){
							this.$store.dispatch('user/setInfo', { hospitalId:d.object.hospitals[0].hospitalId ,hospitalName:d.object.hospitals[0].hospitalName})
						}
						let obj = Object.assign({}, this.$store.getters.userInfo)
						if (obj.avatarUrl) {
							userInfo.avatarUrl = obj.avatarUrl
						}
						this.$store.dispatch('user/setInfo', Object.assign(obj, userInfo))
						this.$store.dispatch('user/setToken', d.result)
						this.getEliminate()
						this.getFamilyRelation()
						this.getNotice()
						this.getHospital()
						this.getProgress()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			getHospital() {
				const data = {
					params: {
						pageNum: 1,
						pageSize: 500,
						isUse: 1
					}
				}
				this.$http.get(`/gastric-cancer-user/hospital/page`, data).then(res => {
					const d = res.data
					if (d.code == 1) {
						let obj = Object.assign({}, this.$store.getters.userInfo)
						obj.hospitalList = d.object.list
						obj.hospitals = d.object.list
						this.$store.dispatch('user/setInfo', obj)
						console.log(this.$store.getters.userInfo)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			
			// 获取家庭成员关系
			getFamilyRelation() {
				this.$http.get(`/gastric-cancer-data/enumerate/familyRelation`).then(res => {
					const d = res.data
					if (d.code == 1) {
						let arr = []
						if (d.object.items.length > 0) {
							d.object.items.forEach(item => {
								arr.push({
									label: item.itemName,
									value: item.itemCode
								})
							})
						}
						this.$store.dispatch('enumerate/setFamilyRelation', arr)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 查看轮播图详情
			viewDetail(obj) {
				if (obj.id == 4) {
					uni.navigateTo({
						url: "/personModule/notice/detail?item=" + encodeURIComponent(JSON.stringify(obj))
					})
				} else {
					let data = {
						id: 6631,
						title: '胃癌的高危人群是指什么？',
						author: "上海市计算技术研究所",
						time: "2小时前"
					}
					uni.navigateTo({
						url: `/educationViews/details/index?data=${JSON.stringify(data)}`
					})
				}
			},

			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},

			// 点击快捷方式
			clickQuick(obj) {
				let diseaseType = this.$store.getters.userInfo.diseaseType
				if (this.$store.getters.userInfo.name) {
					if (obj.navUrl == 'none') {
						uni.showToast({
							icon: 'none',
							title: "此功能尚未开发,敬请期待！"
						})
					} else if(obj.name == "筛查报名" && (diseaseType=='gc_tj' || diseaseType=='gc_yq' || diseaseType=='gc_sj')){   
						// 先锋模式	
						// uni.navigateTo({
						// 	url: '/personModule/vanguardSignUp/index?type=self'
						// })
						uni.navigateTo({
							url: obj.navUrl
						})
					}else{
						uni.navigateTo({
							url: obj.navUrl
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: "请先完善个人信息！"
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/person/personInfo/index?url=' + encodeURIComponent(JSON.stringify(obj.navUrl)),
						});
					}, 1500);
				}
			},

			// 查看更多
			viewMore() {
				uni.navigateTo({
					url: '/personModule/notice/index'
				})
			},

			
			// 获取筛查进度
			getProgress() {
				if (this.$store.getters.token) {
					const data = {
						params: {
							pageNum: 1,
							pageSize: 10000
						}
					}
					this.$http.get(`/gastric-cancer-data/mini/program/notice/mine/page`, data).then(res => {
						const d = res.data
						if (d.code == 1) {
							if (d.object.notices.register && d.object.notices.register.length > 0) {
								this.count = 1
								this.registerList = d.object.notices.register

								this.registerList.forEach(item => {
									item.sendTime = item.sendTime ? item.sendTime.split(" ")[0] : ''
								})
							}

							if (d.object.notices.blood && d.object.notices.blood.length > 0) {
								this.count = 2
								this.bloodList = d.object.notices.blood
								this.bloodList.forEach(item => {
									item.sendTime = item.sendTime ? item.sendTime.split(" ")[0] : ''
								})
							}

							if (d.object.notices.riskEvaluation && d.object.notices.riskEvaluation.length > 0) {
								this.count = 3
								this.riskEvaluationList = d.object.notices.riskEvaluation
								this.riskEvaluationList.forEach(item => {
									item.sendTime = item.sendTime ? item.sendTime.split(" ")[0] : ''
								})
							}

							if (d.object.notices.gastric && d.object.notices.gastric.length > 0) {
								this.count = 4
								this.gastricList = d.object.notices.gastric
								this.gastricList.forEach(item => {
									item.sendTime = item.sendTime ? item.sendTime.split(" ")[0] : ''
								})
							}

							if (d.object.notices.followUp && d.object.notices.followUp.length > 0) {
								this.count = 5
								this.followUpList = d.object.notices.followUp
								this.followUpList.forEach(item => {
									item.sendTime = item.sendTime ? item.sendTime.split(" ")[0] : ''
								})
							}
							// this.noticeList = d.object.list
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},

			// 注册小程序用户
			registerUser(openid) {
				let data = {
					'openid': openid
				}
				this.$http.post(`/gastric-cancer-user/wechat/user/register`, data).then(res => {
					const d = res.data
					if (d.code == 1) {
						let userInfo = d.object
						that.$store.dispatch('user/setToken', d.result)
					}
				}).catch(err => {
					console.log(err)
				})
			},

			// 获取公告
			getNotice() {
				if (this.$store.getters.token) {
					const data = {
						params: {
							pageNum: 1,
							pageSize: 10,
							hospitalId: this.$store.getters.userInfo.hospitalId
						}
					}
					this.$http.get(`/gastric-cancer-data/announcement/announce/list`, data).then(res => {
						const d = res.data
						if (d.code == 1) {
							this.noticeList = d.object.list
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},

		

			// 排除标准
			// 获取家庭成员关系
			getEliminate() {
				this.$http.get(`/gastric-cancer-data/enumerate/eliminate`).then(res => {
					const d = res.data
					if (d.code == 1) {
						let arr = []
						if (d.object.items.length > 0) {
							d.object.items.forEach(item => {
								arr.push({
									label: item.itemName,
									value: item.itemCode
								})
							})
						}
						this.$store.dispatch('enumerate/setEliminate', arr)
					}
				}).catch(err => {
					console.log(err)
				})
			},

			// 查看公告详情
			viewAnnounceDetail(item) {
				uni.navigateTo({
					url: `/personModule/notice/detail?id=${item.id}&type=announce`
				})
			},

			// 查看通知详情
			viewNoticeDetail(item) {

				uni.navigateTo({
					url: `/personModule/notice/detail?id=${item.id}&type=notice`
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-column {
		height: 100%;
	}

	.index {
		height: 100%;

		.notice {
			overflow-y: auto;
			padding: 0 50upx;
			-webkit-overflow-scrolling: touch;
			margin-top: 40upx;
			padding-bottom: 20upx;

			.left-content {
				color: #000;
			}

			.right-content {
				vertical-align: bottom;
				padding-top: 8upx;
				color: rgba(0, 0, 0, 0.5);
			}

			.notice-item {
				background-color: #FFFFFF;
				// border:2upx solid rgba(153, 153, 153, 0.4);
				padding: 20upx;
				border-radius: 10upx;

				.notice-item-content {
					font-size: 26upx;
					margin-top: 12upx;
				}
				
				.notice-flag{
					border-radius: 14upx;
					border: 2upx solid #59A0F6;
					padding: 3upx 4upx;
					margin-left: 7upx;
					font-size: 24upx;
				}

				&.cell-hover {
					background: #fafafa;
				}
			}

			.bg-announcement,
			.bg-notice {
				height: 28upx;
				width: 32upx;
				display: inline-block;
				background-position: left;
				vertical-align: text-top;
				background-size: cover;
				background-repeat: no-repeat;
				background-image: url(../../static/announcement.png);
			}

			.bg-notice {
				background-image: url(../../static/notice.png);
			}

			.padding-notice {
				padding-left: 4upx;
			}

			.padding-announcement {
				padding-left: 14upx;
			}
		}

		.quick-item {
			&.cell-hover {
				background: #fafafa;
			}
		}

		.cu-tag {
			padding: 0px 12upx;
			height: 42upx;
			line-height: 43upx;
			font-size: 20upx;
		}

		.cu-list.grid>.cu-item,
		.cu-list.grid.no-border>.cu-item {
			padding: 0;
		}
	}

	.sict-step {
		padding-bottom: 30upx;
		// #ifndef MP-WEIXIN
		padding-bottom: 120upx;

		// #endif
		.step-title {
			position: absolute;
			text-align: right;
			top: 20upx;
			font-size: 30upx;
			left: 34upx;
		}

		.notice-item {
			padding: 10upx 20upx;
		}

		ul {
			margin: 0 auto;
			padding-left: 36upx;
		}

		li {
			position: relative;
			margin: 0 40upx;
			padding-top: 20upx;
			padding-left: 70upx;
			list-style: none;
			border-left: 2upx solid #ccc;
		}

		li:before {
			content: "";
			display: block;
			position: absolute;
			margin-left: -12upx;
			top: 16upx;
			left: -10upx;
			width: 38upx;
			height: 38upx;
			line-height: 50upx;
			text-align: center;
			// border:2upx solid #ccc;
			font-size: 28upx;
			border-radius: 50%;
		}

		.step {
			position: absolute;
			left: -20upx;
			height: 40upx;
			width: 40upx;
			line-height: 40upx;
			color: #409eff;
			text-align: center;
			background-color: rgb(242, 242, 242);
			border: 2upx solid #409eff;
			border-radius: 50%;
		}

		.step~.step-title {
			color: #409eff;
		}

		li {
			.notice {
				margin: 0;
				margin-top: 30upx;
				padding: 20upx;

				.notice-item {
					padding: 16upx 20upx;
					padding-bottom: 8upx;
				}
			}
		}

		.step-none {
			color: #ccc;
			border: 2upx solid #ccc;
		}

		.step-none~.step-title {
			color: #ccc;
		}
	}
	
</style>
