<template>
	<view class="container">
		<!-- tab选项 -->
		<view class="tabTitle">
			<text :class="{'actived': tabType===1}" @click="switchTab(1)">基本信息</text>
			<text :class="{'actived': tabType===2}" @click="switchTab(2)">邀请信息</text>
		</view>
		<!-- tab内容 -->
		<view class="tabContent">
			<!-- 基本信息 -->
			<view v-if="tabType===1">
				<ul>
					<li>
						<text>姓名：</text>
						<text><input class="uni-input" maxlength="15" placeholder="姓名" /></text>
					</li>
					<li>
						<text>手机号：</text>
						<text><input class="uni-input" type="number" maxlength="11" placeholder="手机号" /></text>
					</li>
					<li>
						<text>申请身份：</text>
						<text>
							<picker @change="bindPickerChange" :value="applyIdentity" :range="identityArr">
								<view class="uni-input">{{identityArr[applyIdentity]}}</view>
							</picker>
						</text>
					</li>
					<li>
						<text>所属组织：</text>
						<text>XXXXXX</text>
					</li>
				</ul>
				<share></share>
				<button type="primary" plain="true" class="sendInvite" @click="uniShare">发出邀请</button>
			</view>
			<!-- 邀请信息 -->
			<view class="inviteListsBox" v-if="tabType===2">
				<ul class="listUl">
					<li>
						<text>姓名：</text>
						<text></text>
					</li>
					<li>
						<text>手机号：</text>
						<text></text>
					</li>
					<li>
						<text>申请身份：</text>
						<text></text>
					</li>
					<li>
						<text>所属组织：</text>
						<text></text>
					</li>
					<li>
						<text>邀请状态：</text>
						<text></text>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
	const uniShare = new UniShare();
	export default {
		data() {
			return {
				tabType:1,
				identityArr:['工作室','事业伙伴'],
				applyIdentity:0
			};
		},
		methods:{
			switchTab(type){
				this.tabType = type;
			},
		    bindPickerChange: function(e) {
				this.applyIdentity = e.detail.value
			},
			uniShare() {
				uniShare.show({
					content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
						type: 0,
						href: 'https://uniapp.dcloud.io/',
						title: '标题',
						summary: '描述',
						imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
					},
					menus: [{
							"img": "/static/app-plus/sharemenu/wechatfriend.png",
							"text": "微信好友",
							"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
								"provider": "weixin",
								"scene": "WXSceneSession"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/wechatmoments.png",
							"text": "微信朋友圈",
							"share": {
								"provider": "weixin",
								"scene": "WXSceneTimeline"
							}
						}
					],
					cancelText: "取消分享",
				}, e => { //callback
					console.log(uniShare.isShow);
					console.log(e);
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
		height: 100%;
		.tabTitle{
			color: #666666;
			background-color:#fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx 60rpx 0;
			text{
				&.actived{
					color: #333;
					border-bottom: 4rpx solid #20269B;
				}
			}
		}
		.tabContent{
			margin-top: 10rpx;
			ul{
				width: 95%;
				margin: 0 auto 20rpx;
				padding: 0.3125rem 1.25rem;
				color: #333;
				border-radius: 0.3125rem;
				background-color: #fff;
				box-sizing: border-box;
				position: relative;
				li{
					border-bottom: 1px solid #F0F0F0;
					height: 76rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&:last-child{
						border:none;
					}
					.uni-input{
						text-align: right;
					}
					text{
						&.success{
							color: #78C06E;
						}
						&.fail{
							color: #FF0000;
						}
					}
				}
				&.listUl::before{
					display: block;
					content: '';
					position: absolute;
					left: 10rpx;
					top: 20rpx;
					width: 8rpx;
					height: 20rpx;
					background-color: #FA882F;
					border-radius: 8rpx;
				}
			}
			.sendInvite{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				width: 60%;
				border-radius: 80rpx;
				background-color: #20269B;
				color: #fff;
				font-size: 36rpx;
			}
		}
	}
</style>
