<template>
	<view class="container">
		<view class="homeBg">
			<view class="selectHospital" @click="showHospital=true" :style="{top: statusBarHeight+'px'}">
				<image style="width: 33rpx;height: 30rpx;" src="../../static/resource/icon/location.png" />
				<view class="selectHospitalText">{{currentProject.name}}</view>
				<image style="width: 21rpx;height: 13rpx;" src="../../static/resource/icon/icon_orange_arrow.png">
			</view>
			<swiper class="homeBgSwiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<swiper-item>
					<image class="homeBgSwiperImg" src="../../static/resource/imgs/home_bg_1.png"></image>
				</swiper-item>
			</swiper>
			<image class="rightB" src="../../static/resource/imgs/extend.png"></image>
		</view>
		<view class="boxItem">
			<view class="boxItembox">
				<view class="boxItemboxItem" @click="tofind">
					<view>
						<text class="htitle">找住院护工</text>
						<text>平台保证</text>
					</view>
					<view>
						<image src="../../static/resource/icon/icon_hospital.png"></image>
					</view>
				</view>
				<view class="boxItemboxItem" @click="toShowNone">

					<view>
						<text class="htitle">找居家护工</text>
						<text>平台保证</text>
					</view>
					<view>
						<image style="width: 85rpx;" src="../../static/resource/icon/icon_home_big.png"></image>
					</view>
				</view>
			</view>

			<view @click="toAdmin" class="btnadmin">
				<image style="width: 77rpx;height: 77rpx;" src="../../static/resource/icon/icon_tohospital.png"></image>
				<text>院办登录</text>
			</view>

			<view class="boxItemtext">
				平台已服务<text>{{orderTotalCount}}</text>单
			</view>
		</view>
		<view class="news">
			<view class="newsHeader">
				<image style="width: 126rpx;
height: 31rpx;" src="../../static/resource/imgs/zhishititle.png"></image>
			</view>
			<view class="newsContent">
				<view @click="toDetail(item.id)" class="newsItem" v-for="(item,index) of news" :key="index">
					<view class="newsImg">
						<image style="width: 219rpx;height: 152rpx;width: 219rpx;
height: 152rpx;" :src="item.poster"></image>
					</view>
					<view class="newsTitle">
						<text>{{item.title}}</text>
						<text style="text-align: right;font-size: 24rpx;color: #F7723F;">{{item.published_at}}</text>
					</view>
				</view>
			</view>
		</view>
		<tabbar :current-page="0"></tabbar>
		<u-popup mode="center" v-model="showHospital" width="90%" closeable="true" border-radius="14">
			<view class="popbox">
				<view class="popHeader">
					附近的医院
				</view>
				<view class="popcontent">
					<scroll-view scroll-y="true" style="height: 400rpx;">
						<view class="hitem" :data-item="item" @click="toSelectHospital" v-for="(item,index) in listAddr"
							:key="index">

							<view class="hitemtitle">
								<view class="hitemname">{{item.name}} </view>
								<view>距离您<text style="color: #F7723F;">{{item.distance}}</text>公里</view>
							</view>
							<view class="hitemfoot">
								<image style="width: 33rpx;height: 30rpx;"
									src="../../static/resource/icon/location.png" />

								<text class="hitemaddr">{{item.address}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue";
	import util from "../../utils/util.js";
	import QQMapWX from "../../utils/qqmap-wx-jssdk.min.js";
	export default {

		components: {
			tabbar
		},
		data() {

			return {
				showHospital: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				statusBarHeight: 0,
				navBarBoxHeight: 0,
				imgUrls: [{
						url: '/static/resource/imgs/home_bg_1.png'
					},
					{
						url: '/static/resource/imgs/home_bg_1.png'
					}
				],
				currentSwiper: 0,
				autoplay: false,
				news: [],
				topNav: 40,
				isShowLocation: false,
				listAddr: [],
				latitude: '',
				longitude: '',
				currentProject: null,
				host: '',
				loading: true,
				orderTotalCount: 0
			}
		},
		onShareAppMessage() {},
		onLoad(options) {
			var that = this;
			if (options.from == "selectHospital") {
				that.showHospital = true;
			}
			uni.getLocation({
				type: 'wgs84',
				success: function(e) {
					that.latitude = e.latitude;
					that.longitude = e.longitude;
					that.loadhospital();
				}
			});
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			this.navBarBoxHeight = 80 + this.statusBarHeight * 2
		},
		onShow() {

			this.loadVideos();
			this.loadOrderCount();
		},
		onReady() {},
		onHide() {},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/packages/packagesInfo/pages/detail/index?id=' + id,
				});
			},
			tofind() {
				uni.switchTab({
					url: "/pages/find/index"
				})
			},
			toAdmin() {
				uni.navigateTo({
					url: "/pages/index/admin"
				})
			},
			getGeoCoder() {
				var that = this;
				const tMap = new QQMapWX({
					key: 'RA6BZ-4YLLR-HMZW4-WFR5N-6H6XQ-R6FVL'
				});
				var a = that.listAddr;
				var list = [];
				for (var b of a) {
					list.push({
						latitude: parseFloat(b.latitude),
						longitude: parseFloat(b.longitude)
					})

				}
				var lat = that.latitude;
				var lon = that.longitude;
				tMap.calculateDistance({
					from: {
						latitude: lat,
						longitude: lon
					},
					to: list,
					success: function(t) {
						t = t.result;
						for (var e = 0; e < t.elements.length; e++) {
							that.listAddr[e].distance = t.elements[e].distance / 1000;
							var n = that.listAddr[e];
							if (n.distance < that.currentProject.distance) {
								that.currentProject = n;
								getApp().globalData.selectedProject = that.currentProject;
							}
						}

					},
					fail: function(t) {
						console.error(t);
					},
					complete: function(t) {
						console.log(t);
					}
				});


			},

			toShowNone: function() {
				uni.navigateToMiniProgram({
					appId: 'wx5d24dbf08480c2c0',
					fail: function() {
						util.alert('打开小程序失败，请稍后重试');
					}
				});
			},

			loadhospital() {
				var that = this;
				util.request({
					api: 'customer/get-projects',
					utilSuccess: function(t) {
						var o = getApp().globalData.selectedProject;
						that.currentProject = t[0]
						that.listAddr = t;
						that.getGeoCoder();
					},
					utilFail: function(t) {
						util.alert(t);
					}
				});
			},

			toSelectHospital: function(t) {
				var e = t.currentTarget.dataset.item;
				getApp().globalData.selectedProject = e;
				this.showHospital = false;
				this.currentProject = e;
			},

			loadVideos: function() {
				var that = this;
				util.request({
					api: 'customer/get-training-videos',
					utilSuccess: function(e) {
						for (var m of e.data) {
							m.poster = util.HOST + m.poster;
						}
						that.news = e.data
						that.loading = false
					},
					utilFail: function(t) {
						util.alert(t);
					}
				});
			},

			loadOrderCount: function() {
				var that = this;
				util.request({
					api: 'customer/get-orders-count',
					utilSuccess: function(e) {
						that.orderTotalCount = e.orders_count
					},
					utilFail: function(t) {
						util.alert(t);
					}
				});
			}

		}
	}
