 <template>
 	<view class="dealer-grade">
 		<view class="page-bg"></view>
 		<view class="header" :style="'margin-top: ' + statusBarHeight + 'px'"></view>
 		<view class="main-header">
 			<image class="bg-image" :src="bgImage" mode="scaleToFill"></image>
 			<!-- 用户信息 -->
 		</view>
 		<view class="main">
 			<!-- 表单信息 -->
 			<u--form :model="form" ref="uForm">
 				<view class="buy-user">
 					<view class="sub-name">{{ plan.subName }}</view>
 					<u-grid :border="false" col="3">
 						<u-grid-item v-for="(item,index) in plan.icons" :key="index">
 							<view class="demo-layout bg-purple-light">
 								<view class="icon">
 									<image :src="item.icon"></image>
 								</view>
 								<text class="name">{{ item.name }}</text>
 							</view>
 						</u-grid-item>
 					</u-grid>
 				</view>
 				<u-gap height="3"></u-gap>
 				<!-- 会员套餐 -->
 				<view class="buy-user" v-if="plan.price">
 					<view class="buy">
 						<view class="title">开通{{ plan.name }}</view>
 						<view class="total-price">{{ plan.price[0].name}}</view>
 					</view>
 				</view>
 				<view class="xieyi">
 					<u-icon name="checkbox-mark"></u-icon>
 					购买代表同意爱尚家网
 					<text @click="$push('pages/article/detail/detail?id=117')">《品牌合作协议》</text>
 				</view>
 			</u--form>
 		</view>
 		<view class="cart">
 			<view class="cart-info">
 				<view class="btn-wrapper">
 					<u-button text="立即开通" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
 						shape="circle" @click="onBuy()"></u-button>
 				</view>
 			</view>
 		</view>

 		<!-- 地址选择器 -->
 		<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
 		<!-- 选择店铺 -->
 		<u-picker :show="showMerchant" :columns="merchantList" @confirm="confirmMerchant"
 			@cancel="showMerchant = false"></u-picker>
 	</view>

 </template>

 <script>
 	import store from '@/store/index.js'
 	import storage from '@/utils/storage'
 	import * as UserPlanApi from '@/api/love-user-plan.js'
 	import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
 	import * as UserPlanEquityApi from '@/api/love-user-plan-equity.js'
 	import * as MerchantApi from '@/api/merchant.js'
 	import {
 		getUser,
 		updateUser
 	} from '@/api/user.js'
 	import {
 		username
 	} from '@/config.js';
 	import {
 		getMobile
 	} from '@/utils/util.js'
 	import http from '@/api'

 	const userId = uni.getStorageSync('userId')

 	export default {
 		data() {
 			return {
 				storeVn: 0, // 当前待升级等级
				planId: 0,
 				plan: {},
				subPayPrice: 0, // 升级只需补差价
 				loading: true,
 				merchantList: [],
 				bgImage: 'data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.36308349769888226%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220.24%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23160028%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E',
 				statusBarHeight: 25,
 				// 是否已登录
 				isLogin: false,
 				disabled: false,
 				showMerchant: false,
 				// 系统设置
 				form: {
 					userId,
 					priceId: 0,
 					planId: 0,
 					area: '',
 					merchantName: ''
 				},
 				totalPrice: 0.00
 			}
 		},
 		onLoad(options) {
			this.planId = options.id
 			this.getUserInfo()
 			this.getMerchant()
 			this.getStroeVn()
 			// 设置navbar标题、颜色options
 			uni.setNavigationBarColor({
 				frontColor: '#ffffff',
 				backgroundColor: '#101010'
 			})
 		},
 		onShow() {},
 		methods: {
 			// 跳转页面
 			navTo(url) {
 				this.$navTo(url)
 			},
 			getUserInfo() {
 				const {
 					form
 				} = this
 				const app = this
 				uni.getSystemInfo({
 					success(data) {
 						if (data) {
 							app.statusBarHeight = data.statusBarHeight + 50
 						}
 					}
 				})
 				getUser().then(res => {
 					if (res.code == 0 && res.data.username != 'www') {
 						if (res.data) {
 							console.log("res.data.phone: ", res.data.phone);
 							app.form.realName = res.data.realName
 							app.form.phone = res.data.phone
 						}
 						app.isLogin = true
 					} else {
 						app.isLogin = false
 						app.$push('pages/login/index')
 					}
 				})

 			},
 			getMerchant() {
 				const app = this
 				MerchantApi.listMerchant().then(result => {
 					let arr = []
 					result.data.map(d => {
 						console.log("d.merchantName: ", d.merchantName);
 						arr.push(d.merchantName)
 					})
 					app.merchantList.push(arr)
 				})

 			},
 			getStroeVn() {
 				const app = this
 				const {
 					userId
 				} = app.form
 				UserPlanEquityApi.listUserPlanEquity({
 					userId
 				}).then(result => {
 					const list = result.data
 					// 线上门店
 					const storeV1 = list.filter(d => d.planId == 19)
					if(storeV1.length > 0){
						// 升级差价
						app.subPayPrice = 4999
					}
 					if (storeV1.length == 0) {
 						app.storeVn = 19
 						storage.set('storeVn', 19)
 						app.getUserPlan()
 						return false
 					}
 					// 门店合伙人
 					const storeV2 = list.filter(d => d.planId == 20)
 					if (storeV2.length == 0) {
 						app.storeVn = 20
 						storage.set('storeVn', 20)
 						app.getUserPlan()
 						return false
 					}
 					// 门店运营总监
 					const storeV3 = list.filter(d => d.planId == 21)
 					if (storeV3.length == 0) {
 						app.storeVn = 21
 						storage.set('storeVn', 21)
 						app.getUserPlan()
 						return false
 					}
 					// 实体店
 					const storeV4 = list.filter(d => d.planId == 22)
 					if (storeV4.length == 0) {
 						app.storeVn = 22
 						storage.set('storeVn', 22)
 						app.getUserPlan()
 						return false
 					}
 					// 旗舰店
 					const storeV5 = list.filter(d => d.planId == 23)
 					if (storeV5.length == 0) {
 						app.storeVn = 23
 						storage.set('storeVn', 23)
 						app.getUserPlan()
 						return false
 					}
 					// 区县级运营中心
 					const storeV6 = list.filter(d => d.planId == 24)
 					if (storeV6.length == 0) {
 						app.storeVn = 24
 						storage.set('storeVn', 24)
 						app.getUserPlan()
 						return false
 					}
 					// 市级运营中心
 					const storeV7 = list.filter(d => d.planId == 25)
 					if (storeV7.length == 0) {
 						app.storeVn = 25
 						storage.set('storeVn', 25)
 						app.getUserPlan()
 						return false
 					}
 					// 省级运营中心
 					const storeV8 = list.filter(d => d.planId == 26)
 					if (storeV8.length == 0) {
 						app.storeVn = 26
 						storage.set('storeVn', 26)
 						app.getUserPlan()
 						return false
 					}
 				})
 				// app.loading = false
 			},
 			getUserPlan() {
 				const app = this
 				const {
 					storeVn,
					planId
 				} = this

 				UserPlanApi.getUserPlan(planId > 0 ? planId : storeVn).then(res => {
 					app.plan = res.data
 					app.form.priceId = res.data.price[0].id
 					uni.setNavigationBarTitle({
 						title: res.data.name
 					})
 				})
 			},
 			onArea() {
 				this.$refs.area.open()
 			},
 			onMerchant() {
 				this.showMerchant = true
 			},
 			confirmMerchant(e) {
 				this.form.merchantName = e.value[0]
 				this.showMerchant = false
 			},
 			//地址选择成功
 			chooseSuccess(e) {
 				const app = this
 				const data = e.value
 				if (data) {
 					app.form.area = `${data[0].label} ${data[1].label} ${data[2].label}`
 					app.form.province = data[0].label
 					app.form.city = data[1].label
 					app.form.region = data[2].label
 				}
 			},
 			// 跳转到服务页面
 			handleService({
 				url
 			}) {
 				if (url.slice(0, 4) == 'http') {
 					wx.openCustomerServiceChat({
 						extInfo: {
 							url: 'https://work.weixin.qq.com/kfid/kfc1693a8d29b84bc5e'
 						},
 						corpId: 'ww1c3f872ba0a39228',
 						success(res) {}
 					})
 					return;
 				}
 				if (!this.isLogin) {
 					return false;
 				}
 				console.log("url: ", url);
 				this.$navTo(url)
 			},
 			// 显示toast信息
 			showToast(title, duration = 2000) {
 				this.$refs.uToast.show({
 					title,
 					duration
 				})
 			},

 			handleLogout() {
 				// http.setConfig((config) => {
 				// 	config.header = {};
 				//     config.header = {
 				//     	AppId: appId,
 				//     	tenantId: tenantId
 				//     };
 				//     return config
 				// })
 				// uni.clearStorage()
 				// uni.clearStorageSync()
 				uni.redirectTo({
 					url: '/pages/login/index'
 				})
 			},
 			onBuy() {
 				const app = this
 				const {
 					form,
					subPayPrice
 				} = this
				console.log("this.plan: ",this.plan);
				const planId = this.plan.planId
				const priceId = this.plan.price[0].id
 				// app.disabled = true
 				return this.$push('sub_pages/checkout/checkout',{planId,subPayPrice})

 				// UserPlanLogApi.addUserPlanLog(form).then(res => {

 				// 	const orderInfo = res.data
 				// 	// 调起微信支付
 				// 	uni.requestPayment({
 				// 		provider: orderInfo.provider, // 服务提供商
 				// 		timeStamp: orderInfo.timeStamp, // 时间戳
 				// 		nonceStr: orderInfo.nonceStr, // 随机字符串
 				// 		package: orderInfo.package,
 				// 		signType: orderInfo.signType, // 签名算法
 				// 		paySign: orderInfo.paySign, // 签名
 				// 		success: function(res) {
 				// 			// 业务逻辑。。。
 				// 			app.$success('支付成功')
 				// 			setTimeout(function() {
 				// 				app.showEdit = false
 				// 				app.disabled = false
 				// 				uni.navigateBack()
 				// 			}, 1500);
 				// 		},
 				// 		fail: function(err) {
 				// 			console.log('支付失败', err);
 				// 			app.disabled = false
 				// 		}
 				// 	});
 				// })
 			},

 			onApply() {
 				if (!this.isLogin) {
 					return false;
 				}
 				this.$navTo('pages/wallet/balance/log')
 			}
 		}
 	}
 </script>

 <style lang="scss" scoped>
 	.dealer-grade {
 		background-color: #f3f3f3;
 		height: 100vh;
 	}

 	.page-bg {
 		width: 750rpx;
		height: calc(100rpx + var(--status-bar-height));
 		display: block;
 		background-color: #101010;
 		position: absolute;
 		left: 0;
 		top: 0;
 		z-index: -100;
 	}

 	// 页面头部
 	.main-header {
 		// background-color: #FBF7EF;
 		position: fixed;
 		top: 0;
 		width: 100%;
 		height: 360rpx;
 		background-size: 100% 100%;
 		overflow: hidden;
 		display: flex;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;

 		.bg-image {
 			position: absolute;
 			top: 0;
 			left: 0;
 			width: 100%;
 			height: 100%;
 			z-index: 0;
 		}
 	}

 	.main {
 		position: fixed;
 		top: 80rpx;
 		left: 25rpx;
 		z-index: 999;

 		// 开通会员
 		.buy-user {
 			display: flex;
 			flex-direction: column;
 			margin: 20rpx auto 20rpx auto;
 			padding: 20rpx 0;
 			width: 700rpx;
 			box-shadow: 0 1rpx 5rpx 0px #eaebec;
 			border-radius: 24rpx;
 			background: #fff;

 			.sub-name {
 				text-align: center;
 				line-height: 3rem;
 			}

 			.item-equity {}

 			.buy {
 				padding: 0 30rpx;
 				display: flex;
 				justify-content: space-between;
 			}

 			.demo-layout {
 				background-color: #ffffff;
 				margin: auto;
 				width: 200rpx;
 				color: #4c4c4c;
 				padding: 24rpx;
 				border-radius: 15rpx;
 				text-align: center;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				align-items: center;
 				font-size: 25rpx;

 				.icon {
 					// background-color: gold;
 					width: 80rpx;
 					height: 80rpx;
 					border-radius: 80rpx;
 					display: flex;
 					justify-content: center;
 					align-items: center;

 					image {
 						width: 80rpx;
 						height: 80rpx;
 					}
 				}

 				.name {
 					line-height: 2rem;
 				}
 			}
 		}

 	}

 	// 退出登录
 	.my-logout {
 		display: flex;
 		justify-content: center;
 		margin-top: 50rpx;

 		.logout-btn {
 			width: 400rpx;
 			margin: 0 auto;
 			font-size: 28rpx;
 			color: #616161;
 			border-radius: 20rpx;
 			border: 1px solid #dcdcdc;
 			padding: 16rpx 0;
 			text-align: center;
 		}
 	}

 	.price-box {
 		padding: 30rpx;
 		display: flex;
 		justify-content: space-between;

 		.info {
 			display: flex;

 			image {
 				width: 120rpx;
 				height: 120rpx;
 				border-radius: 20rpx;
 			}

 			.content {
 				width: 280rpx;
 				padding-left: 30rpx;
 				font-size: 34rpx;
 				color: #ff0000;
 			}
 		}

 		.price {
 			display: flex;
 			flex-direction: column;
 			align-items: flex-end;
 			padding: 0 20rpx;

 			.reb {
 				color: #ff0000;
 			}

 			.num {
 				color: #999999;
 			}
 		}
 	}

 	.xieyi {
 		width: 600rpx;
 		font-size: 26rpx;
 		text-align: center;
 		display: flex;
		justify-content: center;
 		margin: 50rpx auto;
 		color: #999999;

 		text {
 			text-decoration: underline;
 			color: #681752;
 		}
 	}

 	.cart {
 		position: fixed;
 		bottom: 25rpx;
 		z-index: 888;
 		width: 750rpx;
 		height: 80rpx;
 		line-height: 80rpx;

 		.cart-info {
 			// background: linear-gradient(to bottom, $main-bg, $main-bg2);
 			// width: 700rpx;
 			margin: auto;
 			display: flex;
 			border-radius: 100rpx;
 			justify-content: space-between;
 			position: relative;

 			.cart-logo {
 				position: absolute;
 				width: 90rpx;
 				height: 90rpx;
 				margin-left: 20rpx;
 				bottom: 10rpx;
 			}


 			.clear-cart {
 				color: #ff0000;
 			}

 			.buy {
 				margin-right: 8rpx;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;

 				.custom-style {
 					padding: 0 50rpx;
 					color: #ffffff;
 					background-color: #ff0000;
 					background: linear-gradient(to bottom, $main-bg, $main-bg2);
 					// background-color: #681752;
 					border: none;
 					width: 330rpx;
 					height: 66rpx;
 					font-size: 28rpx;
 				}
 			}

 		}
 	}

 	.w-input {
 		text-align: right;
 		font-size: 25rpx;
 		color: #606266;
 	}

 	.btn-wrapper {
 		width: 360rpx;
 		margin: auto;
 		// display: flex;
 		// align-items: center;
 		padding: 0 20rpx;
 	}

 	.total-price {
 		font-size: 30rpx;
 		font-weight: bold;
 		color: #ff0000;
 	}
 </style>
