<template>
	<view>
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">路径规划地图</block>
		</cu-custom>
		<view class="filter-container">
			<sl-filter color="#ffffff" menucolor="#FF6700" :titleColor=" '#bbbbbb' " reflexTitle ref="slFilter"
				@result="newFilterRes" :menuList="menuList"></sl-filter>
		</view>

		<view class="map_box" ref='map_box'>
			<map :scale='scale' @callouttap='markerTap'  id="navi_map" ref="navi_map" :longitude="origin.longitude" :latitude="origin.latitude" 
				 @markertap="markerTap" :markers="covers" :polyline="polyline">
			<!-- 	<cover-view slot="callout">
					<template v-for="(item,index) in covers">
						<cover-view :marker-id="item.id" :key='index'>
							<cover-view class="position-relative" style="width: 92rpx; height: 1rpx; ">
								<cover-view @tap="markerTap({detail:{markerId:item.id}})"  style="left: 102rpx; height: 66rpx; bottom: 20rpx; min-width: 52px;padding: 5rpx 20rpx; background-color:#FF6700 ;  border: solid 5rpx #FFFFFF; color: white; position: absolute;"
									class="border bordermap bg-white rounded-circle flex align-center justify-center position-absolute">
									<cover-view>{{item.enterprisePrice||'暂无信息'}}</cover-view>
								</cover-view>
							</cover-view>
						</cover-view>
					</template>
				</cover-view> -->
			</map>
		</view>
		<view :style="{height:siteDetailStyle?'900rpx':''}" class="site_info" v-if="showSiteDetail">
			<view class="inner_container">
				<view style="flex: 1; display: flex;flex-direction: column;">
					<view style="justify-content: space-between;" class="siteName">
						{{oliSiteInfo.siteName}}
						<uni-icons @click="siteDetailStyle=!siteDetailStyle " type="more-filled" size="30"></uni-icons>
					</view>
					<view style="align-items: center;" class=" detail flex ">
						<view class=" address_info">{{oliSiteInfo.address}}</view>
						<view class=" distances">
							<view class="  text-red-deep">
								<text class='cuIcon-location'></text>
								<text> {{oliSiteInfo.distance}}KM</text>
							</view>
						</view>
					</view>
					<view v-if="siteDetailStyle&&oliSiteInfo.oilSiteChannelDetailsVos" style="flex: 1;">
						<priceTab :ts="false" :channel-list="oliSiteInfo.oilSiteChannelDetailsVos" />
					</view>
					<view style="flex: 1;align-items: center;justify-content: center;display: flex;"
						v-if="siteDetailStyle&&!oliSiteInfo.oilSiteChannelDetailsVos">暂无油价</view>
				</view>
				<view class="actions">
					<view class="actions_butten" @tap="navigation">导航</view>
					<view class="actions_butten" @tap="gotoDetail">详情</view>
				</view>
			</view>
			<view class="close" @tap="closeFn">×</view>
		</view>
	</view>
