<template>
	<view class="cu-item cur padding site-item margin-tb-sm my-shadow">

		<view class="cu-avatar radius lg" v-if="siteItem.siteImages"
			:style="'background-image:url('+siteItem.siteImages+');'">

		</view>
		<view class="cu-avatar round lg" v-else>
			<text class="text-df">{{siteItem.channelCode|channelCodeFamt}}</text>
		</view>
		<view class="content">
			<view>
				<view class="text-cut text-black text-bold text-lg padding-right-sm">{{siteItem.siteName}}</view>
			</view>
			<view class="text-left">
				<view class="text-cut color-666 text-sm">
					{{siteItem.address}}
				</view>
			</view>
		</view>
		<view class="action">
			<view class="text-grey text-xs oil-main-color">
				<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 {
				starUrl: this.global.starUrl,
			}
		},
		methods: {

		},
		filters: {
			channelCodeFamt(value) {
				if (value) {
					// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）
					switch (value) {
						case 'XOIL':
							return '星油'
						case 'WJY':
							return '万金油'
						case 'LV':
							 return '其他'
						case 'TY':
							return '团油'
						case 'YDJY':
							return '一点加油（壳牌）'
					}
				}
			},
			distanceFilter(value) {
				if (value) {
					return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
				}
			}
		}
	}
</script>

<style scoped>
	.site-item {
		margin-top: 0.5rem;
	}
	.cu-avatar{
		background-color: transparent !important;
	}
</style>