<template>
	<view class="page" :style="{backgroundColor: bg_color}">
		<loadlogo v-if="!loadlogo" />
		<view class="container" v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="header-bg" :style="{ 'background-image': ' url(' + imageRoot + 'hezuo.jpg)' }" v-if="adv.length == 0"></view>
			<view class="header-bg" v-else>
				<swiper class="swiper" :indicator-dots="true" indicator-active-color="#ffffff" :autoplay="true" :interval="2000" :duration="500">					<swiper-item v-for="(item, index) in adv" :key="index" >						<image :src="item" mode="aspectFill" style="width: 100%; height: 100%;"></image>					</swiper-item>				</swiper>
			</view>
			
			<view class="apply-content">
				<view class="rich-part m-btm40" v-if="choselead == '1'">
					<view class="parse-richs">
						<view class="title-content dis-flex flex-y-center flex-x-center">
							<view class="t-c" style="flex: 0.2;padding-top: 10upx;">
								<image :src="leaduser.avatar" style="width: 90upx;height: 90upx;border-radius: 50%;" mode=""></image>
							</view>
							<view  style="flex: 0.6;">
								<view class="f-30" style="color: #333333;">
									{{Array.isArray(leaduser)?'':leaduser.nickname}}
								</view>
								<view class="f-22" style="color: #999999;padding-top: 10upx;">
									{{Array.isArray(leaduser)?'暂无上级':'当前上级'}}
								</view>
							</view>
							<view  style="flex: 0.2;padding-right: 30upx;">
								<view class="f-22" style="border-radius: 60upx;border: 1upx solid #CCCCCC;padding: 8upx 15upx;" @click="qieck">
									切换<text class="iconfont icon-wangfandijia f-w" style="font-size: 28upx;padding: 0 10upx;color: #000000;"></text>
								</view>
							</view>
						</view>
						<!-- <view class="p-left-right-30"><wx-parse :content="appdetail"></wx-parse></view> -->
					</view>
					<!-- <view class="box-btm-shade"></view> -->
				</view>
				<view class="rich-part m-btm40">
					<view class="parse-rich">
						<view class="title-content dis-flex flex-y-center flex-x-center m-btm40">
							<view class="title-iconLeft title-iconStyle" :style="{ 'background-image': ' url(' + imageRoot + 'titleRight.png)' }"></view>
							<view class="f-30 col-3 m-left-right-20">申请{{ dealer_Info.fxstext }}说明</view>
							<view class="title-iconRight title-iconStyle" :style="{ 'background-image': ' url(' + imageRoot + 'titleLeft.png)' }"></view>
						</view>
						<view class="p-left-right-30">
							<jyf-parser domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article" selectable
							show-with-animation use-anchor  :html="appdetail" ></jyf-parser>
							<!-- <wx-parse :content="appdetail"></wx-parse> -->
							</view>
					</view>
					<view class="box-btm-shade"></view>
				</view>
				<view class="withdraw-msg" v-if="rollstatus !== '3' && (!!list && list.length > 0)">
					<view class="withdrawTop-style p-r"><view class="withdrawTop-style-with"></view></view>
					<view class="withdraw-part">
						<view class="withdraw-content">
							<view class="title-content dis-flex flex-y-center flex-x-center m-btm50">
								<view class="title-iconLeft title-iconStyle" :style="{ 'background-image': ' url(' + imageRoot + 'titleRight.png)' }"></view>
								<view class="f-30 col-3 m-left-right-20">最近提现</view>
								<view class="title-iconRight title-iconStyle" :style="{ 'background-image': ' url(' + imageRoot + 'titleLeft.png)' }"></view>
							</view>
							<view class="scroll">
								<!-- <scroll-view :scroll-y="true" class="scroll-view">
									<view class="withdraw-list">
										<view class="withdraw-item dis-flex flex-y-center flex-x-between border-line border-bottom" v-for="(item,index) in list"
										 :key="index">
											<view class="withdrawerName col-3 f-24">{{item['nickname']}}</view>
											<view class="withdrawerPrice col-9 f-24">申请提现￥{{item['applymoney']}}</view>
										</view>
									</view>
								</scroll-view> -->
								<swiper class="scroll-view" :interval="interval"  :vertical="true" :autoplay="true" :display-multiple-items="7">
									<swiper-item v-for="(item, index) in list" :key="index" class="sizeSwiper">
										<view class="swiper-item uni-bg-red">
											<view class="withdraw-item dis-flex flex-y-center flex-x-between border-line border-bottom">
												<view class="withdrawerName col-3 f-24">{{ item['nickname'] }}</view>
												<view class="withdrawerPrice col-9 f-24">申请提现￥{{ item['applymoney'] }}</view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view>
				</view>
			</view>
			<form @submit="applydealer" report-submit="true">
				<view  style="position: fixed;bottom: 0rpx;width: 86%;margin-left: 7%;border-radius: 8rpx;z-index: 99;height: 120rpx;">
					<view class="confirmApply">
						<view class="Apply-button f-28 col-3 t-c f-w" :class="{ 'isapply-style': is_apply === 1 }">
							{{ is_apply === 0 ? `申请${dealer_Info.fxstext}` : '已申请，请等待审核' }}
							<button formType="submit"></button>
						</view>
						<view class="Apply-buttom-shade" v-if="is_apply === 0"></view>
					</view>
				</view>
			</form>
		</view>
		<follow
			:followShow="followShow"
			:followType="followType"
			:followTitleShow="followTitleShow"
			@clickmask="openQrShow"
			@closeFollowPop="closeFollowPop"
			@closeFollowTitle="closeFollowTitle"
		></follow>
		<PhoneMask :show1="show1" @clickmask1="closePop1"></PhoneMask>
		<getvxphone :show="vxshow" @showFalse="showFalse"></getvxphone>
		<PopManager :show="richText" type="center" @clickmask="richText = false">
			<view class="cklius b-f" :style="{height: (slijuslist.length == 0)?'auto':'65vh'}" >
				<view class="t-c f-30" style="padding: 10upx 0;">
					切换上级
				</view>
				<view class="dis-flex" style="padding-top: 20upx;">
					<view class="dis-flex" style="padding: 20upx;background-color: #F6F6F6;border-radius: 60upx;width: 80%;">
						<text class="iconfont icon-search" style="padding-right: 10upx;color: #999999;line-height: 30upx;"></text><input type="text" v-if="richText" value="" placeholder="请输入上级昵称或MID搜索" placeholder-style="color:#999999;" style="width: 100%;" class="f-24" v-model="searchText" />
					</view>
					<view class="f-26 t-r" style="width: 15%;line-height: 72upx;" @click="search">
						搜索
					</view>
				</view>
				<view  style="padding: 30upx 0;overflow: auto;height: 35vh;" v-if="slijuslist.length > 0">
					 <radio-group @change="radioChange">
					<view class="dis-flex sahco" :style="{backgroundColor: (letradio == item.id)?'#f8f8f8':(leaduser.id == item.id)?'#f8f8f8':'#ffffff'}" v-for="(item,index) in slijuslist" :key="index">
						<view  style="padding-left: 10upx;padding-top: 10upx;">
							<image :src="item.avatar" style="width: 80upx;height: 80upx;border-radius: 50%;" mode="aspectFill"></image>
						</view>
						<view class="f-30" style="line-height: 100upx;padding-left: 20upx;width: 70%;">
							{{item.nickname}}<text style="padding-left: 20upx;">MID:{{item.id}}</text>
						</view>
						<view  style="line-height: 100upx;">
							<radio :value="item.id" :checked="(leaduser.id == item.id)" />
						</view>
					</view>
					</radio-group>
				</view>
				<view  style="width: 100%;" v-if="slijuslist.length > 0">
					<view class="t-c f-34" @click="syiuer" style="width: 100%; height: 80upx;background-color: #FF4444;color: #FFFFFF;border-radius: 60upx;line-height: 80upx;">
						确认
					</view>
					 <view class="t-c f-34" @click="close" style="width: 100%; height: 80upx;background-color: #ffffff;color: #999999;border-radius: 60upx;line-height: 80upx;">
					 	取消
					 </view>
				</view>
			</view>
		</PopManager>
	</view>
