<template>
	<view style="padding-bottom: 10rpx;">
		<!-- 用户信息 -->
		<view class="user-info" :style="{'margin-top':marginTop + 'px'}" @click="toSetting">
			<view class="head-img">
				<u-avatar :src="vuex_user.upload.url || (vuex_user.sex === '男' ? vuex_male_img : vuex_female_img)"
					size="104"></u-avatar>
			</view>

			<view class="name">
				您好,{{ vuex_user.name }}
			</view>
		</view>

		<!-- 搜索 -->
		<view class="search" v-if="false">
			<view class="input-content">
				<u-input placeholder="请输入要搜索的内容" height="40" :custom-style="inputStyle"></u-input>
			</view>
			<view class="icon">
				<u-icon name="search" size="46" color="#ABAEBE"></u-icon>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="swiper">
			<swiper :indicator-dots="false" @change="swiperChange">
				<swiper-item v-for="(item,index) in 3" :key="index">
					<view class="bkg">
						<u-image src="/static/home/swiper-pic.png" width="710" height="324"></u-image>
					</view>
					<view class="swiper-content">
						<view class="swiper-title">
							四世同堂服务管理
						</view>
						<view class="swiper-text">
							欢迎使用管理小程序
						</view>
						<view class="cir1"></view>
						<view class="cir2"></view>
						<view class="cir3"></view>
					</view>
					<view class="dots">
						<view v-for="(dot,index1) in 3" :key="index1" class="dot"
							:class="{activeDot:swiperIndex === index1}"></view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 数据展示 -->
		<view class="show-data">
			<view class="cir4"></view>
			<view class="cir5"></view>

			<view class="title">
				<view class="title-text">数据展示</view>
				<!-- <view class="more">
					<view class="more-text">更多</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#A7AFBC" size="24"></u-icon>
					</view>
				</view> -->
			</view>

			<view class="data-content">
				<view v-for="(value,key,index) in dataList" :key="index" class="data-item"
					:style="(key === 'todayServe' || key === 'todayHour') ? 'padding-left:20rpx;' : 'padding-right:104rpx;'">
					<view class="data-title">
						{{value.title}}
					</view>
					<view class="data-value">
						<view class="number">{{value.value}}</view>
						<view class="unit">{{value.unit}}</view>
					</view>
				</view>
			</view>

			<view class="data-statistics">
				<view class="statistics-item" @click="toList(1)">
					<view class="statistics-title">
						<view class="icon3"></view>
						<view class="text">
							护理中
						</view>
					</view>
					<view class="statistics-value">
						<view class="number">{{status.ing}}</view>
						<view class="unit">位</view>
					</view>
				</view>
				<view class="statistics-item" @click="toList('0')">
					<view class="statistics-title">
						<view class="icon1"></view>
						<view class="text">
							待护理
						</view>
					</view>
					<view class="statistics-value">
						<view class="number">{{status.wait}}</view>
						<view class="unit">位</view>
					</view>
				</view>
				<view class="statistics-item" @click="toList(2)">
					<view class="statistics-title">
						<view class="icon2"></view>
						<view class="text">
							已护理
						</view>
					</view>
					<view class="statistics-value">
						<view class="number">{{status.end}}</view>
						<view class="unit">位</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 信息提醒 -->
		<view class="info-remind">
			<view class="title">
				<view class="title-text">信息提醒</view>
				<!-- <view class="more">
					<view class="more-text">更多</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#A7AFBC" size="24"></u-icon>
					</view>
				</view> -->
			</view>

			<scroll-view :scroll-y="true" style="height: 320rpx;">
				<view class="info-list" v-if="infoList && infoList.length > 0">
					<view v-for="(item,index) in infoList" :key="index" class="info-item" @click="showNotice(item)">
						<view class="info-icon">
							<u-image src="/static/home/chat.png" height="40" width="40"></u-image>
						</view>
						<view class="info-content">
							<view class="info-title">
								{{item.title}}
							</view>
							<view class="info-time">
								{{dateFormat(new Date(item.created_at))}}
							</view>
						</view>
					</view>
				</view>

				<view v-else class="no-data">
					<u-empty mode="list" text="暂无提醒"></u-empty>
				</view>
			</scroll-view>
		</view>

		<u-popup v-model="isShowNotice" mode="bottom" :border-radius="10" height="40%">
			<view class="notice-title">{{detailNotice.title}}</view>
			<view class="notice-content">{{detailNotice.content}}</view>
		</u-popup>

		<doingOrder></doingOrder>
	</view>

