<template>
	<view class="content">
		<view class="header">
			<view class="circle c_1"></view>
			<view class="circle c_2"></view>
			<view class="circle c_3"></view>

			<view class="headerBox">
				<view class="topName">
					<view class="topNameLeft">
						<view class="imgface">
							<image :src="iconface" class="iconface"></image>
						</view>
						<view class="imgName">您好，{{userName}}</view>
					</view>
					<view class="topNameRight">
						<text class="iconfont icon-search icon_search" @tap="toSearch"></text>
						<text class="iconfont icon-settings icon_set" @tap="toSetting"></text>

					</view>
				</view>
				<view class="hospital" @tap="tohospital">
					<view class="imgIconStation" style="z-index: 99;">
						<text class="iconfont icon-location iconLocation"></text>
					</view>
					<view class="hospitalName" style="z-index: 99;">{{hospital}}</view>
					<view class="imgIconMore">
						<text class='triangleDiv'>▼</text>
					</view>
				</view>
				<view class="iconBox">
					<block v-for="(item, index) in icons">
						<navigator :url="item.url" style="z-index: 999;">
							<view class="iconBoxItem">
								<view class="iconBoxItemImg">
									<view class="iconBoxItemImgBox">
										<image class="iconBoxItemImgInfo" :src="item.img"></image>
									</view>
								</view>
								<view class="iconBoxItemTxt">{{item.name}}</view>
							</view>
						</navigator>
					</block>
				</view>
			</view>
		</view>
		<view class="news">
			<view class="newsIcon">
				<text class="iconfont icon-volumeup "></text>
			</view>
			<swiper class="swiper" autoplay="true" vertical="true">

				<block v-for="(item, index) in news">
					<swiper-item class="swiper-item-box">
						<view class="swiper-item">
							<navigator :url="'../../package/packagevideo/pages/newsinfo/newsinfo?id='+item.id">
								{{item.title}}
							</navigator>
						</view>
						<view class="swiper-item-more">
							<navigator url="../../package/packagevideo/pages/news/news"><text>更多</text>
								<text class="iconfont icon-Icons_ToolBar_ArrowRight"></text>
							</navigator>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="stat indexbox">
			<view class="statHeader indexheader">
				<view class="indexheaderLeft">
					<view class="indexheaderLeftText">数据统计</view>
					<view class="headerBorder"></view>
				</view>
				<view class="indexheaderRight">
					<view class="indexheaderMoreText" @click="bindMoreStat">更多
						<text class="iconfont icon-Icons_ToolBar_ArrowRight"></text>
					</view>
				</view>
			</view>
			<view class="statBox">
				<view class="statItem">
					<view class="statItemHeader">
						<view class="statItemBar"></view>
						<text class="statItemTitele">今日应收(元)</text>
					</view>
					<view class="statNum">{{statCount.bill_today}}</view>
				</view>

				<view class="statItem">
					<view class="statItemHeader">
						<view class="statItemBar statItemBarRed"></view>
						<text class="statItemTitele">今日退款(元)</text>
					</view>
					<view class="statNum">{{statCount.refund_today}}</view>
				</view>
				
				<view class="statItem">
					<view class="statItemHeader">
						<view class="statItemBar"></view>
						<text class="statItemTitele">在岗护工</text>
					</view>
					<view class="statNum">{{statCount.paramedic_has_order}}</view>
				</view>
			</view>
			<view class="statBox">
				<view class="statItem">
					<view class="statItemHeader">
						<view class="statItemBar"></view>
						<text class="statItemTitele">订单总数(个)</text>
					</view>
					<view class="statNum">{{statCount.orders_all}}</view>
				</view>
				<view class="statItem">
					<view class="statItemHeader">
						<view class="statItemBar"></view>
						<text class="statItemTitele">护工数量(人)</text>
					</view>
					<view class="statNum">{{statCount.paramedics}}</view>
				</view>

			</view>
			<view class="statBox">
				<view class="statItem">
					<view class="statItemHeader">
						<view class="statItemBar"></view>
						<text class="statItemTitele">日结算</text>
					</view>
					<view class="statNum">{{statCount.orders_finished_in_today}}</view>
				</view>
				<view class="statItem">
					<view class="statItemHeader">
						<view class="statItemBar"></view>
						<text class="statItemTitele">日派工</text>
					</view>
					<view class="statNum">{{statCount.orders_ongoing_in_today}}</view>
				</view>

			</view>

			<view class="statBox">
				<view class="statItem" style="width: 33.33%;">
					<view class="statItemHeader">
						<view class="statItemCBar "></view>
						<text class="statItemTitele">待处理</text>
					</view>
					<view class="statNum mf-26">{{statCount.orders_pending}}</view>
				</view>
				<view class="statItem" style="width: 33.33%;">
					<view class="statItemHeader ">
						<view class="statItemCBar blue"></view>
						<text class="statItemTitele">在陪患者</text>
					</view>
					<view class="statNum mf-26">{{statCount.orders_ongoing}}</view>
				</view>
				<view class="statItem" style="width: 33.33%;">
					<view class="statItemHeader ">
						<view class="statItemCBar green"></view>
						<text class="statItemTitele">已完成</text>
					</view>
					<view class="statNum mf-26">{{statCount.orders_finished}}</view>
				</view>
			</view>
			<view class="lCircle lc_1"></view>
			<view class="lCircle lc_2"></view>

		</view>
		<view class="videos indexbox">
			<view class="indexheader">
				<view class="indexheaderLeft">
					<view class="indexheaderLeftText">培训视频</view>
					<view class="headerBorder"></view>
				</view>
				<view class="indexheaderRight">
					<view class="indexheaderMoreText" @click="bindMoreVideo">更多
						<text class="iconfont icon-Icons_ToolBar_ArrowRight"></text>
					</view>
				</view>
			</view>
			<view class="videosBox">
				<block v-for="(item,index) in videos">
					<navigator :url="'../../package/packagevideo/pages/videoinfo/videoinfo?id='+item.id">

						<view class="videosItem">
							<video :src="host+item.video" :poster="host+item.poster" style="width:100%;height:100%;"
								object-fit="fill"></video>
						</view>
					</navigator>
				</block>
			</view>
			<view class="lCircle lc_1"></view>
			<view class="lCircle lc_2"></view>
		</view>
		<view class="footer">2021 © 江苏天天欣业物业服务有限公司</view>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	export default {
		data() {
			return {
				icons: [{
						name: '创建订单',
						url: '/package/packageorder/pages/createorder/createorder',
						img: '/static/resources/pic-chuanjian.png'
					}, {
						name: '订单管理',
						url: '/pages/order/order',
						img: '/static/resources/pic-dingdan.png',

					}, {
						name: '护工录入',
						url: '/package/packagecarer/pages/createcarer/createcarer',
						img: '/static/resources/pic-hugong.png'
					}, {
						name: '护工管理',
						url: '/package/packagecarer/pages/carerlist/carerlist',
						img: '/static/resources/pic-guanli.png'
					},
					{
						name: '统计报表',
						url: '/package/packagestat/pages/stat/stat',
						img: '/static/resources/pic-tongji.png'
					}, {
						name: '陪护一览',
						url: '/package/packagestat/pages/artboard/artboard',
						img: '/static/resources/pic-peihu.png'
					}
				],

				news: [{
					title: "全面贯彻老年人喝水的问题全面贯彻老年人喝水的问题"
				}, {
					title: "全面贯彻老年人喝水的问题全面贯彻老年人喝水的问题"
				}],
				userName: "",
				hospital: "",
				videos: [],
				host: "",
				statCount: {}
			}
		},
		onLoad() {
			var user = uni.getStorageSync('userInfo');
			var currentProject = uni.getStorageSync('currentProject');
			this.userName = user.user_info.name;
			this.iconface = !util.isNull(user.user_info.avatar_url) ? user.user_info.avatar_url : "/static/logo.png";
			this.hospital = currentProject.name;
			this.loadPage();
			this.host = util.HOST;
			uni.hideKeyboard();
			this.loadNews();
			this.loadStat();

		},
		methods: {
			toSetting: function() {

				uni.navigateTo({
					url: "/pages/setting/setting"
				})
			},
			toSearch: function() {
				uni.navigateTo({
					url: "/pages/order/order?from=indexSearch"
				})
			},
			tohospital: function() {
				console.log(1)
				uni.navigateTo({
					url: "/pages/selectHospital/selectHospital"
				})
			},
			loadPage: function() {
				var that = this;
				util.request({
					bindThis: that,
					api: 'manager/get-videos',
					customLoading: false,
					data: {
						page: 1,
						page_size: 2
					},
					utilSuccess: function(r) {
						var res = r.data;
						that.videos = res;
						console.log(res)
					},
					utilFail: function(res) {}
				});
			},
			loadNews: function() {
				var that = this;
				util.request({
					bindThis: that,
					api: 'manager/get-notifications',
					customLoading: false,
					data: {
						page: 1,
						page_size: 5
					},
					utilSuccess: function(r) {
						var res = r.data;
						that.news = res;
						console.log(res)
					},
					utilFail: function(res) {}
				});
			},
			loadStat: function() {
				var that = this;
				var currentProject = uni.getStorageSync('currentProject');
				util.request({
					bindThis: that,
					api: 'manager/statistics/overview',
					data: {
						project_id: currentProject.id
					},
					utilSuccess: function(res) {
						that.statCount = res.counts;
					},
					utilFail: function(res) {}
				});
			},
			bindMoreVideo: function() {
				uni.navigateTo({
					url: "../../package/packagevideo/pages/videolist/videolist"
				})
			},
			bindMoreStat: function() {
				uni.navigateTo({
					url: "../../package/packagestat/pages/stat/stat"
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #F1F1F1;
		padding-top: 0rpx !important;
		padding-bottom: 0rpx !important;
	}

	.content {
		overflow: hidden;
	}

	.topNameRight {
		display: flex;
	}

	.iconBoxItemImgBox {
		background: #FFFFFF;
		width: 88rpx;
		height: 88rpx;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.iconBoxItemImgInfo {
		width: 48rpx;
		height: 48rpx;
	}

	.header {
		background-image: linear-gradient(130deg, #52D5A6 0%, #43C9CF 100%);
		width: 100%;
		position: relative;
		padding: 46rpx 30rpx 28rpx 30rpx;
		box-sizing: border-box;
		padding-top: 94rpx;
	}

	.iconLocation {
		width: 25rpx;
		height: 31rpx;
		margin-right: 22rpx;
		color: #FFFFFF;
	}

	.circle {
		opacity: 0.2;
		background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.26) 58%, rgba(255, 255, 255, 0.81) 97%);

		border-radius: 50%;
		position: absolute;
	}

	.c_1 {
		width: 426rpx;
		height: 428rpx;

		left: -170rpx;
		top: 48rpx;
	}

	.c_2 {
		width: 428rpx;
		height: 428rpx;

		right: -170rpx;
		top: -200rpx;
		z-index: 1;
	}

	.c_3 {
		width: 280rpx;
		height: 280rpx;
		right: -120rpx;
		top: 206rpx;
		z-index: 2;
	}

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

	}

	.imgface {
		border: 2rpx solid #FFFFFF;
		margin-right: 20rpx;
		border-radius: 50rpx;
	}

	.iconface {
		height: 60rpx;
		width: 60rpx;
		border-radius: 50rpx;
	}

	.topName {
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		align-items: center;
	}

	.hospitalName,
	.imgName {
		font-family: SourceHanSansCN-Medium;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.hospital {
		margin-top: 23rpx;
		display: flex;
		align-items: center;
		margin-left: 15rpx;
		z-index: 99;
	}

	.iconBox {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		margin-top: 12rpx;
		z-index: 99;
	}

	.iconBox .iconBoxItem {

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 28rpx 32rpx;

	}

	.icon-volumeup {
		color: #43C9CF;

	}

	.iconBox .iconBoxItem .iconBoxItemImg {
		width: 100rpx;
		height: 100rpx;
		background: rgba(242, 245, 250, 0.4);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.iconBox .iconBoxItem .iconBoxItemTxt {
		font-family: SourceHanSansCN-Medium;
		font-size: 28rpx;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		margin-top: 12rpx;
	}


	.news {
		width: 100%;
		height: 60rpx;
		background-color: #F1FFFC;
		display: flex;
		padding: 0rpx 40rpx;
		box-sizing: border-box;
		align-items: center;
	}

	.news .newsIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.swiper {

		display: flex;
		height: 60rpx;
		width: 100%;
		align-items: center;
	}

	.swiper-item {
		text-overflow: ellipsis;
		font-size: 28rpx;
		color: #13a987;
		width: 80%;
		overflow: hidden;
		white-space: nowrap;
	}

	.swiper-item-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.swiper-item-more {
		font-size: 28rpx;
		color: #CCCCCC;
	}

	.stat {
		margin: 20rpx 30rpx;
		position: relative;
	}

	.videos {
		margin: 20rpx 30rpx;
		position: relative;
	}


	.icon-Icons_ToolBar_ArrowRight {
		width: 36rpx;
		height: 36rpx;
		font-size: 22rpx;
		margin-left: 14rpx;
	}

	.footer {
		font-family: SourceHanSansCN-Normal;
		font-size: 28rpx;
		color: #CCCCCC;
		text-align: center;
		line-height: 40rpx;
		padding: 20rpx 0rpx;
	}


	.statBox {
		display: flex;
		margin-top: 20rpx;
	}

	.statItem {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		width: 50%;

	}

	.statItemHeader {
		display: flex;
		line-height: 30rpx;
	}

	.statNum {
		margin-top: 16rpx;
		padding-left: 28rpx;
		font-weight: 600;
	}

	.statItem .statItemBar {
		background-image: linear-gradient(130deg, #52D5A6 0%, #43C9CF 100%);
		border-radius: 4rpx;
		width: 6rpx;
		height: 28rpx;
	}
.statItem .statItemBarRed {
		background-image: linear-gradient(130deg, #e12e36 0%, #dc605d 100%) !important;
		border-radius: 4rpx;
		width: 6rpx;
		height: 28rpx;
	}
	.statItem .statItemTitele {
		font-family: SourceHanSansCN-Normal;
		font-size: 28rpx;
		color: #666666;
		margin-left: 18rpx;
	}

	.statItemCBar {
		background: #FDB030;
		border: 2rpx solid #FFFFFF;
		border-radius: 16rpx;
		height: 16rpx;
		width: 16rpx;
	}

	.blue {
		background: #3C91F5;
	}

	.green {
		background: #52D5A6;
	}

	.mf-26 {
		padding-left: 34rpx;
	}

	.videosBox {
		display: flex;
		justify-content: space-around;
		margin-top: 19rpx;
	}

	.videosBox .videosItem {
		opacity: 0.4;
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.60) 100%);
		border-radius: 4rpx;
		width: 289rpx;
		height: 160rpx;
	}

	.icon_set,
	.icon_search {
		width: 31rpx;
		height: 31rpx;
		z-index: 9;
		color: #FFFFFF;
	}

	.icon_set {
		margin-left: 54rpx;
	}

	.indexheaderLeft {
		position: relative;
		z-index: 2;
		display: flex;
		flex: 1;
	}

	.headerBorder {
		background-image: linear-gradient(90deg, rgba(91, 215, 171, 0.6) 0%, rgba(238, 238, 238, 0.00) 100%);
		border-radius: 8rpx;
		width: 60rpx;
		height: 16rpx;
		position: absolute;
		bottom: 2rpx;
		left: 0;
		z-index: 1;
	}

	.imgIconMore {
		display: flex;
		align-items: center;
		margin-left: 16rpx;
	}

	.triangleDiv {
		font-size: 12rpx;
		color: #FFFFFF;
	}
</style>
