<template>
	<scroll-view
		
		 :scroll-y="true"
		@scroll="scrollHandler"
		@scrolltoupper="scrollTopHandler"
		style="min-height: 100vh;">
		<view class="microshopStyle" v-if="loading==false">
			<view class="headStatus" :style="[headStyle]" >
			  <view class="arrow" @click="redirectPrev">
				<u-icon name="arrow-left" size="48" color="#000000"></u-icon>
			  </view>
			  <view class="title" style="color: #000000;">{{pageTitle}}</view>
			  <view class="arrow" ></view>
			</view>
		</view>
		<view class="microshopStyle" v-if="loading">
			<view
			  class="headStatus"
			  v-if="scrollTop > 50 "
			  :style="[
			    headStyle,
			    {
			      zIndex: scrollTop < 10 ? 'unset' : 2,
			      opacity: scrollTop < 10 ? '100' : scrollTop,
				  background:'#FFF'
			    },
			  ]"
			>
			  <view class="arrow" @click="redirectPrev">
			    <u-icon name="arrow-left" size="48" color="#000"></u-icon>
			  </view>
			  <view class="title" style="color: #000000;" v-if="scrollTop > 50">{{pageTitle}}</view>
			  <view class="arrow"></view>
			</view>
			<view class="microshopbox" v-if="applyState ==0 || AuditStatus!=2 " >
				<view class="headStatus" :style="[headStyle]" >
				  <view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
				  </view>
				  <view class="title">{{pageTitle}}</view>
				  <view class="arrow"></view>
				</view>
				<view class="applyCont">
					<view class="applybox">
						<view class="applyitem">
							<image src="../../../static/images/name.png" style="width: 17px;height: 18px;" mode="widthFix"></image>
							<input class="uni-input" style="margin-left: 15px;" v-model="msg.Name" placeholder="请输入店名" />
						</view>
						<view class='applyitem'>
							<u-checkbox-group>
							  <u-checkbox v-model="checked" shape="circle" :active-color="mainColor" label-size='28' 
							    >我已阅读并同意</u-checkbox
							  >
							</u-checkbox-group>
							<Text style='font-size: 14px;color: #FF4048;' @click='showagreement'>《赞羊协议》</Text>
						</view>
						
						<view  @click="apply" class="apply" v-if="AuditStatus !=1">
							<Text >申请开店</Text>
						</view>
						<view   class="apply" style="background:#ababab ;" v-if="AuditStatus ==1">
							<Text >申请开店</Text>
						</view>
						
					</view>
				</view>
			</view>
			
			<view style="width: 100%;height: 100%;" v-if="AuditStatus==2">
				<view class="sharebox_top" :style="{ 'background-image': 'url(' + (SmallShops.CustomModel.HeadBackImage ? SmallShops.CustomModel.HeadBackImage : '') + ')', }">
					<view class="headStatus2" :style="[headStyle]" >
						  <view class="arrow" @click="redirectPrev">
							<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
						  </view>
						  <view class="title">{{pageTitle}}</view>
						  <view class="arrow"></view>
					</view>
					<view class="sharebox_top_t">
						<view class="top_t_l">
							
							<u-avatar :src="SmallShops.UserInfo.Logo" size="130"></u-avatar>
							<view style="display: flex;flex-direction: column;color: #fff;margin-left: 16px;">
								<view style="display: flex;flex-direction: row;align-items: center">
									<Text style='font-size: 18px;max-width: 150px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;'>
										{{SmallShops.UserInfo.UserName}}
									</Text>
									<view class="sj_style" style="" @click="goEdit('/pages/microShop/shopSettings')">
										<image src="../../../static/images/jinbo.png" style="width: 13px;height: 13px;"></image>
									</view>
								</view>
								<Text  style='max-width:250px;font-size: 12px;margin-top: 5px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;'>
									{{SmallShops.UserInfo.Notice}}
								</Text>
							</view>	
						</view>
					</view>
					
					<view class="sharebox_topc">
						<view class="center_item" style="font-size:  12px;color: #FFFFFF;justify-content: space-between;">
							<Text>{{SmallShops.CustomModel.CommissionWithdrawnName}}</Text>
							<Text>{{SmallShops.UserInfo.TXCommission!=null ?SmallShops.UserInfo.TXCommission:0}}元</Text>
						</view>
						<view style="width: 2px;height: 25px;background: #FFFFFF;justify-content: space-between;"></view>
						<view class="center_item"  style="font-size:  12px;color: #FFFFFF;">
							<Text >{{SmallShops.CustomModel.OutstandingCommissionName}}</Text>
							<Text>{{SmallShops.UserInfo.WJSCommission!=null ?SmallShops.UserInfo.WJSCommission:0}}元</Text>
						</view>
					</view>
					
				</view>
				<view class="sharebox_c">
					<view style="display: flex;flex-direction: row;align-items: center;height: 55px;margin-left: -30px;">
						<image src="../../../static/images/yue.png" style="width: 25px;height: auto;" mode ='widthFix'></image>
						<view style="display: flex;flex-direction: column;margin-left: 17px;height: 100%;justify-content: space-between;">
							<Text style='font-size: 22px;'>{{SmallShops.UserInfo.CommissionWithdrawal!=null ?SmallShops.UserInfo.CommissionWithdrawal:0}} <Text  style='font-size: 14px;'>元</Text> </Text>
							<text>{{SmallShops.CustomModel.WithdrawableName}}</text>
						</view>
					</view>
					<view  style="width: 60px;height: 30px;border-radius: 15px;color: #fff; margin-right: -30px;background-image: linear-gradient( to right,#FF8585,#ED4353);text-align: center;line-height: 30px;"
						@click="goUrl('/pages/microShop/wdCase')"
					>
						<Text>{{SmallShops.CustomModel.WithdrawalText}}</Text>
					</view>
				</view>
				<view class="sharebox_menus" >
					<!-- 店铺订单 -->
					<view class="menus_item" @click="goUrl('/pages/microShop/wdOrder')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.SmallShopOrderImage" style="width: 14px;height: auto;" mode='widthFix'></image>	
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.SmallShopOrderName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{SmallShops.UserInfo.OrderCommission!=null ?SmallShops.UserInfo.OrderCommission:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">元</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<!-- 提现明细 -->
					<view class="menus_item" @click="goUrl('/pages/microShop/wdWithdrawal')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.WithdrawalDetailImage" style="width: 14px;height: auto;" mode='widthFix'></image>	
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.WithdrawalDetailName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{SmallShops.UserInfo.RemitMoney!=null ?SmallShops.UserInfo.RemitMoney:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">元</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<!-- 我的客户 -->
					<view class="menus_item" @click="goUrl('/pages/microShop/myClients/myClients')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.MyCustomerImage" style="width: 14px;height: auto;" mode='widthFix'></image>	
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.MyCustomerName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{SmallShops.UserInfo.ReferralsNum!=null ?SmallShops.UserInfo.ReferralsNum:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">人</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					
					
				<!-- 店铺二维码 -->
					<view class="menus_item" @click="goUrl()">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.SmallShopQRCodeImage" style="width: 14px;height: auto;" mode='widthFix'></image>	
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.SmallShopQRCodeName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
				</view>
				<!-- 店铺设置 -->
				<view class="sharebox_menus">
					<view class="menus_item" @click="goUrl('/pages/microShop/storeManagement/storeManagement')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.SmallShopSetUpImage" style="width: 14px;height: auto;" mode='widthFix'></image>	
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.SmallShopSetUpName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
				</view>
				<!-- 直播设置 -->
				<view class="sharebox_menus">
					<view class="menus_item" @click="goUrl()">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.LiveImage" style="width: 14px;height: auto;" mode='widthFix'></image>	
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.LiveName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
				</view>
				<!-- 底部预留空间 -->
				<view style="width: 100%;height: 30px;background: #f3f4f6;"></view>
			</view>
			
			
			
			
			
			
			<view class="agreementbox" v-if='isshowagreement==true || isshowagreement_t == true'></view>
			<view class="agreementbox_t" v-if='isshowagreement==true'>
				<view class="agreement_b">
					<Text style='height: 40px;line-height: 40px;'>分销申请协议</Text>
					<!-- <view>TODO内容</view> -->
					<view style="width: 100%;height: 760rpx;padding: 20rpx;">
						<Text>{{shopBasics.model.ApplyAgreement}}</Text>
					</view>
					<view class="agreement_bottom" :style="{background:mainColor}" @click="read">
						<Text style='color: #fff;'>我已阅读</Text>
					</view>
				</view>
			</view>
			<view class="agreementbox_t" v-if='isshowagreement_t==true'>
				<view class="tips_state">
					<view style="color: #111111;font-size: 13px;margin-top: 306rpx;">{{AuditStatus ==1?'已提交，审核中':'已拒绝，重新申请'}} </view>
					<view  @click="isshowagreement_t = false" class="apply"  style="width: 80%;margin-top: 30px;">
						<Text >知道了</Text>
					</view>
				</view>
			</view>
		
	</view>
	<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'goback'></auth>
	</scroll-view>
</template>

<script>
	import auth from "../../../components/auth/index.vue";
	export default {
		components:{
			auth,
		},
		data() {
			return {
				loading:false,
				pageTitle:'开店申请',
				showAuth:false,
				nav:0,
				headStyle:{},
				msg:{
					Name:'',
				},
				
				checked:false,
				isshowagreement:false,
				isshowagreement_t:false,
				mainColor:'',
				showAuth:false,
				u:{},
				applyState:0,//id==0  ，
				AuditStatus:0,//审核状态  1审核中  2通过  3拒绝
				ApplyInfo:{},
				shopBasics:{},
				SmallShops:{},
				scrollTop:0,
			}
		},
		created() {
			this.nav = uni.getMenuButtonBoundingClientRect().top;
			 this.mainColor = this.$uiConfig.mainColor;
			this.headStyle.paddingTop = this.nav +'px';
			
		},
		onLoad(){
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}else{
				this.init()
				
			}
		},
		methods: {
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  // this.showAuth=false;
			  this.init()
			},
			goback(){
				uni.navigateBack()
			},
			scrollHandler(e) {
			  this.scrollTop = e.detail.scrollTop;
			  //this.$forceUpdate();
			},
			scrollTopHandler() {
			  this.scrollTop = 0;
			},
			showagreement(){
				this.isshowagreement = true
			},
			read(){
				this.checked = true;
				this.isshowagreement = false
			},
			init(){
				uni.showLoading({
				    title: '加载中...'
				});
									 
				uni.showNavigationBarLoading();
					this.request2(
					 {
					 	url: '/api/AppletUser/GetSmallShopsApplyInfo',
					 	data: {}
					 },	
				  (res) => {
					
					this.getMicroShopBasics()
					this.applyState = res.data.Id;
					this.AuditStatus = res.data.AuditStatus;
					this.ApplyInfo = res.data;
					if(this.AuditStatus ==1 || this.AuditStatus ==3){
						this.isshowagreement_t = true
					}
					
				  }
				);
			},
			getMicroShopBasics(){ //获取基础设置数据
					this.request2(
					 {
					 	url: '/api/AppletUser/GetMicroShopBasics',
					 	data: {}
					 },	
				  (res) => {
					uni.hideNavigationBarLoading()
					uni.hideLoading();
					this.loading = true,//接口掉用完之后才显示页面
					this.shopBasics = res.data;
					if(this.AuditStatus ==2){
						this.getSmallShopsCenter()//获取微店信息
						this.pageTitle = '商店中心'
					}
					
				  }
				);
			},
			getSmallShopsCenter(){
				this.request2(
					 {
					 	url: '/api/AppletUser/GetSmallShopsCenter',
					 	data: {}
					 },	
					  (res) => {
							this.SmallShops = res.data
					  }
					);
			},
			apply(){
				let that = this
				uni.requestSubscribeMessage({
				  tmplIds: that.shopBasics.template_message_list,
				  complete (res) { 
					  if(that.checked==false){
					  	uni.showToast({
					  		title: "请先查看协议并同意",
					  		icon: "none"
					  	});
					  	return false
					  }
					  if(that.msg.Name==''){
					  	uni.showToast({
					  		title: "请输入店名",
					  		icon: "none"
					  	});
					  	return false
					  }
					  uni.showLoading({
					      title: '申请中...'
					  });
					 
					  that.request2(
					   {
					  	url: '/api/AppletUser/ApplySmallShopsInfo',
					  	data: that.msg
					   },	
					    (res) => {
							uni.hideLoading();
							this.init()
					    }
					  );
				  }
				})
				
			},
			goUrl(url){
			  console.log(url)
				  uni.navigateTo({
					url: url
				  });
			},
			goEdit(url){
				
				let data = encodeURIComponent(JSON.stringify(this.SmallShops.UserInfo)) 
				uni.navigateTo({
						url: url+'?data='+data
				});
				},
			redirectPrev() {
			  if (this.prevPage != "") {
			    uni.navigateBack({
			      delta: 1,
			    });
			  }
			},
		}
	}
</script>

<style>
.microshopStyle{
	width: 100%;
	height: 100vh;
	background: #f3f4f6;
}
.microshopStyle .microshopbox{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1597233144000_702.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.microshopStyle .headStatus {
	  overflow: hidden;
	  position: relative;
	  width: 140vw;
	  padding-right: 40vw;
	  padding-bottom: 10px;
	  position: fixed;
	  left: 0;
	  right: 0;
	  top: 0;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: space-between;
	 
	}
	.microshopStyle .headStatus2{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
		color: #FFFFFF;
	}
	.microshopStyle .arrow {
	  height: 24px;
	  margin: 5px 10px;
	  width: 24px;
	}
	.microshopStyle .headStatus .title {
	  font-size: 16px;
	  color: #FFF;
	  line-height: 34px;
	}
	.microshopStyle .applyCont{
		width: 100%;
		margin-top: 60%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.microshopStyle .applybox{
		width: 74%;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.microshopStyle .applyitem{
		width: 100%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #E2E2E2;
		margin-top: 30px;
	}
	.microshopStyle .apply{
		width: 100%;
		height: 45px;
		border-radius: 22.5px;
		background: #FF4048;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #FFFFFF;
		margin-top: 60px;
	}
	.microshopStyle .agreementbox{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #333333;
		opacity: 0.3;
		z-index: 888;
	}
	.microshopStyle .agreementbox_t{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.microshopStyle .agreementbox_t .agreement_b{
		width:80% ;
		border-radius: 10px;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}
	.microshopStyle .agreementbox_t .agreement_bottom{
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.microshopStyle .tips_state{
		width: 509rpx;
		height: 554rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(../../../static/images/wdtzbg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		
	}
	.microshopStyle .sharebox_top{
		width: 100%;
		/* padding: 10px; */
		height: 242px;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.microshopStyle .sharebox_top .sharebox_top_nav{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 0 10px;
	}
	.microshopStyle .sharebox_top .sharebox_top_t{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		/* padding: 5px 0; */
		margin-top: 20px;
	}
	.microshopStyle .sharebox_top .sharebox_top_t .top_t_l{
		margin-left: 30px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		
	}
	.microshopStyle  .sharebox_topc{
		width: 94%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 20px;
		margin-top: 18px;
	}
	.microshopStyle .center_item{
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.microshopStyle .sharebox_c{
		width: 94%;
		margin-left: 3%;
		height: 99px;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin-top: -15px;
		
	}
	.microshopStyle .sharebox_menus{
		width: 94%;
		margin-left: 3%;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* padding: 10px 0; */
		margin-top: 10px;
	}
	.microshopStyle .sharebox_menus .menus_item{
		width: 100%;
		height: 45px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
	}
	 .microshopStyle .sharebox_menus .menus_item .item_text{
		font-size: 13px;
		margin: 5px 0;
	}
	.microshopStyle .sj_style{
		
		margin-left: 20px;
	}
</style>
