<template>
	<view class="content">
		<view class="header">
			<view class="title">企业认证</view>
			<view class="subtitle">请如实填写认证信息，快速审核开店</view>
		</view>
		<view class="white-box">
			<view class="inputs logo">
				<label>企业LOGO</label>
				<image class="logo-cover" :src="logo.showpath || require('@/static/icons/add-icon.png')" @click="updImg('logo')" mode="aspectFill"></image>
			</view>
			<view class="inputs">
				<label>企业名称</label>
				<input type="text" v-model="name" placeholder="输入企业名称" />
			</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="inputs">
				<label>经营类目</label>
				<view class="picker-text nowrap" @click="opnePopup">
					<block v-if="categorys.length > 0">
						<text class="text-item" v-for="(item, index) in category" :key="index" v-if="item.check">{{item.name}}</text>
					</block>
					<block v-else>选择经营类目</block>
					<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
				</view>
			</view>
			<view class="inputs">
				<label>法人姓名</label>
				<input type="text" v-model="corporate" placeholder="输入法人姓名" />
			</view>
			<view class="inputs">
				<label>法人身份证</label>
				<input type="text" v-model="identity" placeholder="输入法人身份证" />
			</view>
			<view class="inputs">
				<label>机构代码</label>
				<input type="text" v-model="org" placeholder="输入企业组织机构代码" />
			</view>
			<view class="inputs logo">
				<label>营业执照</label>
				<image class="license-cover" :src="license.showpath || require('@/static/icons/add-icon.png')" @click="updImg('license')" mode="aspectFill"></image>
			</view>
			<view class="btns">
				<button type="default" size="default" @click="submitApplies">提交认证</button>
			</view>
		</view>
		<!-- 经营类目 -->
		<uni-popup ref="categoryPopup">
			<view class="category-popup">
				<view class="header">
					<view class="title">经营类目</view>
					<view class="subtitle">请选择经营类目</view>
				</view>
				<view class="category-flex">
					<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in category" :key="index" @click="item.check = !item.check">{{item.name}}</view>
				</view>
				<view class="btns">
					<button type="default" size="default" @click="affirmCategory">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { appliesCreate, applies, appliesInfo, appliesCategory } from '@/apis/interfaces/company'
	import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				formType	 : "",
				name		 : "",
				corporate	 : "",
				identity	 : "",
				org			 : "",
				logo		 : {
					showpath: '',
					path	: ''
				},
				license		 : {
					showpath: '',
					path	: ''
				},
				industry	 : [],
				industryIndex: 0,
				reason		 : '',
				category	 : [],
				categorys	 : []
			};
		},
		created(){
			// 读取配置信息
			appliesCreate().then(res=>{
				this.industry 		= res
				this.formType		= this.$Route.query.form_type
				if(this.formType === 'put'){
					appliesInfo().then(formValue => {
						for(let val of formValue.categories){
							if(val.check){
								this.categorys.push(val.category_id)
							}
						}
						this.name	   		= formValue.name
						this.industryIndex  = this.industry.findIndex(val=> val.industry_id === formValue.industry.industry_id)
						this.category 		= formValue.categories
						this.corporate 		= formValue.certification.name
						this.identity  		= formValue.certification.idcard
						this.org	   		= formValue.certification.code
						this.logo	   		= formValue.cover
						this.license   		= formValue.certification.license
					}).catch(valueErr => {
						uni.showToast({
							title: valueErr.message,
							icon : 'none'
						})
					})
				}else{
					this.getAppliesCategory(res[0].industry_id)
				}
			}).catch(err =>{
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods:{
			// 选择经营类目
			opnePopup(){
				this.$refs.categoryPopup.open('bottom')
			},
			// 确认选择类目
			affirmCategory(){
				this.categorys = []
				for(let val of this.category){
					if(val.check){
						this.categorys.push(val.category_id)
					}
				}
				this.$refs.categoryPopup.close()
			},
			// 提交信息
			submitApplies(){
				let method = this.formType === 'put' ? 'PUT' : 'POST'
				applies({
					name		: this.name,
					cover		: this.logo.path,
					license		: this.license.path,
					user_name	: this.corporate,
					id_card		: this.identity,
					code		: this.org,
					industry_id	: this.industry[this.industryIndex].industry_id,
					categories	: this.categorys
				}, method).then(res => {
					uni.showModal({
						title		: '提示',
						content		: '您的企业认证信息已提交，审核需3-7个工作日，请耐心等待',
						showCancel	: false,
						confirmText : '确认',
						success		: resModal => {
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 选择器
			changePicker(e){
				this.industryIndex = e.detail.value
				this.getAppliesCategory(this.industry[e.detail.value].industry_id)
			},
			
			// 获取经营类目
			getAppliesCategory(id){
				appliesCategory({
					industry: id,
				}).then(res => {
					this.category = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 上传图片
			updImg(type){
				uni.chooseImage({
					count	: 1,
					success	: path => {
						uploads([{
							uri : path.tempFilePaths[0]
						}]).then(res => {
							this[type] = {
								showpath: res.url[0],
								path: res.path[0]
							}
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 内容
	.content{
		.header{
			padding: $padding * 2 0;
			box-sizing: border-box;
			@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: 85vh;
			padding: $padding $padding * 2 $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;
					}
					.text-item{
						margin-left: 10rpx;
						&:first-child{
							margin-left: 0;
						}
					}
				}
			}
			.logo{
				height: $padding + 98;
				padding-bottom: $padding;
				.logo-cover{
					position: absolute;
					right: 0;
					top: 0;
					width: 98rpx;
					height: 98rpx;
					background: $border-color-lg;
					border-radius: 50%;
				}
				.license-cover{
					@extend .logo-cover;
					border-radius: 0;
					width: 131rpx;
				}
			}
			.btns{
				padding-top: $padding * 2;
				button{
					background: $mian-color;
					border-radius: 0;
					height: 90rpx;
					line-height: 90rpx;
					font-size: $title-size;
					color: white;
					&::after{
						border: none;
					}
				}
			}
		}
		// 经营类目
		.category-popup{
			background: #F5F5F5;
			padding: 0 $padding * 2 $padding * 2 $padding * 2;
			.header{
				padding-bottom: $padding;
			}
			.category-flex{
				margin: 0 -10rpx;
				display: flex;
				flex-wrap: wrap;
				.category-flex-item{
					margin: 10rpx;
					background: white;
					width: calc(33.33% - 20rpx);
					line-height: 90rpx;
					text-align: center;
					font-size: $title-size-m;
					@extend .nowrap;
					&.show{
						color: white;
						background-color: $mian-color;
					}
				}
			}
			.btns{
				padding-top: $padding * 2;
				button{
					background: $mian-color;
					border-radius: 0;
					height: 90rpx;
					line-height: 90rpx;
					font-size: $title-size;
					color: white;
					&::after{
						border: none;
					}
				}
			}
		}
	}
</style>
