<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 class="mg-bot-20" v-for="(item,index) in collectList" :key="index">
			<!-- 1 门店 -->
			<view class="white-bg-wrap mg-bot-20" v-if="item.targetType==1">
				<view class="u-f u-f-aife u-f-jcsb">
					<view class="u-f u-f-aifs u-f-jcsb" @click="goToDetail(item)">
						<view class="mg-right-10">
							<image class="border-radius-9" style="width: 146rpx;height: 146rpx;"
								:src="item.targetPicture" :mode="'scaleToFill'">
							</image>
						</view>
						<view style="flex: calc(100% - 146rpx)">
							<view class="u-f u-f-fdc u-f-aifs">
								<view class="fs28 fw400 light-black mg-bot-10">{{item.targetName}}</view>
								<view class="u-f u-cc 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: 30rpx;height: 30rpx;">
										</image>
									</view>
									<view v-else>
										<image v-for="i in 5" :key="i" src="../.././static/common/star.png"
											style="width: 30rpx;height: 30rpx;">
										</image>
									</view>
									<view class="mg-right-10" style="color: #F2CB51;font-size: 24rpx;">
										{{item.score === 0 ? 5 : item.score}}.0分
									</view>

								</view>
								<view class="u-f u-f-jcsb 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 class="u-f u-f-aife" @click.stop="cancelCollection(item)">
										<image class="collect-star" src="../.././static/common/cancel_collect.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>


			<!--  2-油站 3-电站-->
			<view class="white-bg-wrap mg-bot-20" v-else-if="item.targetType==2 ||item.targetType==3">
				<view class="u-f u-f-jcsb">
					<view class="u-f u-f-jcfs" @click="goToDetail(item)">
						<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-jcsb">
							<text class="light-black fw400 two-line-ellipsis">{{item.targetName}}</text>
							<view class="main-color fw700">
								<text class="fs22">￥</text>
								<text class="fs30">{{item.price}}</text>
							</view>
						</view>
					</view>
					<view class="right u-f u-f-fdc u-f-jcfe" @click="cancelCollection(item)">
						<image class="collect-star" src="../.././static/common/cancel_collect.png"></image>
					</view>
				</view>
			</view>

			<!-- 4-门店商品 5-油站商品 -->
			<view class="white-bg-wrap" v-else-if="item.targetType==4 ||item.targetType==5">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-20" @click="goToDetail(item)">
					<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" style="margin-right: 96rpx;">
								<text class="fs32 main-color fw700">{{item.goodsPrice}}</text>
							</view>
							<view class="right u-f u-f-fdc u-f-jcfe" @click.stop="cancelCollection(item)">
								<image class="collect-star" src="../.././static/common/cancel_collect.png"></image>
							</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.init()
		},
		onReachBottom() {
			console.log(this.total, this.collectList.length);
			if (this.total > this.collectList.length) {
				this.pageNum = this.pageNum + 1
				this.getListData(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			init() {
				this.pageNum = 1
				this.total = 0
				this.getListData()
			},
			getListData(flag) {
				this.$http.post('/api/client/collectionRecord/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.tabIndex,
					lon: app.globalData.lon,
					lat: app.globalData.lat,
				}).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()
			},
			goTicketDetail(data) {
				uni.navigateTo({
					url: `/pagesF/coupon-detail/coupon-detail?id=${data.targetId}`
				})
			},
			//收藏
			cancelCollection(item) {
				this.$http.post('/api/client/collectionRecord/addCollection', {
					targetId: item.targetId,
					storeId: item.storeId,
					type: item.type
				}).then(res => {
					console.log("res", res)
					uni.showToast({
						icon: 'none',
						title: '取消收藏成功'
					})
					this.init()
				})
			},
			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?id=' + item.targetId
						}, "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;
	}

	.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;
	}

	.already-collect {
		width: 40rpx;
		height: 40rpx;
	}

	.collect {
		width: 40rpx;
		height: 40rpx;
		background: url(../.././static/common/collect.png) no-repeat center center;
		background-size: 100%;
	}
</style>