<template>
	<view class="page">
		<u-navbar title="商家合作" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
			height='50'></u-navbar>
		<image src="https://api.ccttiot.com/smartmeter/img/static/u22jKujzqJ82mSVfXhgG" class="bj" mode=""></image>
		<view class="video">
			<video src="https://api.ccttiot.com/smartmeter/img/static/ubSSfeAihTk6WgtvSbLL"></video>
		</view>
		<view class="box">
		    <view class="one">
		    	<view class="name">
		    		1.您已经有设备了吗？
		    	</view>
				<u-dropdown>
					<u-dropdown-item v-model="value1" :title="txt1" @change="btnsb" :options="options1"></u-dropdown-item>
				</u-dropdown>
		    </view>	
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					2.你想做的经营模式是？
				</view>
				<u-dropdown>
					<u-dropdown-item v-model="value2" :title="txt2" @change="btnjy" :options="options2"></u-dropdown-item>
				</u-dropdown>
			</view>	
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					3.你打算将设备投放到哪里？
				</view>
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox 
						@change="checkboxChange" 
						v-model="item.checked" 
						v-for="(item, index) in list" shape="circle" :key="index" 
						:name="item.name"
					>{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>	
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					4.您的姓名
				</view>
				<input type="text" v-model="name" placeholder="请输入您的真实姓名"/>
			</view>	
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					5.您的联系方式
				</view>
				<input type="text" v-model="tel" placeholder="请输入您的手机号"/>
			</view>	
			<view class="one" style="margin-top: 48rpx;">
				<view class="name">
					6.您想了解的消息
				</view>
				<input type="text" v-model="xiaoxi" placeholder="请输入您想知道的消息"/>
			</view>	
		</view>
		<view class="bot">
			<view class="wz">
				请输入您的真实有效信息，我们将在第一时间联系您
			</view>
			<view class="anniu" @click="btnjiameng">
				马上加盟 立即赚钱
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
               bgc: {
               	  backgroundColor: "#D9DAF5",
               }, 
			   txt1:'请选择有无设备',
			   value1: '',
			   options1: [{
			   			label: '已有设备，想合作',
			   			value: 1,
			   		},
			   		{
			   			label: '没有设备,打算开始',
			   			value: 2,
			   		}
			   	],
				txt2:'请选择经营模式',
				value2: '',
				options2: [{
						label: '个体经营',
						value: 1,
					},
					{
						label: '企业经营',
						value: 2,
					},{
						label: '政府经营',
						value: 3,
					},{
						label: '机构经营',
						value: 4,
					}
				],
				list: [
					{
						name: '麻将房',
						checked: false,
						disabled: false
					},
					{
						name: '棋牌室',
						checked: false,
						disabled: false
					},
					{
						name: '台球桌',
						checked: false,
						disabled: false
					},{
						name: '加水器',
						checked: false,
						disabled: false
					},
					{
						name: '按摩椅',
						checked: false,
						disabled: false
					},{
						name: '洗衣机',
						checked: false,
						disabled: false
					},
					{
						name: '卡丁车',
						checked: false,
						disabled: false
					},
					{
						name: '充电桩',
						checked: false,
						disabled: false
					},{
						name: '其他',
						checked: false,
						disabled: false
					}
				],
				name:'',
				tel:'',
				xiaoxi:'',
				toufanglist:[]
			}
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		onShow() {
			this.getuserinfo()
		},
		methods: {
			// 点击加盟
			btnjiameng(){
				if(this.value1 == ''){
					uni.showToast({
						title: '请选择有无设备',
						icon: 'none',
						duration:2000
					})
				}else if(this.value2 == ''){
					uni.showToast({
						title: '请选择经营模式',
						icon: 'none',
						duration:2000
					})
				}else if(this.toufanglist.length == 0){
					uni.showToast({
						title: '请勾选投放哪里',
						icon: 'none',
						duration:2000
					})
				}else if(this.name == ''){
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none',
						duration:2000
					})
				}else if(this.tel == ''){
					uni.showToast({
						title: '请输入您的手机号',
						icon: 'none',
						duration:2000
					})
				}else if(this.xiaoxi == ''){
					uni.showToast({
						title: '请输入您想知道的消息',
						icon: 'none',
						duration:2000
					})
				}else{
					console.log('111')
				}
			},
			
			// 选择使用场景
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
				this.toufanglist = e
			},
			// 选择经营模式
			btnjy(){
				this.txt2 = this.options2[this.value2 - 1].label
			},
			// 选择是否拥有设备
			btnsb(){
				this.txt1 = this.options1[this.value1 - 1].label
			},
			// 获取个人信息
			getuserinfo() {
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
						
					} else {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	/deep/ .u-dropdown__content__mask{
		background: transparent !important;
	}
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		padding-bottom: 22rpx;
	}
	/deep/ .u-dropdown__menu{
		z-index: 0 !important;
	}
	/deep/ .u-dropdown__menu__item{
		background-color: #f0f0f0;
		border-radius: 10rpx;
		justify-content: end !important;
		padding: 0 48rpx;
		box-sizing: border-box;
	}
	/deep/ .u-dropdown__menu__item__text{
		width: 500rpx;
	}
	/deep/ .u-checkbox__icon-wrap--checked{
		background-color: rgb(150,149,242) !important;
		border-color: rgb(150,149,242) !important;
	}
	/deep/ .u-checkbox{
		margin-right: 30rpx;
	}
	.bot{
		margin: auto;
		margin-top: 60rpx;
		.wz{
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #3731BE;
		}
		.anniu{
			width: 676rpx;
			height: 101rpx;
			background: #A3A0FF;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			line-height: 101rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 20rpx;
			text-align: center;
		}
	}
	.box{
		width: 694rpx;
		max-height: 1462rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 30rpx;
		padding: 44rpx 36rpx;
		box-sizing: border-box;
		.one{
			.name{
				font-weight: 600;
				font-size: 34rpx;
				color: #3D3D3D;
				margin-bottom: 32rpx;
			}
			input{
				width: 626rpx;
				height: 90rpx;
				background: #F0F0F0;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				line-height: 90rpx;
				padding-left: 48rpx;
				box-sizing: border-box;
			}
		}
	}
	.video{
		width: 694rpx;
		height: 390rpx;
		margin: auto;
		border-radius: 20rpx;
		overflow: hidden;
		video{
			width: 694rpx;
			height: 390rpx;
		}
	}
	page {
		background: #D9DAF5;
		max-height: 200vh;
		overflow: scroll;
		padding-bottom: 60rpx;
		box-sizing: border-box;
	}
</style>