<template>
	<view class="content">
		<view class="head">
			<view class="head-title">
				<view style="display: flex;font-size: 28rpx;" @click="toMap" v-if="userCity != null">
					{{userCity}}
					<u-icon name="arrow-down" color="#101010" size="12" style="display: inline;"></u-icon>
				</view>

				<view class="head-type" style="position:absolute;right:0px;" v-if="$store.state.token">
					<rudon-rowMenuDotDotDot style="color: #000;" :localdata="dropList" @change="dropAction($event)">
						<text class="mall-filter-text">{{ dropName }}</text>
						<u-icon name="arrow-down" color="#101010" size="12"></u-icon>
					</rudon-rowMenuDotDotDot>
				</view>
			</view>
		</view>
		<view class="head">
			<view class="head-title">
				<view class="title-left">
					<view class="icon"></view>
					<view class="name">设备场所</view>
				</view>
			</view>
		</view>
		<view class="list">
			<template v-if="locationList.length > 0">
				<view class="one-device" @click="deviceClick(item.id)" v-for="item,index in locationList" :key="index">
					<view class="left">
						<image class="left-img" :src="item.locaitonPic"></image>
						<view class="distance">{{item.distance/1000}}km</view>
					</view>
					<view class="right">
						<view class="right-title">{{item.locationName}}</view>
						<view class="right-num">设备数量：{{item.equipmentNums}}</view>
						<view class="right-address">
							{{item.locationState + item.locationCity+item.locationDistrict + item.locationAddress }}
						</view>
					</view>
					<view class="tuijian" v-if="index<3">
						<image src="@/static/images/tuijian.png" mode=""></image>
					</view>
				</view>
			</template>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
				v-if="locationList.length <= 0 && !showModal"></u-empty>
			<view class="device-button" @click="toLogin" v-if="showLogin">
				去登录
			</view>
		</view>

		<view class="enter-map" @click="toMapMode">
			<text>设备</text>
			<text>地图</text>
		</view>
		<!-- <u-modal :show="showModal" :title="title" :content='content' @confirm="toMap"></u-modal> -->
		<u-modal :show="localShow" @confirm="localModalConfirm" @cancel="localModalCancel" confirmText="前往"
			:showCancelButton="true">
			<view class="slot-content">您已拒绝位置授权，请在小程序我的-隐私权限中自行打开授权</view>
		</u-modal>
		<view :class="['tip',pageOne ? 'one' : 'second']" v-if="!showLogin && showModal">
			<view class="one-tip" v-if="pageOne">
				<view class="tip-img">
					<image src="../../../static/images/bg.png"></image>
				</view>
				<view class="tip-content">
					<view class="one-row">亲爱的用户！你好：</view>
					<!-- <view class="row second-row">我知道你面临着一些困难，而我想让你知道，你并不孤单。虽然你身处孤独症的世界中，但是仍然有爱和支持等待着你，你的家人和朋友会在你身边，给你力量和支持。</view> -->
					<view class="row third-row">
						我们针对孤独症的医疗器械设备将于2025年上市，届时将遍布国内三甲医院及地方康复性医院，如果您将来希望通过设备地图查询治疗设备布设信息，则请填写您所希望接受治疗的地址和位置信息，如不需要获取设备地图服务，则可忽略此地址页面。
						<!-- 我想让你知道的是，自闭症并不是你生命的定义。它可能会让你面临一些挑战，但是也不能阻止你成为一个独特而有价值的人。你有自己的领域和兴趣，你有你的个性和特点，这些都是值得尊重的。自闭症不会改变你的真实内在，它只是让你看世界的方式和方式与众不同而已。 -->
					</view>
					<view class="four-row" @click="chooseAddress">
						<view class="title">地址:</view>
						<u--input v-model="user1.address" placeholder="请选择地址" border="none"
							placeholderStyle="color:#c7c7c7" fontSize="24rpx" readonly suffixIcon="arrow-right"
							suffixIconStyle="color: #c7c7c7" inputAlign="right"></u--input>
					</view>
					<!-- <view class="row four-row">
						作为一名医生，我的建议是为你提供最好的支持和帮助。首先，请尝试找到一个社交小组或社交活动，并与其他孤独症患者交流和学习。这些社交小组通常会有同样的挑战，他们会理解你的感受并支持你。同时，也可以尝试寻找专业治疗，例如行为疗法、言语疗法或认知行为疗法等，这些都可帮助你管理各种挑战和情感难题，以建立积极的情绪状态。
					</view>
					<view class="row five-row">
						此外，请记得寻求家人和朋友的支持。他们可能不理解你所面临的挑战，但是他们肯定会考虑你的感受，并为你提供帮助和支持。不要怀疑自己的价值。你和所有其他人一样，都是有价值、重要和有意义的。
					</view> -->
					<!-- <view class="row sex-row">最后，我希望你能够记住，你并不孤单。有很多人都想帮助和支持你。如果你需要更多的支持和建议，请随时和我联系。我们会站在你身边，给你最好的建议和帮助。</view> -->
					<!-- <view class="seven-row">祝你健康和快乐！</view> -->
				</view>
				<view class="btn-area">
					<view class="tip-button" @click="ignore">
						忽略
					</view>
					<view class="tip-button" style="margin-left: 40rpx;" @click="sure">
						确定
					</view>
				</view>
			</view>


			<view class="second-tip" v-if="!pageOne">
				<view class="second-img">
					<image src="../../../static/images/bg.png"></image>
				</view>
				<view>
					<view class="second-content">
						<view class="row second-row">现在需要提供给我们，您最希望得到帮助的地点</view>
						<view class="row third-row">
							我们将根据您提供的信息，为您和您身边的人，布置完善的治疗体系，以及社区帮助。</view>

					</view>

					<view class="tip-button-second" @click="toMap">
						确定
					</view>
				</view>
			</view>

		</view>

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModal: false,
				pageOne: true,
				localShow: false, //定位未授权提示弹框
				user: {},
				user1: {},
				userCity: null,
				userCity1: null,
				title: '提示',
				content: '现在需要提供给我们，您最希望得到帮助的地点,我们将根据您提供的信息，为您和您身边的人，布置完善的治疗体系，以及社区帮助',
				dropName: "距离优先",
				dropList: [{
						value: '距离优先',
						text: '距离优先'
					},
					{
						value: '数量优先',
						text: '数量优先'
					}
				],
				locationList: [],
				location: {},
				pageNum: 1,
				pageSize: 10,
				loading: '',
				latitude: null,
				longitude: null,
				showLogin: false,
			}
		},
		onShow() {
			// this.pageOne = true;
			// console.log('142',this.$store.getters.token)
			if (this.$store.getters.token) {
				this.showLogin = false
				this.getUserInfo();
			} else {
				this.showLogin = true;
			}
		},
		onReachBottom() {
			if (this.loading == 'moreByLl') {
				this.pageNum++;
				this.locationListByLl();
			}
			if (this.loading == 'moreByNums') {
				this.pageNum++;
				this.locationListByNums();
			}
		},
		methods: {
			ignore() {
				this.showModal = false;
			},
			sure() {
				if(this.user1.longitude&&this.user1.latitude){
					this.showModal = false;
					this.updateUserLocation();
					uni.navigateTo({
						url: '/devicePackage/pages/deviceAdmin'
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'地址不能为空'
					})
				}
			},
			toLogin() {
				uni.navigateTo({
					url: '/loginPackage/pages/Login'
				})
			},
			nextPage() {
				this.pageOne = false;
			},
			async getUserInfo() {
				const res = await this.$myRequest({
					url: '/getInfo'
				})
				this.user = res.data.user;
				this.userCity = this.user.city;
				console.log('89', this.user)
				// if ((this.user.longitude == null && this.user.latitude == null) || (this.user.longitude == '' && this.user.latitude == '')) {
				// 	// this.showModal = true;
				// } else {
				// 	this.showModal = false;
				// 	this.getLocationList(this.dropName)
				// }
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						
						this.location = res
						this.locationList = [];
						this.dropName == '距离优先' ? this.locationListByLl() : this
							.locationListByNums()
					},
					fail: (data) => {
						console.log('104', data)
						this.localShow = true;
					}
				});
			},
			toMap() {
				console.log('84')
				this.showModal = false;
				let that = this;
				let params = {};
				if (that.latitude && that.longitude) {
					params = {
						latitude: that.latitude,
						longitude: that.longitude
					}
				}
				console.log('245', params)
				uni.chooseLocation({
					...params,
					success(data) {
						console.log('98', data)
						that.user.address = data.address + data.name;
						that.user.latitude = data.latitude;
						that.user.longitude = data.longitude;
						that.user.state = data.address.split('省')[0] + '省';
						console.log('121', that.state, data.address.split('省')[1])

						// that.$nextTick(function(){
						that.user.city = data.address.split('省')[1].split('市')[0] + '市';
						that.userCity = that.user.city;
						console.log('122', that.city, data.address.split('省')[1].split('市')[1])
						// })
						that.updateUserLocation();
						that.getLocationList(this.dropName)
					},
					fail(data) {
						console.log('104', data)
						that.localShow = true;
					}
				})
			},
			chooseAddress() {
				uni.chooseLocation({
					latitude: this.location.latitude,
					longitude: this.location.longitude,
					success: (data) => {
						console.log('98', data)
						this.user1.address = data.address + data.name;
						this.user1.latitude = data.latitude;
						this.user1.longitude = data.longitude;
						this.user1.state = data.address.split('省')[0] + '省';
						console.log('121', this.state, data.address.split('省')[1])

						// this.$nextTick(function(){
						this.user1.city = data.address.split('省')[1].split('市')[0] + '市';
						this.userCity1 = this.user1.city;
						// console.log('122', this.city, data.address.split('省')[1].split('市')[1])
						// })
						// this.updateUserLocation();
						// this.getLocationList(this.dropName)
					},
					fail: (data) => {
						console.log('104', data)
						this.localShow = true;
					}
				})
			},
			//定位未授权提示弹框前往
			localModalConfirm() {
				this.localShow = false;
				uni.switchTab({
					url: '/pages/tabbar/mine/Mine'
				})
			},
			//定位未授权提示弹框关闭
			localModalCancel() {
				this.localShow = false;
			},
			toMapMode() {
				if (this.$store.getters.token) {
					//出弹框
					if (this.user.longitude && this.user.latitude) {
						uni.navigateTo({
							url: '/devicePackage/pages/deviceAdmin'
						})
					} else {
						this.showModal = true;
						this.pageOne = true;
					}
				} else {
					// uni.showToast({
					// 	icon:'none',
					// 	title:'请登录后查看'
					// })
					uni.navigateTo({
						url: '/loginPackage/pages/Login'
					})
				}
			},
			async updateUserLocation() {
				const res = await this.$myRequest({
					method: 'PUT',
					url: '/system/user/profile/updateUserLocation',
					data: {
						longitude: this.user1.longitude,
						latitude: this.user1.latitude,
						state: this.user1.state, //省
						city: this.user1.city, // 市
						district: '', //县
						address: this.user1.address
					}
				})
				console.log('97', res)
			},
			async getLocationList(dropName) {
				this.locationList = [];
				dropName == '距离优先' ? this.locationListByLl() : this
					.locationListByNums()
				// uni.authorize({
				// 	scope: 'scope.userLocation',
				// 	success: () => {
				// 		uni.getLocation({
				// 			type: 'wgs84',
				// 			success: (res) => {
				// 				console.log('当前位置的经度：' + res.longitude);
				// 				console.log('当前位置的纬度：' + res.latitude);
				// 				this.location = res
				// 				this.locationList = [];
				// 				dropName == '距离优先' ? this.locationListByLl() : this
				// 					.locationListByNums()


				// 			}
				// 		});
				// 	}
				// })
			},
			// 查询医疗设备场所列表(距离由近至远)
			async locationListByLl() {
				const res = await this.$myRequest({
					url: '/system/location/locationListByLl/?longitude=' + this.user.longitude +
						'&latitude=' + this.user.latitude,
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
				})

				// this.locationList = res.data.rows
				// console.log(this.locationList);
				if (res.data.rows.length >= this.pageSize) {
					this.loading = 'moreByLl';
				} else {
					this.loading = 'noMore';
				}
				this.locationList = this.locationList.concat(res.data.rows);
				this.locationList.forEach((item, index) => {
					item.locaitonPic = this.baseUrl + item.locaitonPic
				})

			},
			// 查询医疗设备场所列表(数量有多至少)
			async locationListByNums() {
				const res = await this.$myRequest({
					url: '/system/location/locationListByNums/?longitude=' + this.user.longitude +
						'&latitude=' + this.user.latitude,
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
				})
				// this.locationList = res.data.rows
				if (res.data.rows.length >= this.pageSize) {
					this.loading = 'moreByNums';
				} else {
					this.loading = 'noMore';
				}
				this.locationList = this.locationList.concat(res.data.rows);

			},
			dropAction(e) {
				if (e === "") {
					return
				}
				this.dropName = e ? e : '距离优先';
				this.getLocationList(e)
				this.pageNum = 1
				this.loading = ''
			},
			deviceClick(id) {
				uni.navigateTo({
					url: "/devicePackage/pages/DeviceList?equipmentLocationId=" + id
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.content {
		height: 100%;
		width: 100%;
		padding: 20rpx;

		.head-title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.mall-filter-text {
				margin-right: 10rpx;
			}

			.title-left {
				display: flex;

				.icon {
					width: 6px;
					height: 38rpx;
					line-height: 22px;
					border-radius: 50px;
					background-color: rgba(40, 124, 206, 1);
					text-align: center;
					margin: 8rpx 10rpx 0rpx 0rpx;
				}

				.name {
					color: rgba(16, 16, 16, 1);
					font-size: 40rpx;
					text-align: left;
					font-weight: 600;
				}
			}

			.head-type {
				color: rgba(16, 16, 16, 1);
				font-size: 14px;
				display: flex;
				align-items: center;
			}
		}

		.list {
			.one-device {
				padding: 20rpx;
				margin-bottom: 24rpx;
				line-height: 40rpx;
				border-radius: 10rpx;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				box-shadow: 0px 2px 8px 1px rgba(228, 228, 228, 100);
				display: flex;
				justify-content: space-between;
				position: relative;

				.left {
					position: relative;
					width: 268rpx;
					height: 182rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;

					.left-img {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}

					.distance {
						position: absolute;
						bottom: 0rpx;
						width: 258rpx;
						height: 24px;
						line-height: 20px;
						border-radius: 0rpx 0rpx 10rpx 10rpx;
						background-color: rgba(16, 16, 16, 0.51);
						color: rgba(16, 16, 16, 1);
						font-size: 14px;
						text-align: center;
						color: #fff;
					}
				}

				.right {
					width: 61%;

					// margin-left:20rpx;
					.right-title {
						color: rgba(16, 16, 16, 1);
						font-size: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: left;
						font-weight: bold;
					}

					.right-num {
						color: rgba(16, 16, 16, 1);
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: left;
						margin-top: 10rpx;
						margin-bottom: 10rpx;
					}

					.right-address {
						color: rgba(113, 113, 113, 1);
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: left;

					}
				}

				.tuijian {
					position: absolute;
					top: 0;
					right: 0;
					width: 96rpx;
					height: 96rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.enter-map {
			position: fixed;
			right: 10rpx;
			bottom: 100rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #287CCE;
			box-shadow: 0rpx 4rpx 20rpx 4rpx rgba(0, 0, 0, .4);
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}

		.tip {
			width: 90%;
			// height: 620rpx;
			height: 700rpx;
			position: fixed;
			top: 200rpx;
			left: 5%;
			background-color: #fff;
			// padding-bottom: 20px;

			&.one {
				border-radius: 20px;
				box-shadow: 0px 2px 0px #E1E2FF, inset 0px -4px 2px #D1D3FF;
			}

			.one-tip {
				// position: relative;
				width: 100%;
				height: 100%;

				.tip-img {
					width: 100%;
					// height: 250px;
					height: 300px;

					// background: #FFFFFF;
					// mix-blend-mode: normal;
					// box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
					image {
						width: 100%;
					}
				}
			}
		}



		.second-img {
			width: 100%;
			margin-top: 32%;
			background: #FFFFFF;
			mix-blend-mode: normal;
			box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);

			image {
				width: 100%;
			}
		}

		.tip-content {
			width: 100%;
			color: #333;
			font-size: 14px;
			position: absolute;
			top: 27%;
			background: #fff;
			padding: 0px 10px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.one-row {
				width: 89%;

			}

			.row {
				width: 89%;

				text-indent: 2em;
			}

			.four-row {
				width: 89%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					margin-right: 30rpx;
				}

				input {
					// width: 70%;
				}

				.right-img {
					width: 30rpx;
					height: 30rpx;
					float: right;
				}
			}
		}

		.second-content {
			color: #333;
			font-size: 12px;
			position: absolute;
			top: 42%;
			background: #fff;
			width: 89%;
			left: 5%;
			padding: 0px 10px;
			height: 300rpx;
			box-shadow: 0px 2px 0px #E1E2FF, inset 0px -4px 2px #D1D3FF;
			border-radius: 20px;

			.row {
				text-indent: 2em;
			}
		}

		.btn-area {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
		}

		.tip-button {
			font-size: 28rpx;
			background: linear-gradient(278.96deg, #558FFF 3.23%, #0047FD 98.88%);
			mix-blend-mode: normal;
			box-shadow: inset 0px 4px 10px rgba(255, 255, 255, 0.3);
			border-radius: 22px;
			text-align: center;
			color: #FFFFFF;
			width: 28%;
			padding: 5px 0px;
			margin: 0 auto;
			margin-top: 10rpx;
		}

		.tip-button-second {
			font-size: 28rpx;
			background: linear-gradient(278.96deg, #558FFF 3.23%, #0047FD 98.88%);
			mix-blend-mode: normal;
			box-shadow: inset 0px 4px 10px rgba(255, 255, 255, 0.3);
			border-radius: 22px;
			text-align: center;

			color: #FFFFFF;
			width: 22%;
			padding: 6px 0px;
			position: absolute;
			top: 58%;
			left: 37%;
		}

		.device-button {
			font-size: 28rpx;
			background: linear-gradient(278.96deg, #558FFF 3.23%, #0047FD 98.88%);
			mix-blend-mode: normal;
			box-shadow: inset 0px 4px 10px rgba(255, 255, 255, 0.3);
			border-radius: 22px;
			text-align: center;
			color: #FFFFFF;
			width: 40%;
			padding: 10px;
			margin: 40px auto;
		}
	}
</style>