</template>
<script>
	import amapFile from '../../../utils/amap-wx.130.js'
	import StationItem from '@/components/site-item/site-item.vue'
	import oilSiteApi from '../../../api/oil-site.js'
	import slFilter from '@/components/sl-filter/sl-filter.vue'
	import priceTab from '../components/price-tab.vue'
	export default {
		components: {
			priceTab
		},
		data() {
			return {
				workurl:'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/XOIL',
				site: {
					markerId:null
				},
				xxindex:null,
				scale:16,
				mapCtx: null,
				siteDetailStyle: true,
				oliSiteInfo: {}, //存储所选 油站信息
				controls: [{ //在地图上显示控件，控件不随着地图移动
					id: 1, //控件id
					position: { //控件在地图的位置
						left: 0,
						top: 15,
						width: 50,
						height: 50
					},
				}],
				menuList: [{
						title: '距离',
						isMutiple: false,
						key: 'distance',
						detailList: [{
								title: "默认",
								value: 20
							},
							{
								title: "20Km",
								value: 20
							},
							{
								title: "30Km",
								value: 30
							},
							{
								title: "50Km",
								value: 50
							}
						]
					},
					{
						title: '油品',
						key: 'oilProductCode',
						isMutiple: false,
						detailList: uni.getStorageSync('filterData') ? uni.getStorageSync('filterData')[1].detailList :
							[{
								title: "默认",
								value: "0#"
							}]
					},
					{
						title: '是否高速',
						key: 'highSpeedMark',
						isSort: true,
						isMutiple: false,
						detailList: [{
								title: "全部",
								value: ""
							},
							{
								title: "是",
								value: '1'
							},
							{
								title: "否",
								value: '0'
							},
						]
					},
					{
						title: '渠道',
						key: 'channelCode',
						isSort: true,
						isMutiple: false,
						detailList: uni.getStorageSync('filterData') ? uni.getStorageSync('filterData')[3]
							?.detailList : [{
								title: "全部",
								value: ""
							}]
					}
				],
				searchInfo: {
					juLi: 20, //分别返回20公里,30公里以及50公里范围内油站数据 默认为20 Number
					oilProductCode: "0#", //油品,查询条件0#、-10#、-20#、-35#  为空默认查询0# String
					siteChannel: "", //XOIL:星油WJY：万金油LV：老吕（找油网）TY：团油YDJY：一点加油（壳牌）为空默认查询全部 String
					geoList: []
				},
				changesJuli: 0,
				covers: [],
				origin: {
					lon: '',
					lat: '',
					// tips: [],
					address: ''
				},
				destination: {
					lon: '',
					lat: '',
					// tips: [],
					address: ''
				},
				latitude: '',
				longitude: '',
				filterCondition: '',
				polyline: [{
					borderColor: "#00B373",
					color: "#00B373",
					points: []
				}],
				myAmapFun:null,
				scale: 12, //地图层级
				distance: '',
				cost: '',
				northeast: '',
				southwest: '',
				points: [],
				siteInfo: '',
				showSiteDetail: false,
				newOilVariety: [],
				newchannel: [],
				ChangeoilProductCode: '',
				changeOnload: {}
			}
		},
		components: {
			StationItem,
			slFilter
		},
		watch: {
			siteDetailStyle: function(n, o) {
				let that = this
				if (n) {
					// this.mapCtx.includePoints({
					// 	// UP RIGHT BOTTOM LEFT
					// 	padding: [100, 100, 300, 100],
					// 	points: [{
					// 		latitude: that.origin.latitude,
					// 		longitude: that.origin.longitude
					// 	}, {
					// 		latitude: that.destination.latitude,
					// 		longitude: that.destination.longitude
					// 	}]
					// })
					// this.scale = 10
				} else {
					this.mapCtx.includePoints({
						// UP RIGHT BOTTOM LEFT
						padding: [100, 100, 100, 100],
						points: [{
							latitude: that.origin.latitude,
							longitude: that.origin.longitude
						}, {
							latitude: that.destination.latitude,
							longitude: that.destination.longitude
						}]
					})
				}
				console.log(n, o, '-------------------------------------')
			}
		},
		onLoad(option) {
			/*
			 * @property {Object}	this.mapCtx:地图组件实例
			 * @property {Object}	option:上个页面传进来的参数
			 * @property {Function}	this.getFilterData:获取菜单函数
			 * @property {String}	this.origin:起点经纬度
			 * @property {String}	this.destination:终点经纬度
			 * @property {Function}	this.myAmapFun:高德SDK实例
			 * @property {Object}	that.covers:mark点数组
			 */
			this.mapCtx = uni.createMapContext("navi_map", this)
			this.init(option)
			console.log('%c look ↓','font-size:50px;color:red')
			console.log(option)
			// this.canvasFn()
		},

		methods: {
			canvasFn(){
				    var canvas  = uni.createOffscreenCanvas({type: '2d', width: 300, height: 150});
					 const context = canvas.getContext('2d')
					 let src = '../../static/img/change_xy.png'
					 context.drawImage(src, 0, 0, 50, 50)
					 context.setFontSize(13)
					 context.font = "nomarl bold 13px Arial,sans-serif" // 加粗等功能
					 context.fillStyle('#ffffff')
					 context.fillText("hello, world !", 16, 16)
					 context.draw()
				    console.log(context,'-------------------context--------------------------------')
			},
			init(option){
				console.log(option,'---------init--------------------')
				this.changeOnload = option
				if (!uni.getStorageSync('filterData')) {
					console.log('---------filterData--------------------')
					oilSiteApi.getConditionMenu().then(res => {
						if (res.code == 20000) {
							let oilVariety = res.data.productCodes,
								channel = res.data.channelCodes
							this.newOilVariety = res.data.productCodes
							this.newchannel = res.data.channelCodes
							this.getFilterData(oilVariety, channel)
						}
					})
				}
				var that = this;
				this.origin = JSON.parse(option.origin)
				this.destination = JSON.parse(option.destination)
				console.log('------------------getDrivingRoute---------------------')
				// this.myAmapFun = null
				this.myAmapFun =  new amapFile.AMapWX ({
					key: '88f3d3a38da95c4dea388978a76d0b81'
				})
				this.myAmapFun.getDrivingRoute({
					origin: this.origin.longitude + "," + this.origin.latitude,
					destination: this.destination.longitude + "," + this.destination.latitude,
					success: function(data) {
						console.log(data,'------------------success---------------------')
						var points = {
							juLi: 20, //分别返回20公里,30公里以及50公里范围内油站数据 默认为20 Number
							oilProductCode: "", //油品,查询条件0#、-10#、-20#、-35#  为空默认查询全部 String
							siteChannel: "", //XOIL:星油WJY：万金油LV：老吕（找油网）TY：团油YDJY：一点加油（壳牌）为空默认查询全部 String
							geoList: []
						};
						var lines = []
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.geoList.push({
										lon: parseFloat(poLen[j].split(',')[0]),
										lat: parseFloat(poLen[j].split(',')[1])
									})
									lines.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						that.points = points
						that.polyline = [{
							points: lines,
							color: "#00B373",
							width: 6,
							borderColor: "#00B373",
						}]
						
						if (option.isChange == 1) {
							that.changeGetInfo()
							return
						}
						console.log(that.polyline)
						if (data.paths[0] && data.paths[0].distance) {
							that.distance = data.paths[0].distance + '米'
						}
						if (data.taxi_cost) {
							that.cost = '打车约' + parseInt(data.taxi_cost) + '元'
						}
						that.tempPoints = points;
						that.tempPoints.geoList = that.tempPoints.geoList.filter((item, index) => {
							return index % 20 == 0
						});
						// this.tempPoints.push( this.northeast )
						// this.tempPoints.push( this.southwest )
						let newPiont = []
						console.log(that.tempPoints,'/*/*/*/*/*/********************/*/*/*/*/***')
						oilSiteApi.getSiteByGeoHash(that.tempPoints).then(ele => {
							that.coverDatas = ele.data;
							// console.log("当前结果数据")
							// console.log(that.coverDatas)
							that.tempPoints = points
							// 包装成maker 
							let nmbs = 0
							ele.data.forEach((item, index) => {
								console.log('123' ,item)
								let iconPath;
								if (item.siteChannel === 'LV') {
									iconPath = '../../static/img/LV.png';
								} else if (item.siteChannel == 'TY') {
									iconPath = '../../static/img/TY.png';
								} else if (item.siteChannel == 'WJY') {
									iconPath = '../../static/img/change_wjy.png';
								} else if (item.siteChannel == 'XOIL') {
									iconPath = '../../static/img/change_xy.png';
								} else if (item.siteChannel == 'YDJY') {
									iconPath = '../../static/img/YDJY.png';
								} else {
									iconPath = '../../static/img/change_qt.png';
								}
								// item.distance= item.distance.toFixed(1);
								let result = {
									id: index,
									siteId: item.id,
									latitude: item.latitude,
									longitude: item.longitude,
									enterprisePrice:item.enterprisePrice,
									iconPath: item.siteChannel == 'XOIL'||item.siteChannel == 'TY'? 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/'+ item.siteChannel +  Number(item.enterprisePrice).toFixed(2) +'.png' : iconPath,
									width: 120,
									height: 84,
									// callout: { //自定义标记点上方的气泡窗口 点击有效
									// 	content: String(item.enterprisePrice) , //文本
									// 	padding:5,
									// 	color: '#ffffff', //文字颜色
									// 	fontSize: 14, //文本大小
									// 	borderRadius: 10, //边框圆角
									// 	bgColor: '#FF9800', //背景颜色
									// 	display: 'BYCLICK', //常显
									// 	top:33,
									// 	right:52
									// },
									// 自定义窗口
									// customCallout: {
									// 	anchorX: -1,
									// 	anchorY: 46,
									// 	display: "ALWAYS"
									// },
									label: { //为标记点旁边增加标签
										content: '', //文本
										color: '#FFFFFF', //文本颜色
										anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
										anchorY: -25 //label的坐标，原点是 marker 对应的经纬度 
									}
								}
								that.coverDatas[index] = Object.assign(that.coverDatas[index],result)
								newPiont.push(result)
							})
							that.covers = newPiont
							// console.log('this.covers',that.covers)
							if (that.filterCondition != null && that.filterCondition != '') {
								console.log(that.filterCondition)
								// this.filterCondition.distance = 3
								that.filterRes(that.filterCondition)
							}
						})
						that.mapCtx.includePoints({
							// UP RIGHT BOTTOM LEFT
							padding: [100, 100, 100, 100],
							points: [{
								latitude: that.origin.latitude,
								longitude: that.origin.longitude
							}, {
								latitude: that.destination.latitude,
								longitude: that.destination.longitude
							}]
						})
					},
					fail: function(info) {
						console.log(info,'---------失败--------------------')
					}
				})
				console.log('---------init结束--------------------')
			},
			closeFn() {
				console.log(this.oliSiteInfo, this.site)
				this.showSiteDetail = false
				this.covers.forEach(item => {
					if (this.site.markerId == item.id) {

						if (this.site.siteChannel === 'LV') {

							item.iconPath = '../../static/img/LV.png';

						} else if (this.site.siteChannel == 'TY') {

							item.iconPath = '../../static/img/TY.png';

						} else if (this.site.siteChannel == 'WJY') {

							item.iconPath = '../../static/img/change_wjy.png';

						} else if (this.site.siteChannel == 'XOIL') {

							item.iconPath = '../../static/img/change_xy.png';

						} else if (this.site.siteChannel == 'YDJY') {

							item.iconPath = '../../static/img/YDJY.png';

						} else {

							item.iconPath = '../../static/img/change_qt.png';

						}

					}

				})
			},
			changeGetInfo() {
				let that = this
				this.searchInfo = uni.getStorageSync('searchInfo')
				let inifo = this.searchInfo,
					listGeo = that.points.geoList
				console.log(listGeo)
				var points = {
					juLi: inifo.juLi, //分别返回20公里,30公里以及50公里范围内油站数据 默认为20 Number
					oilProductCode: inifo.oilProductCode, //油品,查询条件0#、-10#、-20#、-35#  为空默认查询全部 String
					siteChannel: inifo.siteChannel, //XOIL:星油WJY：万金油LV：老吕（找油网）TY：团油YDJY：一点加油（壳牌）为空默认查询全部 String
					geoList: that.points.geoList
				};
				console.log(points)
				let newPiont = []
				oilSiteApi.getSiteByGeoHash(points).then(ele => {
					console.log('这里是change')
					that.coverDatas = ele.data;
					console.log("当前结果数据")
					console.log(that.coverDatas)
					that.tempPoints = points
					// 包装成maker
					let ishighSpeedMark = '' + uni.getStorageSync('ishighSpeedMark')
					let coverList = []
					console.log('ishighSpeedMark', ishighSpeedMark, typeof(ishighSpeedMark))
					if (ishighSpeedMark != '') {
						ishighSpeedMark = parseInt(ishighSpeedMark)
						if (ishighSpeedMark == 1 || ishighSpeedMark == 0) {
							console.log('进入')
							if (ishighSpeedMark == 1) {
								that.coverDatas = that.coverDatas.map(item => {
									if (item.highSpeedMark == 1) {
										coverList.push(item)
										console.log('123456', coverList)
									}
								})
							}
							if (ishighSpeedMark == 0) {
								that.coverDatas = that.coverDatas.map(item => {
									if (item.highSpeedMark == 0) {
										coverList.push(item)
										console.log('3456', coverList)
									}
								})
							}
						}
					}

					if (coverList.length > 0) {
						that.coverDatas = coverList
					}
					console.log('+-+-+-+-+-', that.coverDatas)
					console.log('+-+-+-+-+-', coverList)
					let pointsList = that.coverDatas.map((item, index) => {
						let iconPath;
						if (item.siteChannel === 'LV') {
							iconPath = '../../static/img/LV.png';
						} else if (item.siteChannel == 'TY') {
							iconPath = '../../static/img/TY.png';
						} else if (item.siteChannel == 'WJY') {
							iconPath = '../../static/img/change_wjy.png';
						} else if (item.siteChannel == 'XOIL') {
							iconPath = '../../static/img/change_xy.png';
						} else if (item.siteChannel == 'YDJY') {
							iconPath = '../../static/img/YDJY.png';
						} else {
							iconPath = '../../static/img/change_qt.png';
						}
						// item.distance= item.distance.toFixed(1); 
						let result = {
							id: index,
							siteId: item.siteCode,
							latitude: item.latitude,
							longitude: item.longitude,
							enterprisePrice:item.enterprisePrice,
							iconPath: item.siteChannel == 'XOIL'||item.siteChannel == 'TY'? 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/'+ item.siteChannel + Number(item.enterprisePrice).toFixed(2) +'.png' : iconPath,
							width: 120,
							height: 84,
							// callout: { //自定义标记点上方的气泡窗口 点击有效
							// 	content:item.enterprisePrice, //文本
							// 	padding:5,
							// 	color: '#ffffff', //文字颜色
							// 	fontSize: 14, //文本大小
							// 	borderRadius: 10, //边框圆角
							// 	bgColor: '#FF9800', //背景颜色
							// 	display: 'BYCLICK', //常显
							// 	top:33,
							// 	right:52
							// },
							// customCallout: {
							// 	anchorX: -1,
							// 	anchorY: 46,
							// 	display: "ALWAYS"
							// },
							label: { //为标记点旁边增加标签
								content: '', //文本
								color: '#FFFFFF', //文本颜色
								anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
								anchorY: -25 //label的坐标，原点是 marker 对应的经纬度 
							}
						}
						return result
					})
					that.covers = pointsList
					console.log('this.covers', that.covers)
					if (that.filterCondition != null && that.filterCondition != '') {
						console.log("过滤数据")
						console.log(that.filterCondition)
						// this.filterCondition.distance = 3
						that.filterRes(that.filterCondition)
					}
				})

			},
			// change距离重新渲染路径
			changeJuLi(es) {
				let that = this
				let inifo = that.searchInfo,
					listGeo = that.points.geoList
				if (es) {
					var points = {
						juLi: es, //分别返回20公里,30公里以及50公里范围内油站数据 默认为20 Number
						oilProductCode: inifo.oilProductCode, //油品,查询条件0#、-10#、-20#、-35#  为空默认查询全部 String
						siteChannel: inifo.siteChannel, //XOIL:星油WJY：万金油LV：老吕（找油网）TY：团油YDJY：一点加油（壳牌）为空默认查询全部 String
						geoList: listGeo
					};
				} else {
					var points = {
						juLi: inifo.juLi, //分别返回20公里,30公里以及50公里范围内油站数据 默认为20 Number
						oilProductCode: inifo.oilProductCode, //油品,查询条件0#、-10#、-20#、-35#  为空默认查询全部 String
						siteChannel: inifo.siteChannel, //XOIL:星油WJY：万金油LV：老吕（找油网）TY：团油YDJY：一点加油（壳牌）为空默认查询全部 String
						geoList: listGeo
					};
				}
				uni.setStorageSync('searchInfo', points)
				 this.init({
					 origin:  String(this.changeOnload.origin) ,
					 destination:String(this.changeOnload.destination),
					 isChange:1
				 })
				 // this.covers.length = 1
				// uni.redirectTo({
				// 	url: `/BagStation/pages/routePlainMap/routePlainMap?origin=${this.changeOnload.origin}&destination=${this.changeOnload.destination}&isChange=1`
				// })
			},
			navigation() {
				uni.openLocation({
					latitude: this.oliSiteInfo.latitude,
					longitude: this.oliSiteInfo.longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			gotoDetail() {
				let obj = {
					siteId: this.siteInfo.id,
					siteCode: this.siteInfo.siteCode,
					siteChannel: this.siteInfo.siteChannel,
					longitude: this.siteInfo.longitude,
					latitude: this.siteInfo.latitude,
				}
				let itemS = JSON.stringify(obj)
				uni.navigateTo({
					url: `../stationDetail/stationDetail?item=${itemS}&&types=map`
				})
			},
			goDetail: function() {
				wx.navigateTo({
					url: '../navigation_car_detail/navigation'
				})
			},
			goToCar: function(e) {
				wx.redirectTo({
					url: '../navigation_car/navigation'
				})
			},
			goToBus: function(e) {
				wx.redirectTo({
					url: '../navigation_bus/navigation'
				})
			},
			goToRide: function(e) {
				wx.redirectTo({
					url: '../navigation_ride/navigation'
				})
			},
			goToWalk: function(e) {
				wx.redirectTo({
					url: '../navigation_walk/navigation'
				})
			},
			getFilterData(v, c) { //v:油站油品 c:油站渠道
				// console.log('111111111111111111111111111111111111111111111111111111111111111')
				oilSiteApi.getCheckInfo().then(res => {
					if (res.code == 20000) {
						let channelCodes = []
						c.map(item => {
							channelCodes.push({
								title: item.name,
								value: item.id
							})
						})
						let productCodes = []
						v.map(item => {
							productCodes.push({
								title: item.name,
								value: item.id
							})
						})
						let siteBrands = []
						res.data.siteBrands.map(item => {
							siteBrands.push({
								title: item.name,
								value: item.id
							})
						})
						// console.log('++++++++++++++++++++++++++++++++++++++++++++++++',channelCodes, productCodes, siteBrands)
						this.menuList[3].detailList = this.menuList[3].detailList.concat(channelCodes)
						this.menuList[1].detailList = this.menuList[1].detailList.concat(productCodes)
						// this.menuList[2].detailList = this.menuList[2].detailList.concat(siteBrands)

						uni.setStorageSync('filterData', this.menuList)
						// this.$refs.slFilter.resetMenuList(this.menuList)
					}
				})
			},
			markerTap(res) {
				let that =this
				// that.scale = 16
				// let site = this.coverDatas.filter(item => item.id == res.detail.markerId);
				let site = this.coverDatas[res.detail.markerId];

				console.log(site, '-----  --------')
				this.mapCtx.moveToLocation({
					latitude:site.latitude,
					longitude:site.longitude,
					success() {
					}
				})
				// that.scale = null
				// that.scale = 10
				// if(this.xxindex){
				// 	if(this.xxindex.length==3){
				// 		this.xxindex.splice(0, 1)
				// 	}
				// 	this.xxindex.push({
				// 		index:res.detail.markerId,
				// 		siteChannel:site.siteChannel,
				// 		iconPath:this.covers[res.detail.markerId].iconPath 
				// 	})
				// }else{
				// 	this.xxindex = []
				// 	this.xxindex.push({
				// 		index:res.detail.markerId,
				// 		siteChannel:site.siteChannel,
				// 		iconPath:this.covers[res.detail.markerId].iconPath 
				// 	})
				// }
				// this.site = site
				// if(this.xxindex.length>1){
				// 	this.covers[this.xxindex[0].index].iconPath = this.xxindex[0].siteChannel == 'XOIL'||this.xxindex[0].siteChannel == 'TY'? 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/' + this.xxindex[0].siteChannel + Number(this.xxindex[0].enterprisePrice).toFixed(2) +'.png' : ''
				// }
				// this.covers[res.detail.markerId].iconPath = site.siteChannel == 'XOIL'||site.siteChannel == 'TY'? 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/'+ 'I' + site.siteChannel + Number(site.enterprisePrice).toFixed(2) +'.png' : this.covers[res.detail.markerId].iconPath
				
				this.covers.forEach(item => {
					if (res.detail.markerId == item.id) { 
						// this.site.markerId = item.id
						// item.iconPath = '../../static/img/LV.png'
						if (site.siteChannel == 'TY') {
							item.iconPath =  'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/'+ 'I' + 'TY' + Number(item.enterprisePrice).toFixed(2) +'.png';
							item.seleopen = true
						} else if (site.siteChannel == 'XOIL') {
							item.iconPath =  'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/'+ 'I' + 'XOIL' + Number(item.enterprisePrice).toFixed(2) +'.png';
							item.seleopen = true
						}
					} else {
						if (item.seleopen) {
							if (item.iconPath.indexOf('ITY') !== -1) {
								item.iconPath =  'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/' + 'TY' + Number(item.enterprisePrice).toFixed(2) +'.png';
								item.seleopen = false
							} else {
								item.iconPath =  'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/' + 'XOIL' + Number(item.enterprisePrice).toFixed(2) +'.png';
								item.seleopen = false
							}
						}
					}
				})


				console.log(site, '-*-*-*---*-*-')
				this.siteInfo = site
				if (this.siteInfo) {
					let userLocation = uni.getStorageSync('userLocation')
					let list = userLocation.split(','),
						longitude = list[0],
						latitude = list[1]
					let obj = {
						siteId: this.siteInfo.id,
						latitude: latitude,
						longitude: longitude,
					}
					console.log('点击获取obj', obj)
					oilSiteApi.getSiteDetails(obj).then(res => {
						if (res.code == 20000) {
							console.log(res)
							this.oliSiteInfo = res.data
							this.oliSiteInfo.distance = res.data.juli / 1000
							this.showSiteDetail = true
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}

			},
			updateMarke(e){

				let data = {
					juLi: e.distance?e.distance:20, //分别返回20公里,30公里以及50公里范围内油站数据 默认为20 Number
					oilProductCode: e.oilProductCode, //油品,查询条件0#、-10#、-20#、-35#  为空默认查询全部 String
					siteChannel: '', //XOIL:星油WJY：万金油LV：老吕（找油网）TY：团油YDJY：一点加油（壳牌）为空默认查询全部 String
					geoList: this.points.geoList
				}
				return new Promise((re,rj)=>{
					oilSiteApi.getSiteByGeoHash(data).then(res=>{
						let data = []
						res.data.forEach((item, index) => {
							console.log('123' ,item)
							let iconPath;
							if (item.siteChannel === 'LV') {
								iconPath = '../../static/img/LV.png';
							} else if (item.siteChannel == 'TY') {
								iconPath = '../../static/img/TY.png';
							} else if (item.siteChannel == 'WJY') {
								iconPath = '../../static/img/change_wjy.png';
							} else if (item.siteChannel == 'XOIL') {
								iconPath = '../../static/img/change_xy.png';
							} else if (item.siteChannel == 'YDJY') {
								iconPath = '../../static/img/YDJY.png';
							} else {
								iconPath = '../../static/img/change_qt.png';
							}
							let result = {
								id: index,
								siteId: item.id,
								latitude: item.latitude,
								longitude: item.longitude,
								enterprisePrice:item.enterprisePrice,
								iconPath: item.siteChannel == 'XOIL'||item.siteChannel == 'TY'? 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/'+ item.siteChannel +  Number(item.enterprisePrice).toFixed(2) +'.png' : iconPath,
								width: 120,
								height: 84,
								label: { //为标记点旁边增加标签
									content: '', //文本
									color: '#FFFFFF', //文本颜色
									anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
									anchorY: -25 //label的坐标，原点是 marker 对应的经纬度 
								}
							}
							data.push(Object.assign(res.data[index],result))
						})
						re(data)
					}).catch(err=>{
						rj(err)
					})
				})
			},
			//新接口筛选  参数 e:筛选条件 w:筛选的数组 
			 async newFilterRes(e){
				let FilterResArry =  JSON.parse(JSON.stringify(this.coverDatas))
				if(e.distance||e.oilProductCode){
					FilterResArry = await this.updateMarke(e)
				}
				if(e.channelCode){
					FilterResArry =  FilterResArry.filter((item,index) =>item.siteChannel == e.channelCode)
				}
				if(e.highSpeedMark){
					FilterResArry = FilterResArry.filter((item,index)=> item.highSpeedMark==Number(e.highSpeedMark))
				}
				this.$nextTick(function(){
					this.covers = FilterResArry
				})
			},
			
			filterRes(res) {
				console.log(res)
				console.log("----------------------------筛选前--------------------------------")
				console.log('list', res.highSpeedMark)
				if (res.distance) {
					if (res.distance != this.searchInfo.juLi) {
						// this.fistJli = 1
						this.searchInfo.juLi = res.distance
						console.log("----------------------------distance--------------------------------")
						console.log('change前', res.distance)
						this.changeJuLi(res.distance)
						return
					}
				}
				if (res.oilProductCode) {
					// if (res.oilProductCode != this.searchInfo.oilProductCode) {
					// 	// this.fistJli = 1
					// 	console.log("----------------------------oilProductCode--------------------------------")
					// 	this.searchInfo.oilProductCode = res.oilProductCode
					// 	console.log('change前', res.oilProductCode)
					// 	this.changeJuLi()
					// 	return
					// }
					
				}
				if (res.channelCode) {
					// clc注  
					//if (res.channelCode != this.searchInfo.siteChannel) {
					// 	// this.fistJli = 1
					// 	console.log("----------------------------channelCode--------------------------------")
					// 	this.searchInfo.siteChannel = res.channelCode
					// 	console.log('change前', res.channelCode)
					// 	this.changeJuLi()
					// 	return
					// }
					let carry =  this.coverDatas.filter((item,index) =>{
						
						if(item.siteChannel == res.channelCode){
							return item
						}
					} )
					this.$nextTick(function(){
						this.covers = carry
					})
					return
				}
				if (res.highSpeedMark) {
					console.log("----------------------------highSpeedMark--------------------------------")
					// let changIs = uni.getStorageSync('ishighSpeedMark')
					// if (!changIs) {
					// 	changIs = res.highSpeedMark
					// 	console.log(changIs)
					// 	uni.setStorageSync('ishighSpeedMark', parseInt(changIs))
					// 	this.changeJuLi()
					// 	return
					// }
					// if (res.highSpeedMark != changIs) {
					// 	// this.fistJli = 1
					// 	console.log('这里是油站是否高速')
					// 	let changIs = uni.getStorageSync('ishighSpeedMark')
					// 	changIs = res.highSpeedMark
					// 	console.log(changIs)
					// 	uni.setStorageSync('ishighSpeedMark', parseInt(changIs))
					// 	// if(item.highSpeedMark = res.highSpeedMark ){
					// 	this.changeJuLi()
					// 	return
					// }
					
					// let highSpeedMarkArr =  this.coverDatas.filter((item,index)=>{
					// 	if(item.highSpeedMark == 1){
					// 		return item
					// 	}
					// })
					this.$nextTick(function(){
						this.covers = this.newFilterRes(res,this.coverDatas)
					})
					return
				}
				// if(res.highSpeedMark != null && res.highSpeedMark != ''  ){
				// 		console.log('这里是油站是否高速') 
				// 		let changIs = uni.getStorageSync('ishighSpeedMark')
				// 		changIs = res.highSpeedMark
				// 		console.log(changIs)
				// 		uni.setStorageSync('ishighSpeedMark',changIs)
				// 		// if(item.highSpeedMark = res.highSpeedMark ){
				// 		this.changeJuLi()
				// 		return  
				// 		// } 
				// }
				// console.log(this.coverDatas)
				this.filterCondition = res
				let tmpCoverDatas = this.coverDatas.filter(item => {
					// if(res.highSpeedMark != null && res.highSpeedMark != ''  ){
					// 	console.log('这里是油站是否高速') 
					// 		// if(item.highSpeedMark = res.highSpeedMark ){
					// 			return item.highSpeedMark == res.highSpeedMark
					// 		// } 
					// }
					// if(res.channelCode != null && res.channelCode != '' && res.channelCode != item.siteChannel){
					// 	console.log('这里是油站渠道') 
					// 	return item.channelCode === res.channelCode 
					// } 
					// if(res.oilProductCode != null && res.oilProductCode != '' ){ 
					// 	console.log('这里是油站油品')
					// 	return item.oilProductCode == res.oilProductCode
					// 	// for(let ele of item){
					// 	// 	console.log('测试内容',ele)
					// 	// 	if(ele != res.oilProductCode) return false;
					// 	// }
					// }
					return item;
				}) 
				this.$nextTick(function(){
					this.covers = tmpCoverDatas
				})
				return

				// this.$refs.navi_map.clear()
				// console.log(this.covers)
				this.covers = []
				this.covers = tmpCoverDatas.map((item, index) => {
					let iconPath;
					if (item.siteChannel === 'LV') {
						iconPath = '../../static/img/LV.png';
					} else if (item.siteChannel == 'TY') {
						iconPath = '../../static/img/TY.png';
					} else if (item.siteChannel == 'WJY') {
						iconPath = '../../static/img/change_wjy.png';
					} else if (item.siteChannel == 'XOIL') {
						iconPath = '../../static/img/change_xy.png';
					} else if (item.siteChannel == 'YDJY') {
						iconPath = '../../static/img/YDJY.png';
					} else {
						iconPath = '../../static/img/change_qt.png';
					}
					let result = {
						id: index,
						siteChannel: item.siteChannel,
						seleopen: false,
						siteId: item.id,
						latitude: item.latitude,
						longitude: item.longitude,
						enterprisePrice:item.enterprisePrice,
						iconPath: item.siteChannel == 'XOIL'||item.siteChannel == 'TY'? 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/'+ item.siteChannel + Number(item.enterprisePrice).toFixed(2) +'.png' : iconPath,
						width: 120,
						height: 84,
						// callout: {    //自定义标记点上方的气泡窗口 点击有效
						// 	content: item.enterprisePrice, //文本
						// 	padding:5,
						// 	color: '#ffffff', //文字颜色
						// 	fontSize: 14, //文本大小
						// 	borderRadius: 10, //边框圆角
						// 	bgColor: '#FF9800', //背景颜色
						// 	display: 'BYCLICK', //常显
						// 	top:33,
						// 	right:52
						// },
						// customCallout: {
						// 	anchorX: -1,
						// 	anchorY: 46,
						// 	display: "ALWAYS"
						// },
						label: { //为标记点旁边增加标签
							content: '', //文本
							color: '#FFFFFF', //文本颜色
							anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
							anchorY: -25, //label的坐标，原点是 marker 对应的经纬度 
						}
					}
					return result
				})

				// highSpeedMark = []
				// this.$refs.navi_map.removeMarkers()
				// this.$refs.navi_map.addMarkers(this.covers)
			},
			moveMap(res) {

				if (res.type == "end") {
					this.northeast = res.detail.region.northeast
					this.southwest = res.detail.region.southwest

					this.tempPoints = JSON.parse(JSON.stringify(this.points));
					this.tempPoints = this.tempPoints.filter((item, index) => {
						return index % 35 == 0
					});
					// this.tempPoints.push( this.northeast )
					// this.tempPoints.push( this.southwest )

					oilSiteApi.getSiteByGeoHash(this.tempPoints).then(ele => {
						this.coverDatas = ele.data;

						this.tempPoints = JSON.parse(JSON.stringify(this.points))
						// 包装成maker
						this.covers = ele.data.map((item, index) => {
							let iconPath;
							if (item.siteChannel === 'LV') {
								iconPath = '../../static/img/LV.png';
							} else if (item.siteChannel == 'TY') {
								iconPath = '../../static/img/TY.png';
							} else if (item.siteChannel == 'WJY') {
								iconPath = '../../static/img/WJY.png';
							} else if (item.siteChannel == 'XOIL') {
								iconPath = '../../static/img/XOIL.png';
							} else if (item.siteChannel == 'YDJY') {
								iconPath = '../../static/img/YDJY.png';
							}
							// item.distance= item.distance.toFixed(1);

							let result = {
								id: index,
								siteId: item.id,
								latitude: item.latitude,
								longitude: item.longitude,
								enterprisePrice:item.enterprisePrice,
								iconPath: item.siteChannel == 'XOIL'||item.siteChannel == 'TY'? 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/'+ item.siteChannel + Number(item.enterprisePrice).toFixed(2) +'.png' : iconPath,
								enterprisePrice:item.enterprisePrice,
								width: 120,
								height: 84,
								label: { //为标记点旁边增加标签
									content: 'test', //文本
									color: '#FFFFFF', //文本颜色
									anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
									anchorY: -25 //label的坐标，原点是 marker 对应的经纬度 
								}
							}
							return result
						})
	
						if (this.filterCondition != null && this.filterCondition != '') {

							// this.filterCondition.distance = 3
							this.filterRes(this.filterCondition)
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.bordermap{
		/* border-bottom-left-radius: ; */
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}
	.actions_butten {
		background-color: #FF6700 !important;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.flex-style {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.flex-item {
		height: 35px;
		line-height: 35px;
		text-align: center;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1
	}

	.flex-item.active {
		color: #0091ff;
	}

	.map_box {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0px;
		right: 0px;
	}

	#navi_map {
		width: 100%;
		height: 100%;
	}

	.site_info {
		position: absolute;
		background-color: #FFFFFF;
		height: 350rpx;
		bottom: 0px;
		left: 0px;
		right: 0px;
		transition: all ease-in-out 700ms;
	}

	.site_info {
		padding: 10rpx 12rpx;
	}

	.text_box .text {
		margin: 25px;
	}

	.detail_button {
		position: absolute;
		bottom: 30px;
		right: 10px;
		padding: 3px 5px;
		color: #fff;
		background: #0091ff;
		width: 50px;
		text-align: center;
		border-radius: 5px;
	}

	.filter-container {
		position: absolute;
		/* top: 145rpx; */
		height: 72rpx;
		left: 0px;
		right: 0px;
		z-index: 1111;
	}

	.actions {
		display: flex;
		justify-content: space-around;
		/* margin-top: 20rpx; */
	}

	.actions view {
		width: 250rpx;
		height: 66rpx;
		background-color: #FF0000;
		text-align: center;
		color: #FFFFFF;
		/* padding: 7rpx 29rpx; */
		border-radius: 12rpx;
	}

	.siteName {
		font-weight: 600;
		font-size: 35rpx;
		line-height: 2;
		margin: 0 17rpx;
		display: flex;
		align-items: center;
	}

	.distances {
		/* position:absolute;
	right: 25rpx;
	top: 55rpx; */
		color: #FE0505;
	}

	.address_info {
		font-size: 25rpx;
		line-height: 2;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 70%;
		margin: 0 17rpx;

	}

	.inner_container {
		margin-top: 10px;
		position: relative;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.close {
		position: absolute;
		right: 29rpx;
		top: 20rpx;
		transform: scale(2);
	}
</style>
