<template>
	<view>
		<view class="stcon">
			<view v-show="showName" class="textop">
				瑜伽汇
			</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="#00a89b"></uni-icons>
					</view>
				</view>
				<view class="selcon">
					<view v-for="(item,index) in areas" :key="index" >
						<view class="sitem" :class="item.id==shopid?'cur':''">
							<view class="sarr" v-if="item.childList&&item.childList.length>0">
								<uni-icons v-if="item.expanded" type="down" size="20" color="#666" @click="expandDO(index)"></uni-icons>
								<uni-icons v-else type="right" size="20" color="#666" @click="expandDO(index)"></uni-icons>
							</view>
							<view class="sarr" v-else></view>
							<image class="stimg" :src="getimgRemoteFile(item.banner)" mode="aspectFill"  @click="expandDO(index)"></image>
							<view class="sname" @click="expandDO(index)">
								<view class="stxt">
									{{item.storeName}}
								</view>
								<view class="sadr">
									{{item.address}}
								</view>
							</view>
							<view class="selbtn" v-if="item.id==shopid" @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 v-if="item.expanded">
							<view class="sitemcell" v-for="(cell,ii) in item.childList" :key="ii" :class="cell.storeName==shop?'cur':''">
								<image class="stimg" :src="getimgRemoteFile(cell.banner)" mode="aspectFill"></image>
								<view class="sname">
									<view class="stxt">
										{{cell.storeName}}
									</view>
									<view class="sadr">
										{{cell.address}}
									</view>
								</view>
								<view class="selbtn" v-if="cell.id==shopid" @click="changeArea(cell)" >
									<image class="selimg" src="/static/image/sel.png" mode="aspectFill"></image>
								</view>
								<view class="selbtn" v-else @click="changeArea(cell)" >
									<image class="selimg" src="/static/image/nosel.png" mode="aspectFill"></image>
								</view>
							</view>
						</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,
		},
		shopid: {
		  type: String,
		  default: '0',
		},
		shop: {
		  type: String,
		  default: "",
		}
    },
	data() {
		return {
			qr:"../../static/image/qr.png",
			areas: myCache('shoplist'), //选择门店
		};
	},
	methods: {
		getimgRemoteFile(img){
			if(img){
				img=img.split(',')[0];
				return getRemoteFile(img)
			}
			else{
				return require("@/static/image/i1.png")
			}
		},
		// 切换门店
		async changeArea(item){
			uni.showLoading({
				title: '门店切换中...'
			});
			const {data: res} = await uni.$http.post('/api/index/changeStore',{"visitStoreId":item.id});
			if(res&&res.success){
				var data=res.data;
				myCache('myshop',data.storeName);
				myCache('myshopid',data.id);
				this._hide();
				this.$emit("changeArea", data);
			}
			else{
				// 切换门店
				uni.showModal({
					title: '提示',
					content: res.message? res.message : '切换门店失败！请重试！',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {}
				});
			}
		},
		_show() {
			this.areas= myCache('shoplist');
			this.$forceUpdate();
			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
			});
		},
		expandDO(index){
			console.log(index)
			if(this.areas[index].expanded){
				this.areas[index].expanded=false;
				this.$forceUpdate();
			}
			else{
				this.areas[index].expanded=true;
				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:#00a89b;
		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: rgba(228, 249, 247, 0.8);
		}
		.sitem {
			display: flex;
			flex-direction: row;
			background-color: #FFFFFF;
			padding: 20rpx 0 20rpx 10rpx;
			margin: 10rpx 30rpx 0 30rpx;
			align-items: center;
			.sarr{
				width: 30rpx;
				margin-right: 10rpx;
			}
			.stimg{
				width: 80rpx;
				height: 80rpx;
				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;
				}
			}
			 
		}
		.sitemcell.cur{
			background-color: rgba(228, 249, 247, 0.6);
		}
		.sitemcell {
			display: flex;
			flex-direction: row;
			background-color: #F5F5F5;
			padding: 20rpx 0 20rpx 12rpx;
			margin: 0 30rpx 0 70rpx;
			align-items: center;
			.stimg{
				width: 80rpx;
				height: 80rpx;
				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>
 