<template>
	<view class="app">
		<!-- <view class="inputs">
			<i class="icon"></i>
			<input v-model="searchName" type="text" name="" id="" class="input" placeholder="请输入">
		</view> -->
		<u-navbar :is-back="false" :background="background" class="u-navbar">
			<image src="@/static/fanhui.png" mode="" @tap="goprevious"></image>
			<view class="title" @tap="goprevious">
				护理服务
			</view>
			<view class="inputitem">
				<i class="icon"></i>
				<input v-model="searchName" type="text" name="" id="" class="input" placeholder="搜索"
					placeholder-class="placeholder">
			</view>
		</u-navbar>
		<view class="Classificationlist">
			<view v-for="(item,index) in nurseItemClassifyInfoList" :key="index" @tap='tapitemclass(item)'
				:class="item.id == itemClassId?'itemclass':'item'">
				<image :src="item.classifyPictureUrl" mode=""></image>
				<view class="title">
					{{item.classifyName}}
				</view>
			</view>
			<view class="item" v-if='nurseItemClassifyInfoList.length==7&&lengthlistshow' @tap='lengthlist'>
				<image src="@/static/pagesB/gd.png" mode=""></image>
				<view class="title">
					更多
				</view>
			</view>
		</view>
		<u-swiper :list="lbinfo" height='200' interval='3000' duration='1500' mode='none' @click='goswiper'></u-swiper>
		<view class="conNew">
			<view class="title">
				周边医养机构
			</view>
			<u-tabs :list="nurseAgencyClassifyInfoList" :current="conNewcurrent" @change="change"
				active-color="#26A888"></u-tabs>
			<view class="" v-if="nursestationlist.length>0">
				<view class="addressContent" v-for="(item,index) in nursestationlist" :key="index">
					<view class="lists" @tap='godetails(item)'>
						<view class="nurse">{{item.nurseStationName}}</view>
						<view class="distance" v-if="item.distance">
							距离您{{item.distance}}KM</view>
						<image class="background" :src="item.stationPictureUrl" mode=""></image>
						<view class="tags">
							<view class="tag" v-for="uitem in item.classifyInfoList">
								{{uitem.classifyName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="noorder" v-else>
				<u-empty mode="list" icon-size='220' text='暂无护理机构'></u-empty>
			</view>
		</view>
		<view class="masks" style="" v-if="mask">
			<view class="mask">
				<view class="picture">
					<image src="@/static/pagesB/locatinsmall.png"></image>
				</view>
				<view class="text">
					请打开系统定位
				</view>
				<view class="btns">
					<view class="bt" @tap='cancel()'>取消</view>
					<view class="btn" @tap='getlocation()'>确定</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>
<script>
	import {
		nearbyList,
		getPatientInfo,
		getNurseClassifyList
	} from '@/api/pagesB/site/site.js';
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#26A888',
				},
				nurseAgencyClassifyInfoList: [], //护理站分类
				conNewcurrent: 0,
				nurseItemClassifyInfoList: [], //护理项目分类
				nurseItemClassifyInfolength: 0,
				nurseItemClassifyInfolistlength: [],
				lengthlistshow: true,
				lbinfo: [], //轮播list
				nursestationlist: [],
				mask: false,
				pageNum: 1,
				pageSize: 10,
				total: 0,
				latitude: "",
				longitude: "",
				nurseClassId: '', //护理站分类id
				itemClassId: '', //护理项目分类id
				searchName: '', //通用名称
				scrollTop: 0,
			}
		},
		methods: {
			goprevious() {
				uni.navigateBack({
					delta: 1
				})
			},
			//点击swiper
			goswiper(index) {
				if (this.lbinfo[index].jumpLink == '/pages/medicalservice/medicalservice' || this.lbinfo[index].jumpLink ==
					'/pages/myinformation/myinformation') {
					uni.switchTab({
						url: this.lbinfo[index].jumpLink
					})
				} else {
					uni.navigateTo({
						url: this.lbinfo[index].jumpLink
					})
				}
			},
			lengthlist() {
				uni.navigateTo({
					url: "/pagesB/Moreoptions/Moreoptions"
				})
				// uni.showLoading({
				// 	title: '',
				// 	duration: 500
				// });
				// setTimeout((e) => {
				// 	this.lengthlistshow = !this.lengthlistshow
				// 	if (item) {
				// 		this.nurseItemClassifyInfoList = this.nurseItemClassifyInfolistlength
				// 	} else {
				// 		this.nurseItemClassifyInfoList = this.nurseItemClassifyInfolistlength.slice(0, 7)
				// 	}
				// 	uni.hideLoading();
				// }, 500)
			},
			//点击护理项目分类
			tapitemclass(item) {
				if (this.itemClassId == item.id) {
					this.itemClassId = ''
				} else {
					this.itemClassId = item.id
				}
				this.requestinfo()
			},
			//护理站和护理项目分类
			getNurseClassifyinfo() {
				getNurseClassifyList().then(res => {
					this.nurseAgencyClassifyInfoList.push({
						name: '全部',
						id: '',
					})
					res.data.nurseAgencyClassifyInfoList.forEach(e => {
						e.name = e.classifyName
						this.nurseAgencyClassifyInfoList.push(e)
					})
					res.data.nurseItemClassifyInfoList.forEach(e => {
						e.classifyPictureUrl = baseurl + e.classifyPictureUrl
					})
					res.data.poserInfoList.forEach(e => {
						e.image = baseurl + e.posterPictureUrl
					})
					this.nurseItemClassifyInfolength = res.data.nurseItemClassifyInfoList.length
					this.nurseItemClassifyInfolistlength = res.data.nurseItemClassifyInfoList
					this.lbinfo = res.data.poserInfoList
					this.nurseItemClassifyInfoList = res.data.nurseItemClassifyInfoList.slice(0, 7)
				})
			},
			change(index) {
				this.conNewcurrent = index;
				this.nurseClassId = this.nurseAgencyClassifyInfoList[index].id
				this.requestinfo()
			},
			getlocation(value) {
				var that = this
				uni.openSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									that.latitude = res.latitude
									that.longitude = res.longitude
									that.mask = false
								}
							});
						}
					}
				});
			},
			requestinfo() {
				this.pageNum = 1;
				nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseClassId, this.itemClassId,
						this.searchName)
					.then(res => {
						uni.removeStorageSync('Refresh');
						res.rows.forEach(e => {
							e.stationPictureUrl = baseurl + e.stationPictureUrl
							if (e.classifyInfoList && e.classifyInfoList.length >= 1) {
								e.classifyInfoList = e.classifyInfoList.slice(0, 2)
							}
						})
						this.nursestationlist = res.rows
						this.mask = false
						this.total = res.total
					})
			},
			godetails(item) {
				uni.navigateTo({
					url: `/pagesB/nursestation/nursestation?nurseStationId=${item.nurseStationId}`
				})
			},
			cancel() {
				this.mask = false
				uni.switchTab({
					url: '/pagesB/homepage/homepage',
				})
			},
		},
		onReachBottom() { //上滑加载
			if (this.nursestationlist.length >= this.total) {} else {
				this.pageNum++;
				nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseClassId, this.itemClassId,
						this.searchName)
					.then(res => {
						res.rows.forEach(e => {
							e.stationPictureUrl = baseurl + e.stationPictureUrl
							if (e.classifyInfoList && e.classifyInfoList.length >= 1) {
								e.classifyInfoList = e.classifyInfoList.slice(0, 2)
							}
							this.nursestationlist.push(e)
						})
					})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1;
			// this.requestinfo()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		watch: {
			searchName() {
				this.itemClassId = ''
				this.nurseClassId = ''
				this.conNewcurrent = 0
				this.requestinfo()
			},
		},
		onShow() {
			var that = this
			uni.$on('moreoptionitem', function(data) {
				if (data.item) {
					that.tapitemclass(JSON.parse(data.item))
				}
				uni.$off('moreoptionitem')
			})
		},
		onHide() {
			this.nurseClassId = ''
			this.itemClassId = ''
			this.conNewcurrent = 0
			this.requestinfo();
		},
		onLoad() {
			var that = this
			this.getNurseClassifyinfo();
			const value = uni.getStorageSync('patientId');
			if (value) {
				getPatientInfo(value).then(res => {
					if (res.code == 200) {
						if (res.data.homeLatitude && res.data.homeLongitude) {
							that.latitude = res.data.homeLatitude
							that.longitude = res.data.homeLongitude
							that.requestinfo();
						} else {
							uni.getLocation({
								type: 'wgs84',
								success: function(resp) {
									that.latitude = resp.latitude
									that.longitude = resp.longitude
									that.requestinfo();
								},
								fail(err) {
									that.mask = true;
								}
							});
						}
					} else if (res.code == 9999) {} else {
						that.requestinfo();
					}
				})
			} else {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.requestinfo();
					},
					fail(err) {
						that.mask = true;
					}
				});
			}
		},
		//1.分享给朋友
		onShareAppMessage(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '新医路健康服务平台',
				path: url,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '新医路健康服务平台',
				path: url,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	}
</script>
<style lang="scss">
	@import './site.scss'
</style>