<template>
	<view class="content">
		<view class="header">
			<view class="title">企业注册</view>
			<view class="subtitle">填写企业基础行业，获取企业/商家权益</view>
		</view>
		<view class="white-box">
			<view class="inputs">
				<label>企业名称</label>
				<input type="text" v-model="name" placeholder="输入企业名称" />
			</view>
			<view class="inputs">
				<label>企业类型</label>
				<picker v-if="type.length > 0" :range="type" :value="typeIndex" range-key="name" @change="changePicker" data-type="type">
					<view class="picker-text nowrap">
						{{type[typeIndex].name}}
						<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="inputs">
				<label>企业行业</label>
				<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title" @change="changePicker" data-type="industry">
					<view class="picker-text nowrap">
						{{industry[industryIndex].title}}
						<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="btns">
				<button type="default" size="default" @click="next">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { createConfig, inits } from '@/apis/interfaces/company'
	export default {
		data() {
			return {
				name		 : "",
				type		 : [],
				industry	 : [],
				typeIndex	 : 0,
				industryIndex: 0
			};
		},
		created(){
			createConfig().then(res=>{
				this.type	  = res.type
				this.industry = res.industries
			})
		},
		methods:{
			// 提交信息
			next(){
				inits({
					name		: this.name,
					type		: this.type[this.typeIndex].id,
					industry_id	: this.industry[this.industryIndex].industry_id
				}).then(res => {
					this.$Router.push({name: 'Prompt'})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			//选择器
			changePicker(e){
				let changeType = e.target.dataset.type,
					changeVlae = e.detail.value

				switch(changeType){
					case 'type':
						this.typeIndex = changeVlae
						break
					case 'industry':
						this.industryIndex = changeVlae
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.header{
			height: 20vh;
			@extend .vertical;
			.title{
				text-align: center;
				font-size: $title-size + 14;
				font-weight: bold;
				line-height: 90rpx;
			}
			.subtitle{
				font-size: $title-size-m;
				color: $text-gray;
				text-align: center;
			}
		}
		.white-box{
			background-color: white;
			border-radius: $radius $radius 0 0;
			min-height: 80vh;
			padding: $padding * 2;
			box-sizing: border-box;
			.inputs{
				position: relative;
				margin-top: $margin;
				background: white;
				border-bottom: solid 1rpx $border-color;
				padding-left: 200rpx;
				line-height: 90rpx;
				min-height: 90rpx;
				label{
					position: absolute;
					top: 0;
					left: 0;
					width: 200rpx;
					font-size: $title-size;
				}
				input{
					height: 90rpx;
					line-height: 90rpx;
					font-size: $title-size;
				}
				.picker-text{
					position: relative;
					padding-right: 90rpx;
					.picker-icon{
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}
			.btns{
				padding-top: $padding * 2;
				button{
					background: $text-price;
					border-radius: 0;
					height: 90rpx;
					line-height: 90rpx;
					font-size: $title-size;
					color: white;
					font-weight: bold;
					&::after{
						border: none;
					}
				}
			}
		}
	}
</style>
