<template>
	<view class="cu-item cur padding no-mr-border site-item" :style="{'min-height': siteItem.activitySwitch?mHeight+'rpx !important':''}">
		<view class="cu-avatar radius lg "  
			:style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'">
				
		</view> 
		<view class="content"> 
			<view> 
				<view class="text-cut text-black  text-lg padding-right-sm ">  {{siteItem.siteName}}</view> 
			</view>
			<view style="display: flex;" class="listTages">
				<view :style="{background:siteItem.siteType==1?'#FF6700':'#00c15e'}"  class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteType==1?'加油站':'加气站'}}</view>
				<view class="cu-tag round bg-self--dark-blue yu-tag text-xs" v-show="siteItem.ureaNumber>0">尿素</view>
				<view v-if="siteItem.siteLevel" class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteLevel}}级</view>
				<view class="cu-tag round bg-self-yellow  yu-tag text-xs" :class="siteItem.channelCode=='XOIL'?'tag-red':''">{{siteItem.listTag|channelCodeFamt}}</view>
				<view class="cu-tag round bg-self--dark-yellow yu-tag text-xs" v-show="first">距离最近</view>
				<view v-if="siteItem.highSpeedMark||siteItem.roadTpye" class="cu-tag round bg-self--dark-blue yu-tag text-xs" :style="{background:speedMarkColor(siteItem.highSpeedMark,siteItem.roadTpye)}">{{speedMark(siteItem.highSpeedMark,siteItem.roadTpye)}}{{siteItem.roadName?':'+siteItem.roadName:''}}</view>
				<!-- <view v-if="siteItem.highSpeedMark!=null" class="cu-tag round bg-self--dark-blue yu-tag text-xs" :style="{background:speedMarkColor(siteItem.highSpeedMark)}">{{siteItem.highSpeedMark?siteItem.highSpeedMark:siteItem.roadTpye|speedMark(siteItem.highSpeedMark,siteItem.roadTpye)}}{{siteItem.roadName?':'+siteItem.roadName:''}}</view> -->
			</view>
			<view class=""> 
				<view class="text-cut color-666 text-sm  "> 
					{{siteItem.address}} 
				</view> 
			</view>
			<view class="text-gray  flex">
				<view class="text-bold  yellow-oil text-xl padding-right-xs">
					{{siteItem.oilProductCode}}
				</view>
				<view class="oil-main-color text-xl text-bold padding-right-xs">
					￥{{siteItem.sitePrice|moneyFormat}}
				</view> 
				<view class="">
					<text class="cu-tag   oil-tag radius  text-xs"
						v-if="siteItem.oilSitePrice - siteItem.sitePrice>0">省￥{{(siteItem.oilSitePrice - siteItem.sitePrice)|moneyFormat}}</text>
				</view> 
				<view class="text-cut padding-left-sm text-lg"> 
					<text class="text-delete color-333 text-sm padding-right-xs"> 
						￥{{siteItem.oilSitePrice|moneyFormat}}/L 
					</text> 
					<!-- 	<my-icon iconName="￥.png" class="padding-right-xs icon-rectangle"></my-icon>

					<my-icon iconName="f.png" class="padding-right-xs "></my-icon> -->

				</view> 
			</view> 
			<view class="text-gray" v-if="siteItem.activitySwitch">
				<view class="activity-cu">
					<text>活动</text>
					<text>{{siteItem.activityContent}}</text>
				</view>
			</view>
		</view>

		<view class="action" style=" width: 88px;"> 
			<view class="text-grey text-sm  " style="padding-top: 6rpx;"> 
				<!-- <my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> -->
				{{siteItem.juli|distanceFilter}} 
			</view> 
		</view> 
	</view>
</template>

<script>
	export default {
		props: {
			siteItem: {
				type: Object,
				default () {}
			},
			first: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				mHeight: 156,
				starUrl: this.global.starUrl,
				defaultLogo:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png'
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			
			query.select('.activity-cu').boundingClientRect(data => {undefined
			
			console.log(data,'1111111111111111111')
			if(data){
				this.mHeight = this.mHeight + data.height*2
			}
			}).exec();
		},
		methods: {
			speedMarkColor(val,data){
				if(val == 0){
					if(data == '0'){
						return '#666666'
					}
					if(data == '1'){
						return '#F9AA64'
					}
					if(data == '2'){
						return '#D61750'
					}
				}
				if(val == 1){
					return '#11A265'
				}
			},
			speedMark(val,data){
				console.log(val,data,'qqqqqqqqqqqqqqqqqqqqqq')
				if(val == 0){
					if(data == '0'){
						return '普通'
					}
					if(data == '1'){
						return '省道'
					}
					if(data == '2'){
						return '国道'
					}
				}
				if(val == 1){
					return '高速'
				}
			},
		},
		filters: {
			channelCodeFamt(value) {
				console.log(value)
				if (value == null || value == '' ) {
					return '未知'
					// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
					// switch (value) {
					// 	case 'XOIL':
					// 		return '星油'
					// 	case 'WJY':
					// 		return '万金油'
					// 	case 'LV':
					// 		 return '其他'
					// 	case 'TY':
					// 		return '团油'
					// 	case 'YDJY':
					// 		return '一点加油（壳牌）'
					// }
				} else {
					return value
				}
			},
			distanceFilter(value) {
				if (value) {
					return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
				}
			},
			moneyFormat(value) {
				if (value) {
					// console.log(value,String(value).split('.')[1].substring(1,2) + 1,'*******************')
					let realAmount = Math.floor(value * 100) / 100
					// console.log('old:',value)
					// console.log('new:',realAmount)
					// return realAmount
					return String(value).split('.')[1]&&String(value).split('.')[1].length>2?Number(`${String(value).split('.')[0]}.${String(value).split('.')[1].substring(0,2)}${Number(String(value).split('.')[1].substr(2))==0?'':9}`).toFixed(2) :Number(value).toFixed(2);
				} else {
					return '0.00'
				}
			},
		}
	}
</script>

<style scoped>
	.site-item { 
		margin-bottom: 1.8rem; 
		align-items: flex-start !important; 
		height: 147rpx!important;
	}
		
	.yellow-oil{
		color: #e8775a;
	}
	.cu-avatar{
		background-color: transparent !important;
	}
	.tag-red{
		background-color: red;
	}
	.levelBox{
		 font-size: 24rpx;
		 color: red;
		 font-weight:bold;
		     margin-left: 16rpx;
	}
	.bg-self--dark-blue{
		background: #2098ff;
		color: #FFFFFF;
	}
	.activity-cu{
		border: 1px solid #FF9000;
		border-radius: 5px;
		width: fit-content;
		display: flex;
	}
	.activity-cu text{
		font-size: 12px;
		padding: 0 18rpx;
		line-height: 20px;
	}
	.activity-cu text:last-child{
		color:#ff9818;
	}
	.activity-cu text:first-child{
		color:#ff6f0e;
		background: #FFEBDE;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
</style>
