<template>
	<view class="store-settled">
		<view class="content">
			<view class="apply-form bg-white">
				<!-- 联系人姓名 -->
				<view class="apply-form-item">
					<u-field label="机构名称" v-model="form.name" label-width="160" placeholder="请输机构名称" required />
				</view>
				<!-- 手机号码 -->
				<view class="apply-form-item">
					<u-field label="联系方式" v-model="form.contact" label-width="160" placeholder="请输入联系方式" required />
				</view>
				
				<view class="apply-form-item">
					<view class="label" required>机构简介</view>
					<view class="flex-1" style="background-color: #F8F8F8;">
						<u-input required  v-model="form.intro" type="textarea" placeholder="请输入机构简介，300字以内" :border="false"
							:height="160" />
					</view>
				</view>

				<!-- 手机号码 -->
				<view class="apply-form-item">
					<u-field label="企业名称" v-model="form.company" label-width="160" placeholder="请输入企业名称" required />
				</view>
				
				<view  @click="showRegion = true">
					<u-field v-model="region" :disabled="true" label-width="160" style="flex: 1;" label="所在地区" placeholder="请选择省、市" right-icon="arrow-right">
					</u-field>
				</view>
				
				<!-- 问题截图 -->
				<view class="apply-form-item">
					<u-field label="机构封面图" label-width="160" placeholder="请上传机构封面图" :border-bottom="false"
						 disabled />
					<view>
						<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
							:max-count="10" width="150" height="150" :action="action" upload-text="上传图片"
							@on-success="onSuccess"  @on-remove="onRemove" />
					</view>
					<view class="muted m-t-20 m-b-30">支持jpg、png、jpeg格式的图片</view>
				</view>
				
				<!-- <view class="apply-form-item">
					<view class="label">内容</view>
					<view class="flex-1" style="background-color: #F8F8F8;">
						<u-input  v-model="content" type="textarea" placeholder="请输入机构详情" :border="false"
							:height="160" />
					</view>
				</view> -->

				<!-- 提交申请 -->
				<view style="padding: 30rpx 20rpx 30rpx 0;">
					<button type="primary" size="lg" class="br60" @tap="onSubmit">申请</button>
				</view>

				<!-- 查阅记录 -->
				<router-link to="/bundle/pages/user/organ_recode">
					<view class="flex row-center muted">
						<u-icon name="order" size="32" />
						<view class="m-l-10">查看申请记录</view>
					</view>
				</router-link>
			</view>
		</view>
		<u-select v-model="showPop" mode="single-column" value-name="id" label-name="name" :list="shopCategory"
			@confirm="confirmSelect"></u-select>
		<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="lists"></u-select>
	</view>
</template>

