<template>
	<view class="">
		<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="mapList_heat">
			<view class="mapList_heat_list" v-for="(list,i) in programmeList" :key='i' :class="[ProgrammeAtive==i?'ProgrammeAtive':'']" @tap='changeProgramme(i)'>
				<view class="mapList_heat_list_title text-center">{{list.title}}</view>
				<view class="mapList_heat_list_value text-center">{{list.value}}KM</view>
			</view> 
		</view>
		<view class="mapList_screen">
			<view class="mapList_screen_list" v-for="(list , i ) in screenList" :key='i' :class="[screenAtive==i?'ProgrammeAtive':'']" @tap='changeScreen(i)' >
				<view class="text-center">{{list.title}}</view> 
			</view>
		</view>
		<view class="mapList_List"> 
			<view class="mapList_List_item" v-for="(list,i) in SiteInfoList" :key='i' @tap='gotoDetail(list.siteId)'>
				<view class="mapList_List_item_left">
					<image :src="list.icon" mode=""></image>
				</view>
				<view class="mapList_List_item_right">
					<view class="mapList_List_item_right_title">
						{{list.siteTitle}} 
					</view>
					<view class="mapList_List_item_right_address">
						{{list.siteAddre}}
					</view>
					<view class="mapList_List_item_right_oilMoeny">
						{{list.siteOliCode}} {{list.siteOliName}} <view class="mapList_List_item_right_oilMoeny_money"><text> {{list.siteOliMoney}}</text>元/升</view>
					</view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import oilMongoApi from '../../../api/oil-mongo.js'
	import amapFile from '../../../utils/amap-wx.130.js'
	export default {
		data(){
			return{
				programmeList:[
					{
						title:'方案一',
						value:0,
						programme:10
					},{
						title:'方案二',
						value:0,
						programme:18
					},{
						title:'方案三',
						value:0,
						programme:13
					},
				],
				screenList:[
					{
						title:'默认排序',
						value:'id'
					},{
						title:'距离最近',
						value:'distance'
					},{
						title:'价格最低',
						value:'price'
					},
				],
				SiteInfoList:[],
				SiteList:{
					points:[], //拆分的路径点
					juLi:20000,//距离 
					oilProductCode:'',//油品编号
					siteChannel:'',//油站渠道
					highSpeedMark:'',//是否为高速
					sort:'',//排序字段默认: id距离: distance价格: price
					oilCardNature:2//来源性质
				},
				screenAtive:0,
				ProgrammeAtive:0,
				origin:{},
				destination:{},
				myAmapFun:new amapFile.AMapWX({key: '88f3d3a38da95c4dea388978a76d0b81'}),
			}
		},
		methods:{
			gotoDetail(ids){ //前往油站
				let data = {
					id:ids,
					oilCardNature : 2
				}
				oilMongoApi.getSiteInfoById(data).then(res=>{
					if(res.code == 20000){ 
						let obj  = {
						  siteId : res.data.id,
						  siteCode:res.data.siteCode,
						  siteChannel:res.data.siteChannel,
						  longitude:res.data.location.coordinates[0],
						  latitude:res.data.location.coordinates[1],
						}
						let itemS = JSON.stringify(obj)   
						uni.navigateTo({
							url: `../stationDetail/stationDetail?item=${itemS}&&types=map`
						})
					}
				})
			},
			changeProgramme(i){
				this.ProgrammeAtive = i
				let code = this.programmeList[i].programme
				this.getDriving(code) 
			},
			getDriving(code){
				var that = this;
				this.myAmapFun.getDrivingRoute({
					origin: this.origin.longitude+","+this.origin.latitude,
					destination: this.destination.longitude+","+this.destination.latitude,
					strategy:code,
					success: function(data){  
					  var coverList = []
					  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++){
							coverList.push({
							  lng: parseFloat(poLen[j].split(',')[0]),
							  lat: parseFloat(poLen[j].split(',')[1])
							})
						  } 
						}
					  } 
					that.SiteList.points =  coverList
					console.log(coverList)
					that.SiteList.points =that.SiteList.points.filter((item,index)=>{
					   return index % 20 == 0 
					});  
					 let isCheck = uni.getStorageSync('Authorization')
					 if(isCheck){
					 	that.getByGeoHash()
					 }else{
					 	that.getList()
					 } 
					},
					fail: function(info){
					}
				})
			},
			getByGeoHash(){
				var that  = this 
				oilMongoApi.getByGeoHash(this.SiteList).then( ele=>{
				let siteinfoList=[]
				ele.data.forEach(item =>{
					let iconPath,oliName;
					if(item.siteChannel === 'LV'){
						iconPath ='../../static/img/LV.png';
					}else if(item.siteChannel == 'TY'){
						iconPath ='../../static/img/change_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'; 
					}  
					if(item.siteOilsPrice[0].oilProductType === 'DIESEL'){
						oliName ='柴油';
					}else if(item.siteOilsPrice[0].oilProductType == 'PETROL'){
						oliName ='汽油';
					}else if(item.siteOilsPrice[0].oilProductType == 'GAS'){
						oliName ='天然气';
					}else if(item.siteOilsPrice[0].oilProductType == 'OTHER'){
						oliName ='其他';
					} 
					let result = {
						siteId:item.id,
						icon: iconPath,
						siteTitle:item.siteName,
						siteAddre:item.address,
						siteOliCode:item.siteOilsPrice[0].oilProductCode,
						siteOliName:oliName,
						siteOliMoney:item.siteOilsPrice[0].personalPrice
					}
					siteinfoList.push(result)
				})
				that.SiteInfoList = siteinfoList 
					})
			},
			getProgramme(value,i){
				let _that = this;
				var	money = 0
				_that.myAmapFun.getDrivingRoute({
					origin: _that.origin.longitude+","+_that.origin.latitude,
					destination: _that.destination.longitude+","+_that.destination.latitude,
					strategy:value,
					success: function(data){   
						_that.programmeList[i].value= parseInt(data.paths[0].duration)/100
					},
					fail: function(info){} 
				}) 
			},
			getList(){
				var that  = this 
				oilMongoApi.getSiteByGeoHash(that.SiteList).then( res=>{ 
					let siteinfoList=[]
					res.data.forEach(item =>{
						let iconPath,oliName;
						if(item.siteChannel === 'LV'){
							iconPath ='../../static/img/LV.png';
						}else if(item.siteChannel == 'TY'){
							iconPath ='../../static/img/change_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'; 
						}  
						if(item.siteOilsPrice[0].oilProductType === 'DIESEL'){
							oliName ='柴油';
						}else if(item.siteOilsPrice[0].oilProductType == 'PETROL'){
							oliName ='汽油';
						}else if(item.siteOilsPrice[0].oilProductType == 'GAS'){
							oliName ='天然气';
						}else if(item.siteOilsPrice[0].oilProductType == 'OTHER'){
							oliName ='其他';
						} 
						let result = {
							siteId:item.id,
							icon: iconPath,
							siteTitle:item.siteName,
							siteAddre:item.address,
							siteOliCode:item.siteOilsPrice[0].oilProductCode,
							siteOliName:oliName,
							siteOliMoney:item.siteOilsPrice[0].personalPrice
						}
						siteinfoList.push(result)
					})
					that.SiteInfoList = siteinfoList
				}) 
			},
			changeScreen(i){
				this.screenAtive = i
				this.SiteList.sort =  this.screenList[i].value
				this.getList()
			}
		},
		onLoad(option) {
			this.origin = JSON.parse(option.origin)
			this.destination = JSON.parse(option.destination)  
			console.log(option)
			let code = parseInt(option.check)
			this.programmeList.map((ele,i)=>{  
				if(ele.programme ===code){this.ProgrammeAtive = i;}
				this.getProgramme(ele.programme,i)  
			}) 
			this.getDriving(code) 
		}
	}
