<template>
	<view class="siteInspection-wrap">
		<!-- 搜索框 -->
		<view class="search-con">
			<u-search placeholder="查找全部门店" v-model="queryValue" @custom="queryHandle" @search="queryHandle" bg-color="#fff" :action-style="{background: '#2979ff',color: '#fff', borderRadius: '6upx',padding: '6upx 0', fontSize: '26upx'}"></u-search>
		</view>
		<!-- 定位 -->
		<view class="location-con" ref="location">
			<text class="location-tit">当前位置：</text>
			<view class="location-main" @click="getLocation">
				<text class="location-addr">{{location}}</text>
				<u-icon name="map" color="#2979ff" size="34" class="location-icon"></u-icon>
			</view>
		</view>
		<!-- 附近的门店 -->
		<view class="store-con">
			<text class="store-tit">附近的门店：</text>
			<scroll-view class="scroll-con" scroll-y :style="{'height': 'calc(100vh - ' + Height + 'px)'}">
				<!-- 列表数据 -->
				<view class="list-con">
					<view class="list-item" v-for="(item,index) in listdata" :key="index" @click="chooseStore(item)">
						<view class="item-main">
							<u-icon class="company-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
							<text>{{item.name}}</text>
						</view>
						<u-icon class="listData-item-r-icon" name="icon-xian-11" custom-prefix="xd-icon" size="24" color="#2b85e4"></u-icon>
					</view>
				</view>
				<u-empty style="height: auto;padding-top: 10vh;" class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { clzConfirm, getGpsLocation, checkOpenGPSServiceByAndroid } from '@/libs/tools.js'
	import { findStoreList } from '@/api/store.js'
	import { queryCurrentTaskUsing, tencentAddressInfo } from '@/api/task.js'
	export default{
		data(){
			return{
				queryValue: '',  //  查询门店
				location: '',  //  位置
				noDataText: '未查找到附近门店',  //  列表请求状态提示语
				status: 'loadmore',  //  加载中状态
				listdata: [],  //  列表数据
				Height: 200,  //  滚动区域  元素dom高度
				lat: '',  //  纬度
				lng: '',  //  经度
			}
		},
		onReady() {
			this.getLocation()
		},
		methods: {
			// 获取当前位置
			getLocation(){
				const _this = this
				checkOpenGPSServiceByAndroid()
				// 获取系统信息同步接口
				const res = uni.getSystemInfoSync()
				getGpsLocation(function(gps){
					console.log(gps)
					//  安卓手机需要转格式，ios不需要
					if(res.platform == 'android'){  //  安卓
						_this.getAddressInfo({ lng: gps[0], lat: gps[1] })
						// 按照经纬度查询
						_this.searchHandle({ point: { lng: gps[0], lat: gps[1] } })
					}else if(res.platform == 'ios'){  //  ios
						const province = gps.address.province ? gps.address.province : ''  //  	省份名称
						const city = gps.address.city ? gps.address.city : ''  //  城市名称
						const district = gps.address.district ? gps.address.district : ''  //  区（县）名称
						const poiName = gps.address.poiName ? gps.address.poiName : ''  //  POI信息
						const street = gps.address.street ? gps.address.street : ''  //  街道信息
						const streetNum = gps.address.streetNum ? gps.address.streetNum : ''  //  获取街道门牌号信息
						_this.location = province + city + district + poiName + '（' + street + streetNum + '）'
						// 按照经纬度查询
						_this.searchHandle({ point: { lng: gps.longitude, lat: gps.latitude } })
					}
					
				})
			},
			// 根据经纬度获取具体位置
			getAddressInfo(params){
				tencentAddressInfo(params).then(res => {
					console.log(res)
					if(res.status == 200){
						this.location = res.data.province + res.data.city + res.data.district + res.data.address
					}
				})
			},
			// 按名称查询
			queryHandle(){
				this.searchHandle({
					name: this.queryValue
				})
			},
			//查询门店列表
			searchHandle(params){
				this.status = "loading"
				findStoreList(params).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.listdata = res.data || []
						this.noDataText = this.listdata.length == 0 && this.queryValue != '' ? '没有搜索到相关结果' : '未查找到附近门店'
					} else {
						this.listdata = []
						this.noDataText = res.message
					}
					this.status = "loadmore"
				})
			},
			// 选择门店
			chooseStore(item){
				//  校验是否有历史巡店记录
				//  type  VIDEO_INSPECTION:视频巡店、SPOT_INSPECTION：现场巡店、POINT_INSPECTION：点检任务
				queryCurrentTaskUsing({ storeId: item.id, type: 'SPOT_INSPECTION' }).then(res => {
					if(res.status == 200){
						if(res.data){  //  为true有历史巡店记录
							clzConfirm({
							    title: '提示',
							    content: '有进行中的巡店任务，是否继续？',
								confirmText: '继续巡店',
								cancelText: '重新开始',
								buttons: ['继续巡店','重新开始'],
							    success: function (result) {
							        if (result.confirm || result.index==0) {  //  继续巡店
										uni.navigateTo({
											url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=0&types=scene'
										})
							        }else if(result.cancel || result.index==1){  //  重新开始
										uni.navigateTo({
											url:"/pages/signIn/signIn?item=" + encodeURIComponent(JSON.stringify({id:item.id,name:item.name,taskId:res.data,restart:1}))
										})
							        }
							    }
							})
						}else{
							uni.navigateTo({
								url:"/pages/signIn/signIn?item=" + encodeURIComponent(JSON.stringify({id:item.id,name:item.name}))
							})
						}
					}else{
						uni.showToast({icon: 'none', title: res.message})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.siteInspection-wrap{
		.search-con{
			padding: 30upx 30upx;
		}
		// 定位
		.location-con{
			padding: 0 30upx;
			.location-main{
				margin-top: 14upx;
				padding: 20upx;
				border-radius: 12upx;
				background-color: #fff;
				.location-icon{
					padding-left: 10upx;
					vertical-align: bottom;
				}
			}
		}
		// 附近的门店
		.store-con{
			.store-tit{
				display: block;
				padding: 30upx 30upx 20upx;
			}
			//  列表  44 62  
			.scroll-con{
				height: calc(100vh - 215px);
				width: 100%;
				overflow: auto;
				.list-con{
					padding: 0 30upx;
					.list-item{
						background-color: #fff;
						padding: 20upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #F8F8F8;
						&:active{
							opacity: 0.5;
						}
						.item-main{
							font-size: 15px;
							color: rgb(48, 49, 51);
							display: flex;
							align-items: center;
							.company-icon{
								margin-right: 6upx;
							}
						}
					}
				}
			}
		}
	}
</style>
