<template>
	<view class="content">
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom" @scroll="scroll">
			<view class="list" @click="intoDetail" v-for="item in storeList" :key="item.id">
				<u-image width="160rpx" height="160rpx" :border-radius="10" :src="item.icon?item.icon:'/static/img/mddef.jpg'"></u-image>
				<view class="store-info">
					<view class="name">
						{{item.name}}
					</view>
					<view class="address">
						{{item.addrDetail}}
					</view>
					<view class="location">
						<view class="left">
							<uni-icons class="icon" size="16" type="paperplane"></uni-icons>
							<text>{{item.distance}} km</text>
						</view>
						<view class="right">
							<u-icon class="icon" size="32" name="clock"></u-icon>
							<text>{{item.time}} 营业</text>
						</view>
					</view>
				</view>
				<view class="list-right">
					<u-image width="110rpx" height="110rpx" :border-radius="10" :src="getStoreStatus(item)"></u-image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				storeList: [{
						id: 1,
						icon: '',
						addrDetail: '陕西省西安市未央区北二环贞观路',
						name: '贞观路站',
						distance: 0.1,
						time: '8:00-22:00',
						status: 1
					},
					{
						id: 10,
						icon: '',
						addrDetail: '陕西省西安市未央区北二环贞观路二环贞观路',
						name: '贞观路站',
						distance: 0.1,
						time: '8:00-22:00',
						status: 0
					},
					{
						id: 11,
						icon: '',
						addrDetail: '陕西省西安市未央区北二环贞观路',
						name: '贞观路站',
						distance: 0.1,
						time: '8:00-22:00',
						status: 2
					}
				],
				currentPosition: {
					lat: '0',
					lng: '0'
				},
				pageNo: 1,
				pageSize: 10
			}
		},
		onShow() {

		},
		onLoad() {
			// 获取当前经纬度
			let _this = this
			uni.getLocation({
				type: 'wgs84', // 默认wgs84
				success: function(res) {
					_this.currentPosition.lat = res.latitude;
					_this.currentPosition.lng = res.longitude;
					_this.gpsCompletion = true;
					// 查询门店信息
					// _this.getStoresList()
				},
				fail: function(res) {
					console.log(res)
					// 查询门店信息
					// _this.getStoresList()
				},
			});
		},

		computed: {},
		methods: {
			getStoresList() {
				uni.showLoading({
					title: '正在加载...'
				})
				let lat = this.currentPosition.lat
				let lng = this.currentPosition.lng
				getStoresList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					lat: lat,
					lng: lng
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						let list = res.data.list
						if (list && list.length) {
							list.map(item => {
								if (item.addrDetail.indexOf("省") > 0 && item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") >
									0) {
									item.addrDetail = item.addrDetail
								} else {
									if (item.addrDetail.indexOf("市") > 0 && item.addrDetail.indexOf("区") > 0) {
										item.addrDetail = item.addrProvinceName + item.addrDetail
									} else if (item.addrDetail.indexOf("区") > 0) {
										item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDetail
									} else {
										item.addrDetail = item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail
									}
								}
								item.distance = item.distance ? Math.round(item.distance / 1000) : ''
								item.star = getStarNum(item.level)
							})
							this.storeList = this.storeList.concat(list)
						} else {
							if (this.pageNo != 1) {
								uni.showToast({
									title: '已经是最后一页'
								})
								this.isLastPage = true
							}
						}
					}
					uni.hideLoading()
				})
			},
			// 获取网点营业状态
			getStoreStatus(item) {
				switch (item.status) {
					case 0:
						return '/static/img/ygb.png'
						break;
					case 1:
						return '/static/img/yyz.png'
						break;
					case 2:
						return '/static/img/dky.png'
						break;
					default:
						break;
				}
			},
			// 进入网点详情
			intoDetail (item) {
				uni.navigateTo({
					url: `/pages/store/storeDetail?id=${item.id}`
				})
			},
			// 到达底部
			reachBottom() {

			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;

		.scroll-Y {
			width: 100%;
			height: 100%;

			.list {
				padding: 20rpx 0;
				display: flex;
				border-bottom: 1px solid #eee;
				.store-info {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 20rpx;
					.name {
						font-size: 32rpx;
						color: #000;
					}
					.address{
						font-size: 26rpx;
						padding: 10rpx 0;
					}
					.location {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						.left {
							margin-right: 20rpx;
						}
						.icon {
							color: #999;
							margin-right: 5rpx;
						}
					}
				}

				.list-right {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
