<template>
	<view class="content">
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="list" @click="intoDetail(item)" 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.beginTime}}-{{item.endTime}} 营业</text>
						</view>
					</view>
				</view>
				<view class="list-right">
					<u-image width="110rpx" height="110rpx" :border-radius="10" :src="getStoreStatus(item)"></u-image>
				</view>
			</view>
			<u-empty :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
			<view style="padding: 20upx;">
				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {getStoreList} from '@/api/store.js'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				noDataText: '暂无数据',
				status: 'loadmore',
				storeList: [],
				// 用户拒绝授权位置信息时默认展示青海西宁位置地图
				currentPosition: {
					lat: '36.636193',
					lng: '101.760521'
				},
				pageNo: 1,
				pageSize: 10,
				total: 0
			}
		},
		onShow() {

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

		computed: {},
		methods: {
			getStoresList() {
				this.status = "loading"
				let lat = this.currentPosition.lat
				let lng = this.currentPosition.lng
				getStoreList({
					lat: '39.848974',
					lng: '116.510229'
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					this.status = "loadmore"
					if (res.status == 200) {
						let list = res.data
						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.distanct && item.distanct.distance ? Math.round(item.distanct.distance / 1000) : ''
						})
						this.storeList = this.storeList.concat(list)
						this.total = res.data.count || 0
					} else {
						this.storeList = []
						this.total = 0
						this.noDataText = res.message
					}
				})
			},
			// 获取网点营业状态
			getStoreStatus(item) {
				switch (item.businessStatus) {
					case 'CLOSED':
						return '/static/img/ygb.png'
						break;
					case 'OPEN':
						return '/static/img/yyz.png'
						break;
					case 'TO_BE_OPENED':
						return '/static/img/dky.png'
						break;
					default:
						break;
				}
			},
			// 进入网点详情
			intoDetail (item) {
				uni.navigateTo({
					url: `/pages/store/storeDetail?id=${item.id}`
				})
			},

		}
	}
</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>
