<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="" v-for="(item,index) in collectList" :key="index">
			<view class="white-bg-wrap mg-bot-20" @click="goTicketDetail(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">
						<image class="mg-right-10" style="width: 146rpx;height: 146rpx;" :src="item.targetPicture">
						</image>
						<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 class="star-icon" v-for="item in item.score" :key="item">
									<image src="../.././static/common/star.png" style="width: 100%;height: 100%;">
									</image>
								</view>
								<view class="star-num fs24">{{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="goDetail(`/pages/quick-buy-oil/quick-buy-oil?id=${item.targetId}`)"
				v-else-if="item.targetType==2 ||item.targetType==3">
				<view class="u-f u-f-jcsb">
					<view class="u-f u-f-jcfs">
						<view class="youhuiquan mg-right-14 u-f u-f-fdc u-f-aic u-f-jcc fs38">
							<image :src="item.targetPicture" mode=""></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">
						<view class="collect-star"></view>
					</view>
				</view>
			</view>

			<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">
					<image :src="item.targetPicture" style="width: 128rpx;height: 128rpx;flex: 1" :mode="'widthFix'"
						class="mg-right-10"></image>
					<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">
								<view class="collect-star"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				activeTab: 'all',
				tabList: [{
						name: "全部",
						id: "all",
						index: ""
					},
					{
						name: "店铺",
						id: "dianpu",
						index: 1
					},
					{
						name: "商品",
						id: "shangpin",
						index: 2
					}
				],
				tabIndex: "",
				pageNum: 1,
				pageSize: 10,
				collectList: [],
			}
		},
		onShow() {
			this.getListData()
		},
		methods: {
			getListData() {
				this.$http.post('/api/client/collectionRecord/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					lon: app.globalData.lon,
					lat: app.globalData.lat,
					type: this.tabIndex
				}).then((res) => {
					this.collectList = res.data.data.rows
				})
			},
			handleTabItem(item) {
				this.activeTab = item.id
				this.tabIndex = item.index
				this.getListData()
			},
			goTicketDetail(data) {
				uni.navigateTo({
					url: `/pages/coupon-detail/coupon-detail?id=${data.targetId}`
				})
			}
		}
	}
</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>