</template>
<script>
import App from '@/common/js/app.js';
import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
import Loadlogo from '@/components/template/loadlogo';
import follow from '@/components/template/follow.vue';
import PhoneMask from '@/components/template/PhoneMask';
import PopManager from '@/components/template/PopManager';
import getvxphone from '@/components/template/getVXphone.vue'

export default {
	data() {
		return {
				show1: false,
			followTitleShow: true,
			followShow: false,
			followType: '9',
			appdetail: null, //富文本
			loadlogo: false, //加载
			list: null, //提现列表
			rollstatus: null, // 1=真实数据；2=虚拟数据；3=关闭(为3时不显示提现记录)
			is_apply: null, //申请状态
			user_link: null, // 个人中心链接
			interval: 400,
			drshareInfo: {},
			vxshow:false,
			choselead:'0',
			richText:false,
			stopfoles:false,
			searchText:'',
			slijuslist:[],
			leaduser:{},
			current:null,
			letradio:'',
			dealer_Info:{},
			bg_color:'',
			adv:[]
		};
	},
	onLoad(e) {},
	components: {
		jyfParser,
		Loadlogo,
		follow,
		PhoneMask,
		getvxphone,
		PopManager
	},
	onShow() {
		let pages = getCurrentPages();
		console.log(pages);
		if(pages.length == 1){
			setTimeout(()=>{
				this.getApplydetail();
			},3000)
		}else{
			this.getApplydetail();
		}
		if (!!uni.getStorageSync('TextSubstitution')) {
			this.dealer_Info = uni.getStorageSync('TextSubstitution');
		}
		
	},
	mounted() {
		
		// this.dealershareFc();
	},
	methods: {
		syiuer(){
			console.log(this.slijuslist,this.letradio)
			this.slijuslist.map((item,index)=>{
				if(item.id == this.letradio){
					this.leaduser = item;
					
					this.richText = false;
				}
			})
		},
		close(){
			this.richText = false;
			this.letradio = '';
		},
		radioChange(evt){
			this.letradio = evt.detail.value;
        },
		search(){
			let _this = this;
		App._post_form(
			`&p=distribution&do=choselead&keyword=${_this.searchText}`,
			{},
			res => {
				this.slijuslist = res.data;
				if(this.slijuslist.length == 0){
					uni.showToast({
						title:'未查询到相关上级,请重新输入',
						icon:'none'
					})
				}
			},
			false,
			() => {
				
			}
		);	
		},
		qieck(){
			let _this = this;
			this.richText = true;
		},
		showFalse(){
			console.log('进了showfalse')
			this.vxshow = false;
		},
		closePop1() {
			let _this = this;
			_this.show1 = false;
		},
		closeFollowTitle() {
			let _this = this;
			_this.followTitleShow = false;
		},
		closeFollowPop() {
			let _this = this;
			_this.followShow = false;
		},
		openQrShow() {
			let _this = this;
			_this.followShow = true;
		},
		dealershareFc() {
			let getUserinfo = uni.getStorageSync('userinfo');
			let agencyData = uni.getStorageSync('agencyData');
			App.dealershareInfo(res => {
				let shareInfo = {
					title: res.data.title,
					desc: res.data.desc,
					imageUrl: res.data.img,
					path: 'pages/subPages/dealer/index/index?head_id=' + getUserinfo.mid + '&aid=' + agencyData.aid
				};
				this.drshareInfo = shareInfo;
			});
		},
		getApplydetail() {
			let _this = this;
			App._post_form(
				'&p=distribution&do=applyCondition',
				{},
				res => {
					if (!!uni.getStorageSync('TextSubstitution')) {
						_this.dealer_Info = uni.getStorageSync('TextSubstitution');
					}
					if (res.errno === 0) {
						if (res.data.is_dis === 1) {
							App.navigationTo({
								url: 'pages/subPages/dealer/index/index',
								navType: 'rediRect'
							});
						}
						if (!!res.data.status && res.data.status === '2') {
							App.showError(`申请驳回原因:${res.data.reason}`);
						}
						_this.setData(res.data);
						_this.letradio = res.data.leaduser.id;
					}
				},
				false,
				() => {
					_this.loadlogo = true;
				}
			);
		},
		applydealer(e) {
			let _this = this;
			let data = {
				type: _this.followType
			};
			App._post_form('&do=Follow', data, res => {
				if (res.data.status == '0') {
					uni.showLoading({});
					App.saveFormId(e.detail.formId);
					App._post_form('&p=distribution&do=disApply',
						{
							head_id: uni.getStorageSync('head_id') || '',
							choseleadid:_this.letradio || this.leaduser.id || ''
						},
						res => {
							console.log(res);
							if (res.data.state === 1) {
								App.navigationTo({
									url: 'pages/subPages/dealer/index/index',
									navType: 'rediRect'
								});
							} else {
								if (res.data.state === 2) {
									App.navigationTo({
										url: res.data.url
									});
								}
								if (res.data.state === 3) {
									App.showSuccess('申请成功,请等待审核', () => {
										_this.is_apply = 1;
									});
								}
							}
						},
						fail => {
							console.info('fail',fail.data)
							if (fail.data.data.mustmobile == 1) {
								let _this = this;
								//#ifdef H5
								_this.show1 = true;
								//#endif
								//#ifndef H5
								_this.vxshow = true;
								//#endif
								
								// _this.show1 = true;
							}else if(fail.data.data.state == 4){
								App.navigationTo({
									url: 'pages/mainPages/memberCard/getMembership/getMembership?card=nhave'
								});
							}else{
								App.navigationTo({
									url: 'pages/mainPages/index/index'
								});
							}
						},
						() => {
							uni.hideLoading();
						}
					);
				} else {
					_this.followShow = true;
				}
			});
		},
		onShareAppMessage(e) {
			return this.drshareInfo;
		}
	}
};
</script>