<script>
	import area from '@/utils/area'
	import {
		organ,
		organDetail
	} from "@/api/user"
	import {
		baseURL
	} from '@/config/app'
	import {
		sendSms
	} from '@/api/app'
	import {
		SMSType
	} from '@/utils/type'
	export default {
		data() {
			return {
				addressObj: {
					province: '',
					city: '',
					district: '',
					address: '',
					is_default: false
				},
				region: '',
				addressId: '',
				defaultRegion: ['安徽省', '合肥市'],
				defaultRegionCode: '340100',
				showRegion: false,
				lists: [],
				content:'',
				// 表单数据
				form: {
					id: '',
					clabel: '',
					name: '',
					image: '',
					content: '',
					contact:'',
					company:'',
					intro:'',
				},
				codeTips: '',
				shopCategory: [],
				showPop: false,
				action: baseURL + '/api/file/formimage',
				fileList: []
			}
		},
		onLoad() {
			this.goLogin()
			const options = this.$Route.query;
			console.log("options.id",options.id)
			if (options.id) {
			    this.form.id = options.id
			    this.initOrganDetail()
			}
			this.$nextTick(() => {
				this.lists = area
				console.log("地区:",area)
				this.lists.forEach((item) => {
					item.children.forEach((item2)=>{
						this.$delete(item2,"children")
					})
				})
			})
		},
		methods: {
			// 初始化详情
			initOrganDetail() {
			    try {
					console.log("this.form.id",this.form.id)
			        organDetail(this.form.id).then(res => {
			            if (res.code == 1) {
			                const {
			                    id,
			                    content,
			                    name,
			                    company,
			                    intro,
								contact,
								image,
								city_id,
								province_id,
								district_id,
								address
			                } = res.data;
						
							this.addressObj.city_id= city_id;
							this.addressObj.province_id= province_id;
							this.region = `${address} `
							
			                this.form.id = id
			                this.form.content = content
			                this.form.name = name
			                this.form.company = company
			                this.form.intro = intro
							this.form.contact = contact
							this.form.image = image
			            }
			        })
			    } catch (err) {
			        this.$nextTick(() => {
			            this.isFirstLoading = false;
			        });
			    }
			},
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					return;
				}
				uni.redirectTo({
					url: '/pages/login/login'
				});
			},
			
			async getComplainCategoryFun() {
				const {
					code,
					data
				} = await getComplainCategory()
				if (code == 1) {
					this.shopCategory = data.lists
					this.form.cid = this.shopCategory[0].id
					this.form.clabel = this.shopCategory[0].name
				}
			},
			// 提交表单
			async onSubmit() {
				const {
					form,
					fileList
				} = this
				const submitObj = {
					...form,
					image: fileList[0],
					content:this.content
				}
				console.log("表单内容",submitObj)
				let {
					addressObj: {
						contact,
						province_id,
						city_id,
						district_id,
						is_default,
						address
					},
					addressId,
					region,
				} = this;
				submitObj.province_id =  parseInt(province_id)
				submitObj.city_id = parseInt(city_id)
				
				if (!submitObj.name || submitObj.name == ""){
					return this.$toast({
					    title: '请输入机构名称',
					});
				}
				if (!submitObj.company || submitObj.company == ""){
					return this.$toast({
					    title: '请输入企业名称',
					});
				}
				
				if (!submitObj.contact || submitObj.contact == ""){
					return this.$toast({
					    title: '请输入联系方式',
					});
				}
				if (!submitObj.intro || submitObj.intro == ""){
					return this.$toast({
					    title: '请输入简介内容',
					});
				}
			
				   
					
				delete submitObj.clabel
				const {
					data,
					code,
					msg
				} = await organ(submitObj)
				
				if(code == 1) {
					this.$toast({
						title: msg
					})
					setTimeout(() => {
						this.$Router.replace({
							path: '/bundle/pages/user/organ_recode',
							query: {
								id: data.id
							}
						})
					},1000)	
				}
			},
			confirmSelect(e) {
				const {
					value,
					label
				} = e[0]
				this.form.cid = value
				this.form.clabel = label
			},
			onSuccess(e) {
				this.fileList.push(e.data.base_uri)
			},
			onRemove(index) {
				this.fileList.splice(index, 1)
				console.log(index)
			},
			regionChange(region) {
				console.log(region)
				this.addressObj.province_id = region[0].value;
				this.addressObj.city_id = region[1].value;
				// this.addressObj.district_id = region[2].value; + " " + region[2].label
				this.region = region[0].label + " " + region[1].label 
			},
		},

	}
</script>

<style lang="scss">
	.store-settled {
		background-color: #FA844C;
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;

		.content {
			margin-top: 60rpx;
			padding: 0 20rpx 31rpx;

			.apply-form {
				border-radius: 8px;
				padding: 20rpx 0 30rpx 26rpx;

				.apply-form-item {
					.send-code-btn {
						height: 56rpx;
						width: 188rpx;
						border: 1rpx solid $-color-primary;
					}
				}

				.primary-btn {
					width: 100%;
					height: 88rpx;
					background-color: $-color-primary;
				}
			}
		}

		// .pop-categories {
		// 	.reason-item {
		// 		padding: 24rpx 20rpx;

		// 		.reason-desc {
		// 			line-height: 46rpx;
		// 		}
		// 	}
		// }
	}
</style>
