<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 reflexTitle ref="slFilter" @result="filterRes" :menuList="menuList"></sl-filter>
		</view> 
		<view class="map_box" ref='map_box'>
		  <map id="navi_map" ref="navi_map" :scale="scale"   :markers="covers"  > 
		  </map>
		</view>
		
<!-- 	<view class="site_info" v-if="showSiteDetail">
		  <view class="inner_container"  >
			  <view class=" siteName">{{oliSiteInfo.siteName}}</view>
			   <view class=" detail flex ">
			  			  <view class=" address_info">{{oliSiteInfo.address}}</view>
			  			  <view class=" distances">
			  				  <view class="margin-top-sm margin-right-lg text-red-deep">
			  					<text class='cuIcon-location'></text>
			  					<text > {{oliSiteInfo.distance}}KM</text>
			  				  </view>
			  			  </view>
			   </view>
			  <view class=" actions">
				  <view @tap="navigation">导航</view>
				  <view @tap="gotoDetail">详情</view>
			   </view>
		  </view>
		  <view class="close" @tap="showSiteDetail=false">×</view>
		</view> -->
	</view>
</template>
<script>
	import amapFile from '../../../utils/amap-wx.130.js'
	import StationItem from '@/components/site-item/site-item.vue'
	import oilMongoApi from '../../../api/oil-mongo.js'
	import oilSiteApi from '../../../api/oil-site.js'
	import slFilter from '@/components/sl-filter/sl-filter.vue'
	export default {
		data() {
			return {
				allSiteInfo:{
					oilProductCode:'', //油品编号 默认为空
					siteChannel:'', //油站渠道 默认为空
					highSpeedMark:null ,//是否为高速 默认为null
					oilCardNature:2
				},
				oliSiteInfo:{},//存储所选 油站信息
				controls: [{ //在地图上显示控件，控件不随着地图移动
				  id: 1, //控件id
				  position: { //控件在地图的位置
				    left: 0,
				    top: 15,
				    width: 50,
				    height: 50
				  },
				}],
				menuList:  [ 
					{
						title: '油品',
						key: 'oilProductCode',
						isMutiple: false,
						detailList: [{
							title: "默认",
							value: "0#"
						}]
					},
					{
						title: '是否高速',
						key: 'highSpeedMark',
						isSort: true,
						isMutiple: false,
						detailList:  [
							{
							title: "全部",
							value: null
							},
							{
							title: "是",
							value: '1'
							},
							{
							title: "否",
							value: '0'
							},
						]
					},
					{
						title: '渠道',
						key: 'channelCode',
						isSort: true,
						isMutiple: false,
					  detailList: [{
						title: "全部",
						value: ""
					  }]  
					}
				],
				searchInfo:{ 
					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:new amapFile.AMapWX({key: '88f3d3a38da95c4dea388978a76d0b81'}),
				scale:4, //地图层级
				distance: '',
				cost: '',
				northeast: '',
				southwest: '',
				points: [],
				siteInfo: '',
				showSiteDetail: false,
				newOilVariety: [],
				newchannel:[],
				ChangeoilProductCode:'',
			}
		},
		components:{
			// StationItem,
			slFilter
		},
		onLoad() {
			 var _that = this; 
				oilSiteApi.getConditionMenu().then(res=>{
					if(res.code == 20000){
						console.log('++--++--++--',res)
						let oilVariety = res.data.productCodes,
							channel = res.data.channelCodes 
						_that.newOilVariety = res.data.productCodes
						_that.newchannel = res.data.channelCodes
						_that.getFilterData(oilVariety,channel)
					}
				}) 
				let isCheck = uni.getStorageSync('Authorization')
				console.log(isCheck)
				if(isCheck){
					console.log('当前已登录')
					this.getSite() 
				}else{
					console.log('当前未登录')
					this.getAllSite()
				} 
			
		  },
		  methods:{
			  getSite(){
				  let _that = this
				    oilMongoApi.getSite(_that.allSiteInfo).then( res=>{
				  	  if(res.code == 20000){
				  	  console.log(res)
				  	   _that.covers = res.data.map(item=>{
				  	  	let iconPath;
				  	  if(item.siteChannel === 'LV'){
				  			iconPath ='../../static/img/LV.png';
				  		}else if(item.siteChannel == 'TY'){
				  				iconPath ='../../static/img/ty_money.png';
				  		}else if(item.siteChannel == 'WJY'){
				  				iconPath ='../../static/img/wjy_money.png';
				  		}else if(item.siteChannel == 'XOIL'){
				  				iconPath ='../../static/img/xy.png';
				  		}else if(item.siteChannel == 'YDJY'){
				  				iconPath ='../../static/img/YDJY.png';
				  		} else{
				  			iconPath ='../../static/img/common.png'; 
				  		}
				  		let money 
				  		if(item.siteOilsPrice.length>0){
				  			money = item.siteOilsPrice[0].personalPrice
				  		}
				  		
				  		console.log(money)
				  	  	// item.distance= item.distance.toFixed(1);  
				  	  	let result = {
				  	  			id: Number(item.id.substr(0,8)),
				  	  			siteId: item.id,
				  	  			latitude: item.location.coordinates[1],
				  	  			longitude: item.location.coordinates[0],
				  	  			iconPath: iconPath,
				  				width: 70,
				  	  		  	height: 26,
				  				joinCluster:true,
				  	  			label: { //为标记点旁边增加标签
				  	  				content: money+'', //文本
				  	  				color: '#FFF', //文本颜色
				  					textAlign:'right',
				  					padding:7,
				  	  				anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
				  	  				anchorY: -25 //label的坐标，原点是 marker 对应的经纬度 
				  	  			}
				  	  	}
				  	  	return result
				  	  })
				  	   console.log(_that.covers)
				  	
				  	   }
				    } )
			  },
			  getAllSite(){
				let _that = this
				  oilMongoApi.getAllSite(_that.allSiteInfo).then( res=>{
					  if(res.code == 20000){
					  console.log(res)
					   _that.covers = res.data.map(item=>{
					  	let iconPath;
					  if(item.siteChannel === 'LV'){
							iconPath ='../../static/img/LV.png';
						}else if(item.siteChannel == 'TY'){
								iconPath ='../../static/img/ty_money.png';
						}else if(item.siteChannel == 'WJY'){
								iconPath ='../../static/img/wjy_money.png';
						}else if(item.siteChannel == 'XOIL'){
								iconPath ='../../static/img/xy.png';
						}else if(item.siteChannel == 'YDJY'){
								iconPath ='../../static/img/YDJY.png';
						} else{
							iconPath ='../../static/img/common.png'; 
						}
						let money 
						if(item.siteOilsPrice.length>0){
							money = item.siteOilsPrice[0].personalPrice
						}
						
						console.log(money)
					  	// item.distance= item.distance.toFixed(1);  
					  	let result = {
					  			id: Number(item.id.substr(0,8)),
					  			siteId: item.id,
					  			latitude: item.location.coordinates[1],
					  			longitude: item.location.coordinates[0],
					  			iconPath: iconPath,
								width: 70,
					  		  	height: 26,
								joinCluster:true,
					  			label: { //为标记点旁边增加标签
					  				content: money+'', //文本
					  				color: '#FFF', //文本颜色
									textAlign:'right',
									padding:7,
					  				anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
					  				anchorY: -25 //label的坐标，原点是 marker 对应的经纬度 
					  			}
					  	}
					  	return result
					  })
					   console.log(_that.covers)
					
					   }
				  } )
			
			  },
			  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`
				  })
			  },
			getFilterData(v,c) { //v:油站油品 c:油站渠道
			let _that = this
				oilSiteApi.getCheckInfo().then(res => {
					if (res.code == 20000) {
						console.log('切换分类',res)
						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)
						_that.menuList[2].detailList =channelCodes
						_that.menuList[0].detailList = productCodes 
						console.log('这里是旧获取菜单信息的地方',_that.menuList)
						console.log('这里是新获取menus内容 渠道',c,'这里是新获取menus内容 渠道',v)
						uni.setStorageSync('filterData', _that.menuList)
						// this.$refs.slFilter.resetMenuList(this.menuList)
					}
				})
			},
			  markerTap(res){
				  console.log('这类似点击marker点',res)
				  console.log('这类似点击marker点匹配',this.coverDatas)
				  let site = this.coverDatas.filter(item=>Number(item.id.substr(0,8)) == res.detail.markerId );
				  console.log('*++++++++++++++++++++++++++++++*',site)
				  this.siteInfo = site[0]
				  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'
							  })
						  }
					  })
				  }
			  },
			  //接口筛选 
			  filterRes(res){
				let obj = {
					oilProductCode:res.oilProductCode, //油品编号 默认为空
					siteChannel:res.channelCode, //油站渠道 默认为空
					highSpeedMark:res.highSpeedMark //是否为高速 默认为null
				}
				let _that = this 
				_that.allSiteInfo.oilProductCode = res.oilProductCode
				_that.allSiteInfo.siteChannel = res.channelCode
				_that.allSiteInfo.highSpeedMark = res.highSpeedMark
				_that.filterCondition = res   
				_that.getAllSite()
				_that.covers = []  
			  // _that.$refs.navi_map.removeMarkers()
			  // _that.$refs.navi_map.addMarkers(_that.covers)
			  },
			  moveMap(res){
				  console.log(res)
			}
		}
	}
</script>

<style scoped>
.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: 120px!important;
  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: 200rpx;
	height: 50rpx;
	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;
}
.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;
}

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


</style> 


