<template>
	<view class="pages">
		<u-navbar title="创建推广码" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='44'></u-navbar>

		<view class="box">
			<view class="one">
				<view class="name">角色名称</view>
				<view class="name_inp" @click="show=true">
					<input type="text" placeholder="请选择角色名称" v-model="name" disabled="true"/>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uqHhYENBVzNQmTp5pmrR" mode=""></image>
				</view>
			</view>
			
			<view class="one" style="margin-top: 30rpx;" v-if="flag">
				<view class="name" style="margin-right: 80rpx;">创业者</view>
				<view class="name_inp" @click="shows=true">
					<input type="text" placeholder="请选择创业者" v-model="touzi" disabled="true"/>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uqHhYENBVzNQmTp5pmrR" mode=""></image>
				</view>
			</view>
			
			<view class="two">
				<view class="name">分成比例</view>
				<view class="name_inp">
					<input type="text" placeholder="请输入分成比例" v-model="point"/> %
				</view>
			</view>
			<view class="tishi">
				被推广人分成比例不能超过自身分成比例
			</view> 
		</view>
		
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<!-- 创业者 -->
		<u-select v-model="shows" :list="lists" @confirm="confirms"></u-select>
         
		 <view class="qtg" @click="btntgm" v-if="btnflag">
		 	生成推广码
		 </view>
		 <view class="qtg" v-else>
		 	生成推广码
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#8883f0",
				},
				show:false,
				touzi:'',
				shows:false,
				flag:false,
				btnflag:true,
				list:[{
						value: '1',
						label: '合作伙伴'
					},
					{
						value: '2',
						label: '创业者'
					},{
						value: '3',
						label: '渠道商'
					},
					{
						value: '4',
						label: '经营场所'
					}],
				lists:[],
				name:'',
				userType:'',
				point:'',
				investorId:'',
			}
		},
		onLoad() {
           
		},
		onShow() {
			this.lists = []
			this.getinfo()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			// 获取所有的创业者列表
			gettzr(){
				this.$u.get(`/agent/user/investorList`).then(res => {
					if(res.code == 200){
						res.rows.forEach(item => {
							this.lists.push({
								label:item.userName,
								value:item.userId
							})
						})
					}
				})
			},
			// 业务
			gettzrs(){
				this.$u.get(`/biz/user/investorList`).then(res => {
					if(res.code == 200){
						res.rows.forEach(item => {
							this.lists.push({
								label:item.userName,
								value:item.userId
							})
						})
					}
				})
			},
			getinfo(){
				this.$u.get(`/app/user/userInfo`).then(res => {
					if(res.code == 200){
						if(res.data.type == 2){
							this.gettzr()
						}else{
							this.gettzrs()
						}
					}
				})
			},
			
			
			// 拿创业者id
			confirms(e){
				this.investorId = e[0].value
				this.touzi = e[0].label
			},
			
             confirm(e){
				 // 再次点击其他角色清空
				 this.investorId = ''
				 this.touzi = ''
				 this.name = e[0].label
				 if(this.name == '经营场所'){
					 this.flag = true
					 this.userType = 5
				 }else if(this.name == '合作伙伴'){
					 this.flag = false
					 this.userType = 2
				 }else if(this.name == '渠道商'){
					 this.flag = false
					 this.userType = 3
				 }else if(this.name == '创业者'){
					 this.flag = false
					 this.userType = 4
				 }
			 },
             btntgm(){
				 this.btnflag = false
				 let data = {
					 userType:this.userType,
					 point:this.point,
					 investorId:this.investorId
				 }
				 this.$u.post(`/app/shareCode`,data).then(res => {
					 if(res.code == 200){
						 uni.navigateTo({
						 	url:'/page_user/promote?codeNo=' + res.data.codeNo
						 })
						 this.btnflag = true
					 }else{
						 uni.showToast({
						 	title: res.msg,
						 	icon: 'none',
							duration:2000
						 }) 
						 setTimeout(()=>{
							 this.btnflag = true
						 },2000)
					 }
				 })
				
			 }
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-title {
		padding-bottom: 15rpx;
	}
 
	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}

	.pages {
		background-color: #F7FAFE !important;
		height: 100vh;
		width: 100%;
		.box{
			width: 680rpx;
			max-height: 100%;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: auto;
			margin-top: 46rpx;
			padding: 46rpx 38rpx;
			box-sizing: border-box;
			.tishi{
				font-size: 28rpx;
				color: #808080;
				margin-top: 46rpx;
			}
			.one{
				display: flex;
				align-items: center;
				.name{
					margin-right: 52rpx;
				}
				.name_inp{
					display: flex;
					justify-content: space-between;
					width: 426rpx;
					height: 70rpx;
					background: #F0F0F0;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					line-height: 70rpx;
					padding-right: 22rpx;
					box-sizing: border-box;
					align-items: center;
					image{
						width: 21rpx;
						height: 12rpx;
					}
					input{
						width: 260rpx;
						height: 70rpx;
						line-height: 70rpx;
						padding-left: 22rpx;
						box-sizing: border-box;
					}
				}
			}
			.two{
				display: flex;
				align-items: center;
				margin-top: 34rpx;
				.name{
					margin-right: 52rpx;
				}
				.name_inp{
					display: flex;
					justify-content: space-between;
					padding-right: 22rpx;
					box-sizing: border-box;
					width: 426rpx;
					height: 70rpx;
					background: #F0F0F0;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					line-height: 70rpx;
					input{
						width: 260rpx;
						height: 70rpx;
						line-height: 70rpx;
						padding-left: 22rpx;
						box-sizing: border-box;
					}
				}
			}
		}
		.qtg{
			width: 584rpx;
			height: 90rpx;
			background: #8883F0;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 40rpx;
			color: #FFFFFF;
			position: fixed;
			bottom: 102rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>