<template>
	<Layout :index="6" :titles="'立即申请'" :title_content="'立即申请'">
	<view class="bgc-03">
	   <view class="content-apply">
	        <view class="apply_title">
				<image class="icons" src="../static/img/page/sq_l.png"></image>
	             立即申请
				 <image class="icons" src="../static/img/page/sq_l.png"></image>
	        </view>
			<view class="apply_desc">
                稍后将有专人与您对接，请保持联系方式畅通
			</view>
			
			<view class="apply_input">
				<view class="input-wrap" >
					<view class="input-title">
						<view class="shu"></view>选择企业类型
					</view>
					<radio-group @change="radioChange" class="input-type">
						<label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" activeBorderColor="#f48400" activeBackgroundColor="#f48400" borderColor="#f48400" color="#f48400" style="transform:scale(0.65);border-radius: 100%;" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="input-wrap" >
					<view class="input-title" ><view class="shu"></view>企业名称</view>
					<input class="input" v-model="formData.c_name" type="text" placeholder="请输入企业名称" placeholder-class="placeholder-class" maxlength="30">
				</view>
				<view class="input-wrap" >
					<view class="input-title" ><view class="shu"></view>如何称呼您</view>
					<input class="input" v-model="formData.name" type="text" placeholder="如何称呼您" placeholder-class="placeholder-class" maxlength="20"/>
				</view>
				<view class="input-wrap" >
					<view class="input-title" ><view class="shu"></view>联系方式</view>
					<input class="input" v-model="formData.phone" type="text" placeholder="请输入联系方式" placeholder-class="placeholder-class" maxlength="12"/>
				</view>
				<view class="input-wrap" >
					<view class="input-title" ><view class="shu"></view>您的需求是</view>
					<!-- 多选 -->
					<checkbox-group @change="checkboxChange" class="input-types">
						<label class="uni-list-cell " v-for="item in itemss" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" activeBorderColor="#f48400" activeBackgroundColor="#f48400" borderColor="#f48400" color="#ffffff" style="transform:scale(0.65);border-radius: 100%;" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="input-wrap" v-if="show">
					<view class="input-title" ><view class="shu"></view>您的产品名称</view>
					<input class="input" v-model="formData.product_name" type="text" placeholder="请输入产品名称" placeholder-class="placeholder-class" maxlength="30"/>
				</view>
				<view class="input-wrap" v-if="show">
					<view class="input-title" ><view class="shu"></view>产品类型</view>
					<input class="input" v-model="formData.product_type" type="text" placeholder="请输入产品类型" placeholder-class="placeholder-class" maxlength="30"/>
				</view>
				<view class="input-wrap" v-if="show">
					<view class="input-title" ><view class="shu"></view>资金需求</view>
					<view class="d-s-c">
					<input class="input input_480" v-model="formData.product_amount" type="number" placeholder="请输入" placeholder-class="placeholder-class" maxlength="6"/>万元
					</view>
				</view>
				<view class="input-wrap" v-if="show">
					<view class="input-title" ><view class="shu"></view>产品情况</view>
					<textarea class="input product_desc" v-model="formData.product_desc"  placeholder="请填写产品当前研发进度、已投入成本、预估总成本..." auto-height placeholder-class="placeholder-class" maxlength='5000'/>
				</view>
				<view class="input-wrap" v-if="show">
					<view class="input-title" ><view class="shu"></view>发行情况</view>
					<textarea class="input product_desc" v-model="formData.publish_desc"  placeholder="请填写拟上线时间、拟发行渠道、拟发行成本、预估发行总流水..." auto-height placeholder-class="placeholder-class" maxlength='5000'/>
				</view>
				<view class="submit" >
				 <image class="submit" src="../static/img/page/submit.png" @tap="sends()"></image>
				 </view>
			 </view>
	   </view>
	</view>
	<Kefu></Kefu>
	</Layout>
	
</template>

