<template>
	<view>
		<image class="bg-img" :src="$getImageUrl('static/images/applet/other/extensionBg.png')" mode="widthFix"></image>
		<!-- <image class="echo-mycodeban" mode="widthFix" :src="param.mycodeban"></image> -->

		<view class="padding-lr-xl padding-bottom-xl" :style="'min-height: calc(100vh); margin-top: 390rpx'"
			v-if="true">
			<view class="text-center bg-white margin-bottom-lg radius">
				<view class="text-xl padding-lr padding-top">
					<text class="text-black">我的邀请码</text>
				</view>
				<view class="text-center solid-bottom text-sm padding">
					<text class="text-grey">请被邀请人扫码完成注册登录</text>
				</view>
				<view class="padding">
					<image class="codeimg" mode="widthFix" @click="refCode" :src="userinfo.wxampcode"></image>
					<view class="flex flex-direction">
						<button class="cu-btn round bg-gray margin-top-sm lg"
							style="width: 90%;margin: 20rpx auto 0;background-color: #F9C7AC;"
							@tap="saveImage">保存我的邀请码</button>
					</view>
					<view class="flex flex-direction">
						<button class="cu-btn round bg-themeBtn margin-tb-sm lg" style="width: 90%;margin: 20rpx auto;"
							open-type="share">微信邀请</button>
					</view>
				</view>
			</view>

			<scroll-view scroll-x class="bg-white radius nav">
				<view class="flex text-center solid-bottom">
					<view class="cu-item flex-sub" :class="1==TabCur?'text-red cur':''" @tap="tabSelect"
						:data-id="1">
						邀请排行
					</view>
					<!-- <view class="cu-item flex-sub" :class="2==TabCur?'text-orange cur':''" @tap="tabSelect" :data-id="2">
						推荐注册
					</view> -->
				</view>
			</scroll-view>

			<view class="cu-list radius menu" v-if="1==TabCur">
				<block v-for="(item,index) in plist" :key="index">
					<view class="cu-item">
						<view class="action padding-right-lg text-red" v-if="index==0">{{index+1}}</view>
						<view class="action padding-right-lg text-orange" v-else-if="index==1">{{index+1}}</view>
						<view class="action padding-right-lg text-yellow" v-else-if="index==2">{{index+1}}</view>
						<view class="action padding-right-lg text-black" v-else>{{index+1}}</view>
						<view class="content padding-tb-sm padding-right-sm">
							<view class="text-black">{{item.realname}}</view>
							<view class="text-gray text-sm">{{item.mobile}}</view>
						</view>
						<view class="action text-black">{{item.partnumber}} 人</view>
					</view>
				</block>
				<view class="cu-item">
					<view class="content padding-xs text-center">
						<text class="text-gray text-center text-sm">目前只显示前 {{pcount}} 名。</text>
					</view>
				</view>
			</view>

			<view class="bg-white padding radius" v-if="2==TabCur">
				<form>
					<view class="cu-form-group">
						<view class="title">姓名</view>
						<input placeholder="请输入推荐人姓名" @input="bindInput" data-val="realname"
							:value="forminfo.realname"></input>
					</view>
					<view class="cu-form-group solids-bottom">
						<view class="title">手机号</view>
						<input placeholder="请输入推荐人手机号" @input="bindInput" data-val="mobile"
							:value="forminfo.mobile"></input>
					</view>
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-orange margin-tb-sm lg" @tap="regUser">确认提交</button>
					</view>
				</form>
			</view>
		</view>



	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				param: {},
				userinfo: {},

				TabCur: 1,
				plist: [],
				pcount: 0,

				isRotate: false,
				forminfo: {
					realname: "",
					mobile: ""
				}
			};
		},
		onLoad: function() {
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/mycode");
			if (_this.userinfo === false) {
				return false;
			}
			if (_this.userinfo.wxampcode == "") {
				_this.refCode();
			}
			_this.$req.ajax({
				path: "my/pagecode",
				data: {}
			}).then((data) => {
				_this.param = data.param;
				_this.plist = data.plist;
				_this.pcount = data.pcount;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onShareAppMessage: function(res) {
			return {
				title: _this.param.mycodetil,
				path: "/pages/login/sharepuser?parentid=" + _this.userinfo.id,
				imageUrl: _this.param.mycodepic
			}
		},
		methods: {
			saveImage: function() {
				uni.downloadFile({
					url: _this.userinfo.wxampcode, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showModal({
										title: '信息提示',
										content: "邀请码已保存到手机相册，注意查收。",
										showCancel: false
									});
								}
							});
						}
					}
				});
			},

			refCode: function() {
				_this.$req.ajax({
					path: "my/refcode",
					data: {
						userid: _this.userinfo.id
					}
				}).then((data) => {
					_this.userinfo.wxampcode = data.wxampcode + "?" + Math.random();
					uni.setStorageSync('userinfo', _this.userinfo);
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},

			tabSelect: function(e) {
				_this.TabCur = e.currentTarget.dataset.id;
			},
			regUser: function() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "my/reguser",
					data: {
						userid: _this.userinfo.id,
						realname: _this.forminfo.realname,
						mobile: _this.forminfo.mobile
					}
				}).then((data) => {
					uni.showModal({
						title: '信息提示',
						content: "推荐注册成功。",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								_this.forminfo = {
									realname: "",
									mobile: ""
								};
							}
						}
					});
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},


			bindInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				_this.forminfo[dataval] = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.echo-mycodeban {
		width: 100%;
		display: block;
	}

	.bg-img {
		position: fixed;
		width: 100%;
		// height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>