<style lang="scss">
// .sizeSwiper{
// 	height: 70upx !important;
// }
// .page {
// 	background-color: #ff4444;
// }
.page /deep/ {
	.uni-input-placeholder{
		width: 500upx!important;
	}
	.uni-radio-input-checked{
		background-color: #FF4444!important;
		border-color: #FF4444!important;
		height: 35upx;
		width: 35upx;
	}
	.uni-input-wrapper{
		width: 400upx!important;
	}
	uni-button{
		line-height: 2;
	}
}

.sahco{
	padding: 10upx;
	border-radius: 15upx;
}

.cklius{
		padding: 30upx;
		width: 75vw;
		border-radius: 15upx;
		position: relative;
}
	
.container {
	//头部背景图
	.header-bg {
		width: 100%;
		height: 360upx;
		background-size: 100% 360upx;
		background-repeat: no-repeat;
	}

	//富文本内容样式
	.rich-part {
		padding: 0 44upx;

		.parse-rich {
			position: relative;
			padding: 48upx 0;
			background-color: #ffffff;
			border-radius: 20upx;
			z-index: 2;
		}
		
		.parse-richs {
			position: relative;
			padding: 10upx 0;
			background-color: #ffffff;
			border-radius: 20upx;
			z-index: 2;
		}
		.box-btm-shade {
			position: relative;
			border-radius: 20upx;
			background-color: #d10000;
			height: 40upx;
			margin-top: -30upx;
			z-index: 1;
		}
	}

	//最近提现样式
	.withdraw-msg {
		//提现头部样式
		.withdrawTop-style {
			height: 30upx;
			background-color: #d10000;
			margin: 0 30upx;
			border-radius: 16upx;
			position: relative;
			padding: 0 10upx;

			.withdrawTop-style-with {
				position: absolute;
				background-color: #ab0000;
				width: 96%;
				height: 10upx;
				border-radius: 6upx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		//提现内容样式
		.withdraw-part {
			padding: 0 50rpx 200rpx 50rpx;


			.withdraw-content {
				padding: 50upx 30upx 30upx;
				position: relative;
				background-color: #ffffff;
				margin-top: -12upx;
				border-radius: 0 0 10upx 10upx;

				//scroll滑动view
				.scroll-view {
					padding: 20upx;
					height: 400upx;
					background-color: #f6f6f6;
					border-radius: 10upx;

					.withdraw-list {
						margin: 0 30upx;

						.withdraw-item {
							padding: 26upx 0;
						}
					}
				}
			}
		}
	}

	//标题图标左右样式
	.title-content {
		.title-iconStyle {
			width: 64upx;
			height: 44upx;
			background-size: 64upx 44upx;
			background-repeat: no-repeat;
		}
	}
	
	
	
	//确认按钮
	.confirmApply {
		// padding: 20upx 50upx 30upx;
		.isapply-style {
			color: #999999 !important;
			background-color: #f6f6f6 !important;
		}

		.Apply-button {
			position: relative;
			background-color: #ffd74b;
			padding: 25upx 0;
			border-radius: 60upx;
			z-index: 2;
			// border: 2upx solid white;

			button {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				opacity: 0;
			}
		}

		.Apply-buttom-shade {
			position: relative;
			z-index: 1;
			// top: 6upx;
			height: 80upx;
			background-color: #ffae00;
			border-radius: 44upx;
			margin-top: -70upx;
		}
	}
}
</style>
