<template>
	<view style="display: flex;flex-direction: column;height:100vh;box-sizing: border-box;">
		<u-navbar placeholder title="门店列表" leftIconSize='0' :bgColor="bgColor" :fixed="true">
		</u-navbar>

		<view class="top-bgc"></view>

		<view class="bg">
			<image src="../.././static/common/bg.png" :mode="'widthFix'" style="width: 100%;height: 100%"></image>
		</view>

		<view class="maintenance-content mg-lr-24">
			<!-- 搜索部分开始 -->
			<view class="input-view u-f u-f-fdr u-f-aic u-f-fwnw">
				<image class="search-icon" src="/static/common/search.png" mode=""></image>
				<input confirm-type="search" class="nav-bar-input" v-model="searchText" type="text" placeholder="搜索"
					@confirm="searchAction" />
			</view>
			<up-dropdown :duration="0" v-if="operateMenu.length" height="20">
				<up-dropdown-item v-model="value1" :title="operateMenuTitle" :options="operateMenu"
					@change="checkOperte"></up-dropdown-item>
				<up-dropdown-item v-model="value2" :title="optionsTitle?optionsTitle:options[0].label"
					:options="options" @change="checkGood"></up-dropdown-item>
			</up-dropdown>

		</view>

		<view style="flex: 1;overflow-y: auto;margin-top: 20rpx;">
			<scroll-view scroll-y>
				<view class="white-wrap" v-for="item in list" :key="index">
					<view class="rec-show-desc u-f u-f-aifs u-f-jcsb"
						@click="goDetail('/pagesC/shop-detail/shop-detail?id='+item.id)">
						<view class="left u-f u-f-aifs">
							<view class="lf-content">
								<image class="border-radius-9" :mode="'scaleToFill'"
									style="width: 146rpx;height: 146rpx;" :src="item.storeLogo"></image>
							</view>
							<view class="rt-content">
								<view class="shop-name fs28 fw400">{{item.storeName}}</view>
								<view class="u-f u-f-aic">
									<image style="width: 30rpx;height: 30rpx;" src="/static/common/star.png"
										v-for="i in item.score==0?5:item.score" :key="i" mode="">
									</image>
									<view style="color: #F2CB51;font-size: 24rpx;">{{item.score==0?5:item.score}}.0分
									</view>
									<view v-if="item.commentNum!=0" style="color: #999999;font-size: 24rpx;">
										{{item.commentNum}}条评价
									</view>
								</view>
								<view class="light-gray fs24 mg-bot-10">总售 {{item.totalSales}}</view>
								<view class="u-f u-cc address fs24 "><text class="distance">{{item.distance}}km
										|</text>
									<text class="detail-address"
										style="width: 320rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;">{{item.detailedAddress}}</text>
								</view>
							</view>
						</view>
						<view class="right" @click.stop="skipCityMap(item)">
							<image class="plane" src="/static/common/plane.png" mode=""></image>
						</view>
					</view>
					<view class="u-f u-f-jcsb u-f-aic" style="padding-top: 20rpx;border-top: 1rpx solid #F0F0F0;">
						<view class="goodslist">
							<view class="u-f u-f-aifs u-f-fdc list-card" style="display: flex; margin-right: 15rpx;"
								v-for="goods in item.storeGoodsList" :key="index"
								@click="goDetail('/pagesB/good-product-detail/good-product-detail?id='+goods.id+'&storeId='+goods.storeId)">
								<image class="mg-bot-10 border-radius-9" :src="goods.goodsImage"
									style="width: 146rpx;height: 146rpx;" :mode="'widthFix;'"></image>
								<text class="goodsName one-line-ellipsis mg-bot-10 fs26">{{goods.goodsName}}</text>
								<view class="main-color fs28 u-f u-f-jcfs">
									<text>￥</text>
									<text class="fw700">{{goods.goodsPrice}}</text>
									<text></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import uniNavBar from "../.././components/uni-nav-bar/uni-nav-bar.vue"
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	import maintenanceShop from "../.././components/maintenance-shop/maintenance-shop.vue"
	export default {
		components: {
			uniNavBar,
			maintenanceShop
		},
		data() {
			return {
				value1: 1,
				value2: 1,
				options: [{
						label: '距离最近',
						value: 1,
					},
					{
						label: '销量最高',
						value: 3,
					},
				],
				isBindCar: true,
				showBindCarPop: false,
				activeOperateMenu: '1',
				activeShopGood: '1',
				paddingTop: 0,
				list: [],
				pageNum: 1,
				total: 0,
				type: 1,
				searchText: '',
				operateMenu: [],
				shopGood: [{
						name: '距离最近',
						id: '1'
					},
					{
						name: '销量最高',
						id: '3'
					},
				],
				bgColor: 'rgba(0,0,0,0)',
				operateMenuTitle: '',
				optionsTitle: ''
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
		},
		onLoad(option) {
			this.getShopType()
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.getList()
		},
		onReachBottom() {
			console.log(this.total, this.list.length);
			if (this.total > this.list.length) {
				this.pageNum = this.pageNum + 1
				this.getList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			searchAction() {
				this.pageNum = 1
				this.getList()
			},
			getList(flag) {
				console.log(uni.getStorageSync('curcity'));
				var location = uni.getStorageSync('curcity')
				this.$http.post("/api/client/store/list", {
					pageNum: this.pageNum,
					pageSize: '20',
					field: this.searchText,
					storeTypeId: this.activeOperateMenu,
					sortType: this.activeShopGood,
					lon: location.lng,
					lat: location.lat,
				}).then(res => {
					console.log(res.data.data.rows)
					this.list = !flag ? res.data.data.rows : this.data.data.list.concat(res.data.data.rows)
					this.total = res.data.data.total
				})
			},
			getShopType() {
				this.$http.get("/api/client/store/storeTypeList", {}).then(res => {
					console.log(res.data.data, "1111111111111111111111")
					this.operateMenu = res.data.data
					this.activeOperateMenu = res.data.data[0].value
					this.operateMenuTitle = res.data.data[0].label
				})
			},
			checkOperte(id) {
				console.log("checkOperte")
				console.log("id", id)
				this.activeOperateMenu = id
				this.pageNum = 1
				this.getList()
				this.operateMenu.map(item => {
					if (item.value == id) {
						this.operateMenuTitle = item.label
					}
				})
			},
			checkGood(id) {
				console.log("checkGood")
				this.activeShopGood = id
				this.pageNum = 1
				this.getList()
				this.options.map(item => {
					if (item.value == id) {
						this.optionsTitle = item.label
					}
				})
			},
			handleClickLeft() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			handleClickIput() {},
			handleHidePopup() {
				this.showBindCarPop = false
			},
			handleBindCar() {
				uni.navigateTo({
					url: '/pagesA/add-car/add-car'
				})
			},
			showTip() {
				uni.showToast({
					icon: 'none',
					title: '已根据当前车型匹配车辆',
					duration: 500
				})
			},
			handleEnterDetail() {
				uni.navigateTo({
					url: '/pagesF/maintenance-detail/maintenance-detail'
				})
			},
			handleClickInput() {
				uni.navigateTo({
					url: "/pagesA/my-garage/my-garage"
				})
			},
			goDetail(url) {
				uni.navigateTo({
					url: url
				})
			},
			skipCityMap(data) {
				console.log(data, "打开地图");
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: data.storeName,
					address: data.detailedAddress,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
		}
	}
</script>

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

<style lang="scss" scoped>
	$nav-height: 68rpx;

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 540rpx;
		z-index: -1;
	}

	.maintenance-content {
		.input-view {
			background-color: #ffffff;
			border: 1rpx solid #333333;
			height: $nav-height;
			line-height: $nav-height;
			border-radius: 34rpx;
			padding: 0 15px;
			color: #999999;
			margin-bottom: 22rpx;

			.search-icon {
				width: 30rpx;
				height: 30rpx;
				background-size: 100%;
			}

			.nav-bar-input {
				height: 100%;
				padding: 0 5px;
				font-size: 12px;
			}
		}

		.youdian {
			margin-top: 30rpx;
			height: 34rpx;

			.item {
				flex: calc(25% - 30rpx);
				margin-right: 30rpx;

				.image {
					width: 26rpx;
					height: 30rpx;
					background-size: 100%;
				}

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

		.func {
			padding: 4rpx 6rpx;
			background: #FFFDFC;
			border-radius: 36rpx 36rpx 36rpx 36rpx;

			.item {
				color: #333333;
				text-align: center;
				padding: 12rpx 0;
				flex: calc(25% - 17rpx);
				margin-right: 17rpx;
				font-size: 28rpx;
				font-weight: normal;

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

				&.active {
					color: #ffffff;
					background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
					border-radius: 36rpx 36rpx 36rpx 36rpx;
				}
			}
		}

		.shop-good {
			.item {
				text-align: center;
				padding: 16rpx 0;
				background-color: #ffffff;
				width: 214rpx;
				margin-right: 30rpx;
				border-radius: 18rpx;
				font-size: 28rpx;

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

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

		.recomend {
			font-style: italic;
			letter-spacing: 4rpx;

			.bold-line {
				margin-top: -10rpx;
				width: 231rpx;
				height: 15rpx;
				background: linear-gradient(90deg, #FF4502 0%, rgba(251, 246, 243, 0) 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
		}

		.good-list {
			.good-item {
				background-color: #ffffff;
				border-radius: 18rpx;
				padding: 20rpx;

				.fs22 {
					.light-black {
						padding: 6rpx 10rpx;
						background: #F1F1F1;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}
				}
			}
		}
	}


	.rec-show-desc {
		padding: 20rpx;

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

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

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

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

					.star-num {
						color: #F2CB51;

						.commentNum {
							color: #999999;
						}
					}
				}

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

					.detail-address {
						margin-left: 15rpx;
						color: #999999;
					}
				}
			}
		}

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

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

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

	.go-look {
		color: #ffffff;
		padding: 6rpx 26rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.sys-mes-nofity {
		padding: 0 90rpx;
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		border-radius: 14rpx;

		.top {
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}

	.small-gray-right-arrow {
		width: 16rpx;
		height: 16rpx;
		// background: url(../.././static/common/gray_right_arrow.png) no-repeat center center;
		background-size: 100%;
	}

	.page-title {
		width: 100%;
		color: #333333;
		font-size: 36rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.goodslist {
		display: flex;
		overflow-x: auto;
		width: 100%;
		padding: 10rpx 20rpx;
	}

	.goodsName {
		width: 155rpx;
	}

	.white-wrap {
		margin: 0 24rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background: #ffffff;
		border-radius: 18rpx;
	}
</style>