</script>

<style>
	.text-center{
		text-align: center;
	} 
	.mapList_List_item{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		background-color: #fff;
		padding: 4%;
		margin-bottom: 3%;
		border-radius: 10rpx;
	}
	.mapList_List_item_left{
		width: 20%;
		flex: 0 0 auto;
		display: flex;
		margin-right: 4%;
		justify-content: center;
	}
	.mapList_List_item_left image{
	    width: 80rpx;
	    height: 80rpx;
	    display: block;
	}
	.mapList_List_item_right_title{
		font-weight: 700;
		font-size: 32rpx;
		margin-bottom: 2%;
	}
	.mapList_List_item_right_address{
		font-size: 25rpx;
		color: #8a8a8a;
		margin-bottom: 2%;
	}
	.mapList_List_item_right_oilMoeny{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	.mapList_List_item_right_oilMoeny_money{
	   display: flex;
	   justify-content: flex-start;
	   align-items: center;
	   color: red;
	   font-size: 25rpx;
	   width: 61%; 
	}
	.mapList_List_item_right_oilMoeny_money text{
		    font-weight: 700;
		    font-size: 34rpx;
		    margin-left: 2%;
		    margin-right: 2%;
	}
	.mapList_List_item_right{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		width: 75%;
		flex: 0 0 auto;
	}
	.mapList_List{
		background-color: #E8E8E8;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		padding: 3%;
	}
	.mapList_screen{
		display: flex;
		justify-content: space-between;
		align-items: center; 
		padding: 3% 0; 
		border-bottom: 1px solid #e8e8e8;
	}
	.mapList_screen_list{ 
		width: 33.3%; 
		font-size: 30rpx;
		font-weight: 700;
	}
	.mapList_heat_list_title{
		margin-bottom: 4%;
		font-size: 24rpx;
	}
	.mapList_heat{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #EFEFEF;
		border-bottom: 1px solid #EFEFEF;
	}
	.mapList_heat_list{
		width: 33.3%;
		background-color: #ffffff;
		color: #333;
		padding: 1% 0; 
		box-sizing: border-box; 
	}
	.ProgrammeAtive{
		color: red;
	}
	.mapList_heat_list_value{
		font-size: 32rpx;
		font-weight: 700;
	}
</style>