<script>
	import Layout from './part/layouts.vue';
	import Kefu from './part/kefu.vue';
	export default {
		components:{
			Layout,
			Kefu
		},
		data(){
			return {
				index:-1,
				formData:[{
					phone: '',
					name: '',
					c_name:'',
					need:'',
					company_type:'研发企业',
					product_name:'',
					product_type:'',
					product_amount:'',
					product_desc:'',
					publish_desc:'',
				}],
			   items: [{
					value: '研发企业',
						name: '研发企业',
						checked: 'true'
					},
					{
						value: '发行企业',
						name: '发行企业'
					},
					{
						value: '投资机构',
						name: '投资机构'
					},
				],
				current: 0,
				show:false,
				itemss: [{
						value: '我要资金',
						name: '我要资金',
					},
					{
						value: '我要发行',
						name: '我要发行',
					},
					{
						value: '我要出海',
						name: '我要出海'
					},
					{
						value: '我要版号',
						name: '我要版号'
					},
					{
						value: '我要版权',
						name: '我要版权'
					},
					{
						value: '我要技术',
						name: '我要技术'
					},
					{
						value: '我要参展',
						name: '我要参展'
					},
					{
						value: '我要补贴',
						name: '我要补贴'
					}
				]
			}
		},
		created() {
			this.formData.company_type = '研发企业';
			this.formData.need = ''
		},
		beforeDestroy() {
		},
		methods:{
			checkboxChange: function (e) {
							var items = this.itemss,
								values = e.detail.value;
							for (var i = 0, lenI = items.length; i < lenI; ++i) {
								const item = items[i]
								if(values.includes(item.value)){
									this.$set(item,'checked',true)
									this.formData.need = values;
									
								}else{
									this.$set(item,'checked',false)
								}
							}
							this.show = values.some(item => item.includes('资金') || item.includes('发行') || item.includes('出海'));
							console.log(this.show,222)
			},
			 radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						this.formData.company_type = evt.detail.value;
						break;
					}
				}
			  },
			sends(){
				// if(this.checked==false){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title: '请同意用户协议',
				// 		duration:1500
				// 	})
				// 	return;
				// }
				// if(!this.formData.phone){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title: '请输入xxx',
				// 		duration:1500
				// 	})
				// 	return;
				// }
				// if(!this.formData.name){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title: '请输入xxx',
				// 		duration:1500
				// 	})
				// 	return;
				// }
				// console.log(this.formData.need,2222);
				if(this.formData.need.length>1){
					this.formData.need = this.formData.need.join(',');
				}
				//return;
				this._post('game.Apply/add',{
					phone: this.formData.phone?this.formData.phone:'',
					name: this.formData.name?this.formData.name:'',
					c_name: this.formData.c_name?this.formData.c_name:'',
					need: this.formData.need?this.formData.need:'',
					company_type: this.formData.company_type?this.formData.company_type:'',
					product_name: this.formData.product_name?this.formData.product_name:'',
					product_type: this.formData.product_type?this.formData.product_type:'',
					product_amount: this.formData.product_amount?this.formData.product_amount:'',
					product_desc: this.formData.product_desc?this.formData.product_desc:'',
					publish_desc: this.formData.publish_desc?this.formData.publish_desc:'',
					app_id:10001,
				},res=>{
					this.formData = [];
					this.formData.company_type = '研发企业';
					uni.showToast({
						icon:'none',
						title: '申请成功，请等待平台联系~',
						duration:2000
					})
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
		}
	}
</script>

<style  >
	>>>uni-checkbox .uni-checkbox-input{
		border-radius: 100% !important;
	}
	.circle {
	  display: inline-block;
	  width: 16px;
	  height: 16px;
	  border-radius: 50%;
	  background-color: #ccc;
	}
	
	input[type="radio"]:checked + .circle {
	  background-color: yellow;
	}
	.bgc-03{
		width: 100%;
		min-height: 1000px;
		background-color: #f7f7f7 !important;
		overflow: hidden;
	}
	.content-apply{
		width: 1495px;
		min-height: 1000px;
		margin: 40px auto;
		background-color: #ffffff;
		overflow: hidden;
		.apply_title{
			width: 276px;
			height: 32px;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			align-items: center;
			margin-top: 58px;
			color: #261e17;
			font-size: 28px;
			font-weight: 500;
			.icons{
				width: 54px;
				height: 19px;
			}
		}
		.apply_desc{
			width: 100%;
			text-align: center;
			color: #abaaaa;
			font-size: 18px;
			margin-top: 22px;
		}
		.apply_input{
			margin-left: 116px;
			margin-top: 70px;
			width: 1118px;
			.input-type{
				display: flex;
				margin-left: 22px;
				.uni-list-cell{
					display: flex;
					align-items: center;
					margin-right: 72px;
					
				}
			}
			.input-types{
				display: flex;
				flex-wrap: wrap;
				width: 750px;
				margin-left: 22px;
				font-size: 18px;
				font-weight: 500;
				color: #2d2d2d;
				.uni-list-cell{
					display: flex;
					align-items: center;
					margin-right: 68px;
					margin-bottom: 20px;
				}
			}
			.input-wrap{
				margin-bottom: 40px;
				.input-title{
					display: flex;
					align-items: center;
					color: #2f2f2f;
					font-size: 24px;
					font-weight: 500;
					margin-bottom: 34px;
					.shu{
						width: 7px;
						height: 26px;
						background-color: #fd8b2c;
						margin-right: 12px;
					}
				}
				.input{
					width: 1090px;
					height: 56px;
					border-radius: 10px;
					border: 1px solid #ededed;
					padding: 0 20px;
					color: #333;
					margin-left: 22px;
				}
				.product_desc{
					min-height: 122px;
					padding:20px;
				}
				.input_480{
					width: 480px;
					margin-right: 18px;
				}
				.d-s-c{
					color: #a6a6a6;
					font-size: 18px;
				}
				.placeholder-class{
					color: #b7b7b7;
					font-size: 18px;
				}
			}
			.submit{
				width: 159px;
				height: 47px;
				margin: 30px auto;
				margin-bottom: 76px;
				cursor: pointer;
			}
		}
	}
	@media only screen and (max-width: 768px){
		
		.content-apply{
			width: 100%;
			 min-height: 100%;
			 padding-bottom: 30px;
			margin: 0 auto;
			background-color: #ffffff;
			overflow: hidden;
			.apply_title{
				width:600px;
				height: 64px;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				align-items: center;
				margin-top: 58px;
				color: #261e17;
				font-size: 64px;
				font-weight: 500;
				.icons{
					width: 104px;
					height: 38px;
				}
			}
			.apply_desc{
				width: 90%;
				text-align: center;
				color: #abaaaa;
				font-size: 36px;
				margin : 22px auto 0;
			}
			.apply_input{ 
				margin : 70px auto 0;
				width: 90%;
				
				.input-type{
					display: flex;
					margin-left: 0px;
					.uni-list-cell{
						display: flex;
						align-items: center;
						margin-right: 72px;
						font-size: 42px;
					}
				}
				.input-types{
					display: flex;
					flex-wrap: wrap;
					width:100%;
					margin-left: 0;
					font-size: 40px;
					font-weight: 500;
					color: #2d2d2d;
					.uni-list-cell{
						display: flex;
						align-items: center;
						margin-right: 68px;
						margin-bottom: 20px;
					}
				}
				.input-wrap{
					width: 100%;
					margin-bottom: 40px;
					.input-title{
						display: flex;
						align-items: center;
						color: #2f2f2f;
						font-size: 48px;
						font-weight: 500;
						margin-bottom: 34px;
						.shu{
							width: 14px;
							height: 52px;
							background-color: #fd8b2c;
							margin-right: 12px;
						}
					}
					.input{
						width: 97%;
						height: 162px;
						border-radius: 10px;
						border: 1px solid #ededed;
						padding: 0 20px;
						color: #333;
						margin-left: 0;
						font-size: 52px;
					}
					.product_desc{
						min-height: 366px;
						padding:20px;
					}
					.input_480{
						width: 480px;
						margin-right: 18px;
					}
					.d-s-c{
						color: #a6a6a6;
						font-size: 36px;
					}
					.placeholder-class{
						color: #b7b7b7;
						font-size:52px;
					}
				}
				.submit{
					width: 477px;
					height: 141px;
					margin: 30px auto;
					margin-bottom: 76px;
					cursor: pointer;
				}
			}
			
		}
	}
</style>