</template>

<script>
	import doingOrder from '../../components/doingOrder/doingOrder.vue'
	import moment from "@/libs/moment.min.js"
	export default {
		components: {
			doingOrder
		},
		data() {
			return {
				marginTop: 96,
				swiperIndex: 0,
				inputStyle: {
					width: "468rpx",
					fontSize: "28rpx",
					fontWeight: "500"
				},
				dataList: {
					todayServe: {
						title: "今日服务数量",
						value: 0,
						unit: "位"
					},
					monthServe: {
						title: "本月服务数量",
						value: 0,
						unit: "位"
					},
					todayHour: {
						title: "今日服务工时",
						value: 0,
						unit: "分钟"
					},
					monthHour: {
						title: "本月服务工时",
						value: 0,
						unit: "分钟"
					},
				},
				status: {
					wait: 0,
					ing: 0,
					end: 0,
				},
				infoList: [],
				isShowNotice: false,
				detailNotice: {}
			}
		},
		methods: {
			toList(index) {
				this.$u.vuex('vuex_list_status', index)
				uni.switchTab({
					url: '/pages/list/list'
				})
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			toSetting() {
				this.$u.throttle(() => {
					uni.navigateTo({
						url: "/pages/setting/setting"
					})
				})
			},
			showNotice(item) {
				this.detailNotice = item
				this.isShowNotice = true
			},

			async getStatistic() {
				let res = await this.$u.api.statistic()
				this.dataList.monthHour.value = res.month_hour_total
				this.dataList.monthServe.value = res.month_serve_total
				this.dataList.todayHour.value = res.today_hour_total
				this.dataList.todayServe.value = res.today_serve_total

				this.status.wait = res.wait
				this.status.ing = res.ing
				this.status.end = res.end
			},
			async getRemind() {
				let res = await this.$u.api.noticeList()
				this.infoList = res.data
			},
		},
		computed: {
			dateFormat() {
				return function(date, fmt = "YYYY-MM-DD") {
					if (date) {
						return moment(date).format(fmt)
					}
				}
			}
		},
		async onShow() {
			await this.getStatistic()
			await this.getRemind()

		},
		created() {
			const res = uni.getSystemInfoSync()
			console.log('sys', res);
			this.marginTop = res.statusBarHeight + 2
		}
	}
</script>

<style scoped lang="scss">
	// 继承类
	.cir {
		background: #FFFFFF;
		border-radius: 100%;
	}

	.user-info {
		display: flex;
		align-items: center;

		//margin-top: 96rpx;

		.head-img {

			padding: 0 24rpx;
		}

		.name {
			width: 392rpx;
			height: 34rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #36596A;
			line-height: 34rpx;
		}
	}

	.search {
		width: 710rpx;
		height: 90rpx;
		background: #FFFFFF;
		border: 2rpx solid #FAFBFC;
		display: flex;
		align-items: center;
		justify-content: space-between;

		margin: 24rpx 24rpx 0 24rpx;

		.input-content {

			margin-left: 16rpx;
		}

		.icon {


			margin-right: 16rpx;
		}
	}

	.swiper {
		margin: 30rpx 20rpx 0 20rpx;

		swiper {
			width: 710rpx;
			height: 324rpx;
		}

		swiper-item {
			width: 710rpx;
			height: 324rpx;
			border-radius: 16rpx;

			position: relative;
		}

		.dots {
			display: flex;
			transform: translateX(-50%);

			position: absolute;
			left: 50%;
			bottom: 20rpx;

			.dot {
				width: 20rpx;
				height: 10rpx;
				border-radius: 10rpx;
				background-color: rgba(255, 255, 255, 0.4);

				margin: 0 6rpx;
			}

			.activeDot {
				width: 36rpx;
				background-color: #fff;
			}
		}

		.bkg {
			width: 710rpx;
			height: 324rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.swiper-content {
			width: 710rpx;
			height: 324rpx;
			position: relative;

			.cir1 {
				@extend .cir;

				width: 230rpx;
				height: 230rpx;
				opacity: 0.06;

				position: absolute;
				top: 184rpx;
				right: 652rpx;
			}

			.cir2 {
				@extend .cir;
				width: 170rpx;
				height: 170rpx;
				opacity: 0.1;

				position: absolute;
				top: 278rpx;
				right: 552rpx;
			}

			.cir3 {
				@extend .cir;
				width: 244rpx;
				height: 244rpx;
				opacity: 0.06;

				position: absolute;
				bottom: 260rpx;
				right: 150rpx;
			}

			.swiper-title {
				width: 302rpx;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;

				position: absolute;
				top: 94rpx;
				left: 44rpx;
			}

			.swiper-text {
				width: 500rpx;
				height: 40rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 40rpx;

				position: absolute;
				top: 164rpx;
				left: 44rpx;
			}
		}
	}

	.show-data {
		width: 710rpx;
		height: 492rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
		overflow: hidden;
		border-radius: 10rpx;

		margin: 30rpx auto 0 auto;
		padding: 0 22rpx;
		position: relative;

		.cir4 {
			@extend .cir;
			height: 110rpx;
			width: 110rpx;
			opacity: 0.06;
			background: #1479FF;

			position: absolute;
			top: 422rpx;
			right: 666rpx;
		}

		.cir5 {
			@extend .cir;
			background-color: #1479FF;
			width: 94rpx;
			height: 94rpx;
			opacity: 0.1;

			position: absolute;
			top: 468rpx;
			right: 618rpx;
		}

		.title {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			border-bottom: solid 2rpx #EEEFF5;
			justify-content: space-between;

			.title-text {
				width: 270rpx;
				height: 48rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 48rpx;

				//padding-left: 22rpx;
				position: relative;

				&::before {
					content: '';
					width: 160rpx;
					height: 14rpx;
					background: linear-gradient(270deg, rgba(52, 139, 254, 0) 0%, #1479FF 100%);
					border-radius: 6rpx;
					opacity: 0.3;

					position: absolute;
					top: 32rpx;
					left: 0rpx;
				}
			}

			.more {
				display: flex;
				align-items: center;

				//padding-right: 20rpx;

				.more-text {
					width: 48rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #A7AFBC;
					line-height: 34rpx;

				}

				.icon {
					display: flex;
					align-items: center;
				}
			}
		}

		.data-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.data-item {

				padding: 24rpx 0 0 0rpx;

				.data-title {
					width: 200rpx;
					height: 40rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #ABAEBE;
					line-height: 20rpx;

					position: relative;

					&::before {
						content: '';
						width: 4rpx;
						height: 28rpx;
						background: #1479FF;
						border-radius: 4rpx;

						position: absolute;
						top: 0;
						left: -20rpx;
					}
				}

				.data-value {
					height: 50rpx;
					display: flex;
					align-items: center;

					.number {
						height: 50rpx;
						font-size: 36rpx;
						font-weight: 600;
						color: #36596A;
						line-height: 50rpx;

						padding-right: 8rpx;
					}

					.unit {
						height: 50rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #ABAEBE;
						line-height: 50rpx;
					}
				}
			}
		}

		.data-statistics {
			display: flex;
			justify-content: space-evenly;

			margin-top: 38rpx;

			.statistics-item {
				flex: 1;

				.statistics-title {
					display: flex;
					align-items: center;

					.text {
						width: 84rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #36596A;
						line-height: 40rpx;
					}
				}

				.statistics-value {
					display: flex;

					.number {
						height: 50rpx;
						font-size: 36rpx;
						font-weight: 600;
						color: #36596A;
						line-height: 50rpx;

						padding-right: 12rpx;
						padding-left: 34rpx;
					}

					.unit {
						width: 100rpx;
						height: 50rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #ABAEBE;
						line-height: 50rpx;
					}
				}
			}
		}
	}

	.info-remind {
		@extend .show-data;
		width: 710rpx;
		height: 406rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
		border-radius: 10rpx;

		margin: 30rpx auto;

		.info-item {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid rgba(219, 218, 218, 0.4);

			padding: 38rpx 0 38rpx 0;

			.info-icon {
				border-radius: 100%;
				background-color: rgba(20, 121, 255, 0.2);

				padding: 20rpx;
			}

			.info-content {

				margin-left: 24rpx;

				.info-title {
					width: 480rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #36596A;
					line-height: 46rpx;
				}

				.info-time {
					width: 600rpx;
					height: 40rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #ABAEBE;
					line-height: 40rpx;
				}
			}
		}

		.no-data {
			transform: translate(-50%, -50%);
			position: absolute;
			top: 50%;
			left: 50%;
		}
	}

	.notice-title {
		font-size: 34rpx;
		text-align: center;
		color: #36596A;
		font-weight: 600;
		margin: 20rpx 0;
	}

	.notice-content {
		text-indent: 60rpx;

		padding: 0 10rpx;
	}
</style>
