<template>
	<view>
		<view class="stcon">
			<view v-show="showName" class="textop">
				瑜伽APP
			</view>
			<view v-show="showQR" class="qrimg" @tap="ViewImage()">
				<image :src="qr" mode="aspectFit"></image>
			</view>
			<view class="site" @click="_show">
				<view class="sitearr">
					<image class="simg" src="/static/image/down.png"></image>
				</view>
				<view class="sitetxt">{{shop}}</view>
			</view>
		</view>
		<!-- 选择门店 -->
		<uni-popup ref="share" type="share">
			<view class="allcon">
				<view class="hcon">
					<view class="htitle">附近有{{areas.length}}家门店可提供服务</view>
					<view class="hinfo">(请点击选择服务门店)</view>
					<view class="rclose" @tap="_cancel">
						<uni-icons type="close" size="30" color="#8b9565"></uni-icons>
					</view>
				</view>
				<view class="selcon">
					<view class="sitem" v-for="(item,index) in areas" :key="index" :class="item.storeName==shop?'cur':''">
						<view class="stimg">
							<image class="stimg" :src="getimgRemoteFile(item.banner)" mode="aspectFill"></image>
						</view>
						<view class="sname">
							<view class="stxt">
								{{item.storeName}}
							</view>
							<view class="sadr">
								{{item.address}}
							</view>
						</view>
						<view class="selbtn" v-if="item.storeName==shop" @click="changeArea(item)" >
							<image class="selimg" src="/static/image/sel.png" mode="aspectFill"></image>
						</view>
						<view class="selbtn" v-else @click="changeArea(item)" >
							<image class="selimg" src="/static/image/nosel.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	
	</view>
</template>

<script>
import { myCache,getRemoteFile,ifnonet } from '../../utils/utils.js';
export default {
    props: {
		showName: {
		  type: Boolean,
		  default: true,
		},
		showQR: {
		  type: Boolean,
		  default: false,
		},
		shop: {
		  type: String,
		  default: "",
		}
    },
	data() {
		return {
			qr:"../../static/image/qr.png",
			areas:myCache('shoplist'), //选择门店
			// [
			// 	{
			// 		value_name:'淮海中路店',
			// 		value_address:'淮海中路店198号',
			// 		value_img:'',
			// 		value_value:'1',
			// 		value_qr:"../../static/image/qr.png",
			// 	},
			// ], //选择门店
		};
	},
	mounted() {
		console.log('mounted')
		this.loadshop();
	},
	methods: {
		getimgRemoteFile(img){
			if(img){
				img=img.split(',')[0];
				return getRemoteFile(img)
			}
			else{
				return require("@/static/image/i1.png")
			}
		},
		// 切换门店
		changeArea(item){
			myCache('myshop',item.storeName);
			myCache('myshopid',item.id);
			this._hide();
			this.$emit("changeArea", item);
		},
		_show() {
			this.$refs.share.open();
		},
		_hide() {
			this.$refs.share.close();
		},
		_cancel() {
			this._hide();
			this.$emit("cancel", "");
		},
		ViewImage() {
			var imgList=[this.qr];
			uni.previewImage({
				urls: imgList,
				current:0
			});
		},
		async loadshop(){
			// 获取门店
			const {data: res} = await uni.$http.post('/api/index/getStores');
			if(res.data&&res.data.length>0){
				this.areas=res.data;
				// console.log("areas",this.areas)
				myCache('shoplist',res.data);
				this.$forceUpdate();
			}
		},
	}
}
</script>

<style lang="scss" scoped>
	.stcon{
		display: flex;
		flex-direction: row;
		height: 60rpx;
		padding: 10rpx 0;
		justify-content: center;
		align-items: center;
	}
	.textop{
		display: flex;
		font-size: 40rpx;
		font-weight: 600;
		color:#000000;
		margin-left: 20rpx;
	}
	.qrimg{
		display: flex;
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		align-items: center;
		image{
			width: 100%;
			height: 100px;
		}
	}
	.site{
		display: flex;
		flex: 1;
		flex-direction: row;
		margin-left: 20rpx;
		align-items: center;
	}
	.sitearr{
		height: 48rpx;
		width: 48rpx;
		border-radius: 50rpx;
		background-color: #dcdfd1;
		display: flex;
		align-items: center;
		justify-content: center;
		.simg{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.sitetxt{
		font-size: 32rpx;
		font-weight: 600;
		color:#8b9565;
		margin-left: 12rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.tline{
		width: 1rpx;
		background-color: #000000;
		height: 30rpx;
		margin: auto 20rpx;
	}
	// 弹框选择门店
	.allcon{
		width: 90%;
		height: calc(100vh - 360rpx);
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 360rpx - var(--window-top) - var(--window-bottom));
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 360rpx);
		/* #endif */
		position: relative;
		overflow: hidden;
		background-color: #FFFFFF;
		margin: 40rpx 5% 240rpx 5%;
		border-radius: 50rpx;
	}
	.rclose{
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
	.hcon{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding:40rpx 0 30rpx;
		.htitle{
			font-size: 32rpx;
			font-weight: 600;
			letter-spacing: 3rpx;
		}
		.hinfo{
			font-size: 26rpx;
			color: #626464;
		}
	}
	.selcon{
		padding: 0;
		position: relative;
		display: block;
		overflow-y: auto;
		height: calc(100vh - var(--window-top) - 440rpx);
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - var(--window-top) - 440rpx);
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 440rpx);
		/* #endif */
		.lineb{
			height: 50rpx;
		}
		.sitem.cur{
			background-color: #f3f4ef;
		}
		.sitem {
			display: flex;
			flex-direction: row;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #eeeeee;
			padding: 30rpx 0;
			margin: 0 30rpx;
			.stimg{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				margin-left: 10rpx;
			}
			.selbtn{
				width: 60rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx; 
				border-radius: 6rpx;
				font-size: 26rpx;
				color: #999;
				margin-top: 16rpx;
			}
			.selimg{
				width: 100%;
				height: 100%;
			}
			.sname{
				display: flex;
				flex: 1;
				justify-content: flex-start;
				flex-direction: column;
				padding: 10rpx 10rpx 0 10rpx;
				margin-left: 12rpx;
				.stxt{
					font-size: 28rpx;
					font-weight: 600;
					color: rgb(29, 29, 29);
				}
				.sadr{
					font-size: 26rpx;
					color: #626464;
					margin-top: 6rpx;
				}
			}
			 
		}
	}
</style>
 