</script>

<style scoped>
	.container {
		background-color: rgb(231, 245, 244) !important;
		padding-bottom: 200rpx;
	}

	view {

		box-sizing: border-box;
	}

	.homeBg {
		position: relative;
		z-index: 2;
		background: #fff;
		border-radius: 0rpx 80rpx;
		box-shadow: 2rpx 0rpx 15rpx 0rpx #1E70B7;
		padding-bottom: 40rpx;
	}

	.rightB {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		right: 0;
		z-index: 999;
		bottom: -80rpx;
	}

	.homeBgSwiper {

		width: 750rpx;
		height: 700rpx;
	}

	.homeBgSwiperImg {
		width: 750rpx;
		height: 700rpx;
	}

	.boxItem {
		position: relative;
		z-index: 1;
		width: 750rpx;
		margin-top: -76rpx;
		background: linear-gradient(135deg, #ECD182 10%, #0EE2BA 80%);
		border-radius: 0rpx 0rpx 80rpx 0rpx;
	}

	.btnadmin {
		border: #FFFFFF 2rpx solid;
		color: #fff;
		margin: 20rpx 51rpx;
		text-align: center;
		font-size: 36rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.boxItembox {
		padding: 0rpx 51rpx;
		display: flex;
		padding-top: 161rpx;
		justify-content: space-between;
	}

	.boxItemboxItem {
		width: 312rpx;
		height: 156rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 31rpx 28rpx;
	}

	.boxItemboxItem text {
		color: #fff;
		font-size: 28rpx;
		font-weight: 300;
	}

	.boxItemboxItem .htitle {
		font-size: 32rpx;
		font-weight: 600;
	}

	.boxItemboxItem image {

		width: 77rpx;
		height: 77rpx;
	}

	.boxItemtext {
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
		font-style: normal;
		padding: 20rpx;
	}

	.boxItemtext text {
		font-family: PingFangTC, PingFangTC;
		font-weight: 600;
		font-size: 32rpx;
		color: #F7723F;
		line-height: 0rpx;
		text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
		/* 描边效果 */
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.boxItemboxItem_on {
		background: #fff;
	}

	.selectHospital {
		width: 383rpx;
		height: 61rpx;
		background: rgba(0, 0, 0, 0.65);
		border-radius: 31rpx 31rpx 31rpx 31rpx;
		position: absolute;
		top: 55px;
		left: 30rpx;
		z-index: 99;
		display: flex;
		align-items: center;
		line-height: 61rpx;
		padding: 0px 20rpx;
	}

	.selectHospitalText {
		width: 300rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: left;
		margin: 0rpx 20rpx;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //用省略号显示
		white-space: nowrap; //不换行（文字不允许换行，单行文本）
	}

	.popbox {
		padding: 0rpx 20rpx;
	}

	.popHeader {
		padding: 30rpx 0rpx;
		font-weight: 300;
		font-size: 32rpx;
		color: #303233;
	}

	.popcontent {
		padding: 40rpx 20rpx;
	}

	.hitem {
		width: 100%;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(103, 101, 101, 0.2);
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 36rpx 20rpx;
		margin-bottom: 40rpx;
	}

	.hitemtitle {

		display: flex;
		justify-content: space-between;
	}

	.hitemfoot {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

	}

	.hitemfoot image {
		margin-right: 10rpx;
	}

	.news {
		padding: 33rpx 37rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 50rpx auto;
	}

	.newsItem {
		display: flex;
		margin-top: 35rpx;
	}

	.newsTitle {
		margin-left: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 4rpx;
		font-weight: 300;
		font-size: 26rpx;
		color: #303233;
		line-height: 38rpx;
		width: 100%;
	}
</style>