<template>
	<view class="mg-lr-24">
		<view class="tab-list u-f u-f-jcsa u-f-aic mg-bot-24">
			<view class="list-item" v-for="(item, index) in tabList" :key="item.id">
				<common-tab :acitve-tab="activeTab" :item="item" @tab-item="handleTabItem"></common-tab>
			</view>
		</view>
		<view v-for="(item,index) in collectList" :key="index">
			<view class="white-bg-wrap mg-bot-20" @click="goToDetail(item)" v-if="item.targetType==1">
				<view class="u-f u-f-aife u-f-jcsb">
					<view class="u-f u-f-aife u-f-jcsb">
						<view class="mg-right-10">
							<image class="border-radius-9" style="width: 146rpx;height: 146rpx;"
								:src="item.targetPicture" :mode="'scaleToFill'">
							</image>
						</view>
						<view class="u-f u-f-fdc u-f-aifs">
							<view class="fs28 fw400 light-black mg-bot-10">{{item.targetName}}</view>
							<view class="evaluate u-f mg-bot-26">
								<view v-if="item.score!=0">
									<image v-for="i in item.score" :key="i" src="../.././static/common/star.png"
										style="width: 32rpx;height: 32rpx;">
									</image>
								</view>
								<view v-else>
									<image v-for="i in 5" :key="i" src="../.././static/common/star.png"
										style="width: 32rpx;height: 32rpx;">
									</image>
								</view>
								<view class="star-num fs24">{{item.score === 0 ? 5 : item.score}}分</view>
							</view>
							<view class="u-f u-f-jcfs u-f-aic">
								<view class="u-f u-f-jcfs u-f-aic mg-rgiht-30 fs24 one-line-ellipsis">
									<text class="light-black">{{item.distance}}km | </text>
									<text class="light-gray">{{item.detailedAddress}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="u-f u-f-aife">
						<view class="collect-star"></view>
					</view>
				</view>
			</view>

			<view class="white-bg-wrap mg-bot-20" @click="goToDetail(item)"
				v-else-if="item.targetType==2 ||item.targetType==3">
				<view class="u-f u-f-jcsb">
					<view class="u-f u-f-aifs u-f-jcsb">
						<view class="mg-right-10">
							<image class="border-radius-9" style="width: 146rpx;height: 146rpx;"
								:src="item.targetPicture" :mode="'scaleToFill'">
							</image>
						</view>
						<view class="u-f u-f-fdc u-f-aifs">
							<view class="fs28 fw400 light-black mg-bot-34">{{item.targetName}}</view>
							<view class="u-f u-f-jcfs u-f-aic">
								<view class="u-f u-f-jcfs u-f-aic mg-rgiht-30 fs24 one-line-ellipsis">
									<text class="light-black">{{item.distance}}km | </text>
									<text class="light-gray">{{item.detailedAddress}}</text>
								</view>
							</view>
							<view class="u-f u-f-jcfs u-f-aic" v-if="item.targetType==2">
								<view class="u-f u-f-jcfs u-f-aic mg-rgiht-30 fs24 one-line-ellipsis">
									<text class="light-gray">国标价 </text>
									<text class="main-color">￥{{item.nationalPricing}}L</text>
								</view>
							</view>
							<view class="u-f u-f-aic u-f-jcfs light-gray fs24" v-if="item.targetType==3">
								<text>￥</text>
								<text class="main-color fs28 fw600">{{item.electricityPrice}}</text>
								<text>/度起</text>
							</view>
						</view>
					</view>
					<view class="u-f u-f-aife">
						<view class="collect-star"></view>
					</view>
				</view>
			</view>

			<view class="white-bg-wrap" v-else-if="item.targetType==4 ||item.targetType==5" @click="goToDetail(item)">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
					<view class="mg-right-10">
						<image class="border-radius-9" style="width: 146rpx;height: 146rpx;" :src="item.targetPicture"
							:mode="'scaleToFill'">
						</image>
					</view>
					<view class="u-f u-f-fdc" style="flex: 4">
						<view class="fs28 light-black fw400 mg-bot-10">{{item.targetName}}</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcsb" v-if='item.targetType==4'>
							<text class="light-gray fs24 mg-right-8">{{item.specifications}}</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcsb u-f-aic main-color" style="margin-right: 96rpx;">
								<text class="fs24">￥</text>
								<text class="fs32 fw600">{{item.goodsPrice}}</text>
							</view>
							<view class="right u-f u-f-fdc u-f-jcfe">
								<view class="collect-star"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="collectList.length == 0">
			<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
			</image>
			<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				activeTab: 'all',
				tabList: [{
						name: "全部",
						id: "all",
						index: 0
					},
					{
						name: "店铺",
						id: "dianpu",
						index: 1
					},
					{
						name: "商品",
						id: "shangpin",
						index: 2
					}
				],
				tabIndex: 0,
				total: 0,
				pageNum: 1,
				pageSize: 10,
				collectList: [],
			}
		},
		onShow() {
			this.getListData()
		},
		onReachBottom() {
			if (this.total > this.collectList.length) {
				this.pageNum = this.pageNum + 1
				this.getListData(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			getListData(flag) {
				this.$http.post('/api/client/footprintRecord/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					lon: app.globalData.lon,
					lat: app.globalData.lat,
					type: this.tabIndex
				}).then((res) => {
					this.collectList = !flag ? res.data.data.rows : this.collectList.concat(res.data.data.rows)
					this.total = res.data.data.total
				})
			},
			handleTabItem(item) {
				this.activeTab = item.id
				this.tabIndex = item.index
				this.getListData()
			},
			goToDetail(item) {
				console.log("item", item)
				switch (item.targetType) {
					case 1:
						this.User.navigate({
							url: '/pagesC/shop-detail/shop-detail?id=' + item.targetId
						}, "navigateTo", true);
						break;
					case 2:
						this.User.navigate({
							url: `/pagesF/oil-detail/oil-detail?id=${item.targetId}&lon=${this.User.curcity.lng}&lat=${this.User.curcity.lat}`
						}, "navigateTo", true);
						break;
					case 3:
						this.User.navigate({
							url: `/pagesA/charge-detail/charge-detail?id=${item.targetId}&lon=${this.User.curcity.lon}&lat=${this.User.curcity.lat}`
						}, "navigateTo", true);
						break;
					case 4:
						this.User.navigate({
							url: '/pagesB/shop-goods-detail/shop-goods-detail?storeId=' + item.storeId +
								'&goodsId=' + item.targetId
						}, "navigateTo", true);
						break;
					case 5:
						this.User.navigate({
							url: `/pagesF/oil-quan-detail/oil-quan-detail?storeId=${item.storeId}=${item.targetId}&lon=${this.User.curcity.lng}&lat=${this.User.curcity.lat}`
						}, "navigateTo", true);
						break;
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFAF9;
	}
</style>

<style lang="scss" scoped>
	.tab-list {
		.list-item {
			font-size: 30rpx;
			margin-right: 123rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.fl-1 {
		flex: 1;
	}

	.fl-4 {
		flex: 4;
	}

	.collect-star {
		width: 42rpx;
		height: 42rpx;
		// background: url(../.././static/common/check.png) no-repeat center center;
		background-size: 100%;
	}

	.star-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.star-num {
		color: #F2CB51;
	}

	.plane {
		width: 52rpx;
		height: 52rpx;
		background: url(../.././static/plane.png) no-repeat center center;
		background-size: 100%;
	}

	.youhuiquan {
		border-radius: 8rpx;
		color: #ffffff;
		width: 135rpx;
		height: 135rpx;

		image {
			width: 135rpx;
			height: 135rpx;
		}

		// background-color: #FF7602;
	}
</style>