<template>
	<view class="add-oil mg-lr-24">
		<view class="tab-list u-f u-f-jcfs 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="shop-good u-f u-f-jcfs u-f-aic mg-bot-34">
			<view :class="['item', activeShopGood == index ? 'active' : '']" v-for="(item,index) in shopGood"
				:key="item.id" @click="checkGood(item,index)">{{item.name}}</view>
		</view>

		<!-- 加油服务开始  -->
		<view class="white-bg-wrap mg-bot-20" v-for="item in dataList" :key="item.id" v-if="activeTab === 31">
			<view class="rec-show-desc u-f u-f-aic u-f-jcsb"
				@click="goDetail(`/pages/oil-detail/oil-detail?id=${item.storeId}&lon=${item.lon}&lat=${item.lat}`)">
				<view class="left u-f u-f-aic">
					<view class="lf-content">
						<image :src="item.storeLogo"></image>
					</view>
					<view class="rt-content">
						<view class="u-f u-f-jcsb u-f-aifs mg-bot-18">
							<text class="shop-name fs28 fw400">{{item.storeName}}</text>
							<view class="plane"></view>
						</view>
						<view class="fs24 mg-bot-10 mg-top-10">
							<text class="light-black mg-right-10">{{item.distance}}km</text>
							<text class="light-gray">{{item.address}}</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="main-color">
								<text class="fs24">￥</text>
								<text class="fs28">{{item.platformPrice}}/L</text>
							</view>
							<view class="fs24">
								<text class="light-gray">国标价</text>
								<text class="main-color">￥{{item.nationalPrice}}/L</text>
							</view>
							<view class="fs24">
								<text class="light-gray">油站价</text>
								<text class="main-color">￥{{item.gasStationPrice}}/L</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-f u-f-jcfs u-f-aic" style="padding-top: 20rpx;border-top: 1rpx solid #F0F0F0;">
				<view class="u-f u-f-aifs u-f-fdc u-f-fww list-card" v-for="(innerItem,eleIndex) in item.goodsInfoList"
					:key="innerItem.goodsId"
					@click="goDetail(`/pages/quick-buy-oil/quick-buy-oil?goodsId=${innerItem.goodsId}&id=${item.storeId}`)">
					<image class="mg-bot-10" :src="innerItem.goodsImage" style="width: 100%;height: 155rpx;"
						:mode="'widthFix;'"></image>
					<text class="one-line-ellipsis mg-bot-10 fs26">{{innerItem.goodsName}}</text>
					<view class="u-f u-f-jcfs u-f-aic price">
						<view class="main-color fs28 u-f u-f-jcfs mg-right-10 ">
							<!-- <text>￥</text> -->
							<text class="fw700">￥{{innerItem.commodityPrice}}</text>
						</view>
						<view class="light-gray fs22 delete-line ">
							￥{{innerItem.goodsOriginalPrice}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加油服务结束 -->

		<!-- 充电服务开始  -->
		<view v-show="activeTab === 32">
			<view class="white-bg-wrap mg-bot-20" v-for="(item,index) in dataList" :key="index">
				<view class="rec-show-desc u-f u-f-aic u-f-jcsb"
					@click="goDetail(`/pages/charge-detail/charge-detail?id=${item.storeId}&lon=${item.lon}&lat=${item.lat}`)">
					<view class="left u-f u-f-aic" style="width: 100%;">
						<view class="lf-content">
							<image :src="item.storeLogo"></image>
						</view>
						<view class="rt-content" style="width: 100%;">
							<view class="u-f u-f-jcsb u-f-aifs mg-bot-18">
								<text class="shop-name fs28 fw400">{{item.storeName}}</text>
								<view class="plane" @click.stop="skipCityMap(item)">
									<image src="../../static/common/plane.png" style="width: 100%;height: 100%;"
										mode=""></image>
								</view>
							</view>
							<view class="fs24 mg-bot-10 mg-top-10">
								<text class="light-black mg-right-10">{{item.distance}}km</text>
								<text class="light-gray">{{item.detailedAddress}}</text>
							</view>
							<view class="u-f u-f-aic u-f-jcfs light-gray fs24 mg-bot-18">
								<text>￥</text>
								<text class="main-color fs28 fw700">{{item.electricityPrice}}</text>
								<text>/度起</text>
							</view>
							<view class="u-f u-f-aic u-f-jcfs fs24">
								<text class="parking">P</text>
								<text class="light-gray">停车费规则按实际情况为准</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 充电服务结束 -->

	</view>
</template>

<script>
	import commonTab from "../../components/common-tab/common-tab.vue"
	export default {
		components: {
			commonTab
		},
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				activeTab: 31,
				activeShopGood: 0,
				tabList: [{
						name: "加油服务",
						id: 31
					},
					{
						name: "充电服务",
						id: 32
					}
				],
				shopGood: [{
						name: '距离最近',
						id: 1
					},
					{
						name: '销量最高',
						id: 2
					}
				],
				dataList: []
			}
		},
		onLoad(option) {
			this.getStoreTypeList()
		},
		methods: {
			async getStoreTypeList() {
				let data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"storeType1Id": this.activeTab,
					"sortOrder": this.activeShopGood + 1,
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat
				}

				let res = await this.$http.post('/api/client/index/refuelRecharge', data, {
					token: true,
					checkToken: true
				})
				let dataList = res.data.data
				console.log("dataList", dataList.rows)
				this.dataList = dataList.rows
			},
			handleTabItem(item) {
				this.activeTab = item.id
				this.getStoreTypeList()
			},
			checkGood(data, index) {
				this.activeShopGood = index
				this.getStoreTypeList()
			},
			skipCityMap(data) {
				console.log(data, "打开地图");
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: '地点',
					address: data.address,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			goDetail(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

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

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

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

		.shop-good {
			.item {
				text-align: center;
				padding: 16rpx 50rpx;
				background-color: #ffffff;
				border-radius: 18rpx;
				margin-right: 30rpx;

				&.active {
					text-align: center;
					color: #ffffff;
					background-color: #FF4502;
				}
			}
		}

		.white-bg-wrap {
			.rec-show-desc {
				padding: 20rpx;

				.left {
					width: 100%;

					.lf-content {
						margin-right: 10rpx;

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

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

						.shop-name {
							color: #333333;
							margin-bottom: 10rpx;
						}

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

							.star-num {
								color: #F2CB51;
							}
						}

						.address {
							.distance {
								color: #333333;
							}

							.detail-address {
								color: #999999;
							}
						}
					}
				}

				.right {
					.total-sell {
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}


		}
	}

	.parking {
		text-align: center;
		vertical-align: baseline;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-right: 8rpx;
		background-color: #FF4502;
		color: #ffffff;
	}

	.list-card {
		width: 165rpx;
		// flex: 20%;
		margin-right: 15rpx;
		overflow: hidden;

		// max-width: 20%;
		&:nth-child(4) {
			margin-right: 0;
		}

		.price {
			display: block;
			width: 100%;
			height: 90rpx;

			.delete-line {
				margin-top: 10rpx;
				margin-left: 30rpx;
			}
		}
	}
</style>