<template>
	<view>
		<view class="search-box">
			<view class="search-box-input">
				<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
					prefixIconStyle="font-size: 24px;color: #909399;" border="true">
					<template slot="suffix">
						<view style="display: flex;align-items: center;">
							<u-icon name="map-fill" color="#329866" size="22"></u-icon>
							<text class="position">{{position}}</text>
						</view>
					</template>
				</u-input>
			</view>
		</view>
		<u-swiper :list="headerBgList" height="300rpx" />
	</view>
</template>

<script>
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
	export default {
		name: "inputAndSwiper",
		props: {
			headerBgList: {
				type: Array,
				default () {
					return [
						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
						"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
					]
				}
			},
			position: {
				type: String,
				default () {
					return '定位'
				}
			}
		},
		data() {
			return {

			};
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		created() {
			// this.getLocation()
		},
		methods: {
			getLocation(){
				uni.getLocation({
					type: 'wgs84',
					// geocode: true, // 返回城市信息
					// enableHighAccuracy: false, // 开启高精度模式
					success: function(res) {
						let qqmapsdk = new QQMapWX({
							key: 'ZRKBZ-Q7FWL-GVZPK-MCRBU-4XFB5-ATBDB'
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (re) => {
								console.log(re.result.ad_info.city, '成都市==');
								console.log(re.result.ad_info.district, '武侯区==');
							},
							fail: (re) => {
								console.log(re, '失败信息');
							}
						})
					}
				});
			},
			//提示用户开启定位服务
			open() {
				// uni.authorize({
				// 	scope: 'scope.userLocation',
				// 	success: function() {
				// 		console.log('授权成功');
				// 	},
				// 	fail: function() {
				// 		console.log('授权失败');
				// 	}
				// })
				// wx.getSetting({
				// 	success: (res) => {
				// 		if (res.authSetting['scope.userLocation'] === false) {
				// 			wx.showModal({
				// 				title: '提示',
				// 				content: '请打开定位服务后重新进入该页面',
				// 				confirmText: '去设置',
				// 				success: (res) => {
				// 					if (res.confirm) {
				// 						wx.openSetting()
				// 					}
				// 				}
				// 			})
				// 		}
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		position: absolute;
		z-index: 1;
		left: 50%;
		width: 84.6%;
		transform: translateX(-50%);

		.search-box-input {
			border-radius: 12rpx;
			margin-top: 20rpx;
			background-color: #fff;
			opacity: 0.85;

			.u-border {
				border: none;

				.u-input__content {
					height: 62rpx;
					border-radius: 12rpx;
					background-color: #fff;

					.u-input__content__field-wrapper__field {
						font-size: 26rpx !important;
					}
				}
			}
		}
	}

	.position {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #232323;
		line-height: 33rpx;
	}

	.u-swiper {
		border-radius: 0 !important;

		.u-swiper__wrapper__item__wrapper__image {
			border-radius: 0 !important;
		}
	}
</style>