<template>
	<view class="container" :style="appThemeStyle">
		<!-- 标题 -->
		<view class="page-title">申请入驻</view>
			<!-- 合伙人 -->
			<Partner v-if=" currentType == 0 " :form="dataType[currentType]"
				@handleSubmit="handleSubmit" @chooseImage="chooseImage" @deleteImage="deleteImage" @showLicense="handleShowLicense" />
			<!-- 配送员 -->
			<Delivery v-if=" currentType == 1 " :form="dataType[currentType]"
				@handleSubmit="handleSubmit" @chooseImage="chooseImage" @deleteImage="deleteImage"  />
			<!-- 团长 -->
			<Teamer v-if=" currentType == 2 " :form="dataType[currentType]"
				@handleSubmit="handleSubmit" @chooseImage="chooseImage" @deleteImage="deleteImage"  />
			<!-- 个人商户 -->
			<Personal v-if=" currentType == 3 " :form="dataType[currentType]"
				@handleSubmit="handleSubmit" @chooseImage="chooseImage" @deleteImage="deleteImage"  />
		
		<!-- 入驻协议弹窗 -->
		<u-modal v-model="showLicense" title="入驻协议">
			<scroll-view class="pops-content" :scroll-y="true">
				<text>{{ dataType[currentType].license }}</text>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	import * as ApplyApi from '@/api/apply.js'
	import * as UploadApi from '@/api/upload'
	import SettingModel from '@/common/model/dealer/Setting'
	import Partner from './components/partner.vue'
	import Delivery from './components/delivery.vue'
	import Teamer from './components/teamer.vue'
	import Personal from './components/personal.vue'

	// 数据类型
	const dataType = [
		{
			name: "商户",
			title: '申请成为商户',
			label: "partner",
			regionText: '所在地区',
			licenseTitle: '',
			license: '',
			submitText: '提交申请',
			disabled: false,
			longitude: '',
			latitude: '',
			imageProp: ["sfz1", "sfz2", "yyzz"],
			itemLabel: ["身份证(正)", "身份证(反)", "营业执照"],
			imageList: [{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
						size: 0
					},{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
						size: 0
					},
					{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/55faad35f5ee30f3e8791bdfd2f75eb9.png',
						size: 0
					}],
			
		},
		{
			name: "配送员",
			title: '申请成为配送员',
			label: "delivery",
			regionText: '意向配送区域',
			licenseTitle: '',
			license: '',
			submitText: '提交申请',
			disabled: false,
			longitude: '',
			latitude: '',
			imageProp: ["sfz1", "sfz2", "yyzz"],
			itemLabel: ["身份证(正)", "身份证(反)", "营业执照"],
			imageList: [{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
						size: 0
					},{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
						size: 0
					},
					{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/55faad35f5ee30f3e8791bdfd2f75eb9.png',
						size: 0
					}],
			
		},
		{
			name: "团长",
			title: '申请成为团长',
			label: "teamer",
			regionText: '所在地区',
			licenseTitle: '',
			license: '',
			submitText: '提交申请',
			disabled: false,
			longitude: '',
			latitude: '',
			imageProp: ["sfz1", "sfz2", "yyzz"],
			itemLabel: ["身份证(正)", "身份证(反)", "营业执照"],
			imageList: [{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
						size: 0
					},{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
						size: 0
					},
					{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/55faad35f5ee30f3e8791bdfd2f75eb9.png',
						size: 0
					}],
			
		},
		{
			name: "个人商户",
			title: '申请成为个人商户',
			label: "personal",
			regionText: '所在地区',
			submitText: '提交申请',
			licenseTitle: '',
			license: '',
			disabled: false,
			longitude: '',
			latitude: '',
			imageProp: ["sfz1", "sfz2", "yyzz"],
			itemLabel: ["身份证(正)", "身份证(反)", "营业执照"],
			imageList: [{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
						size: 0
					},{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
						size: 0
					},
					{
						path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/55faad35f5ee30f3e8791bdfd2f75eb9.png',
						size: 0
					}],
			
		}
	]
	
	export default {
		components: {
			Partner,
			Delivery,
			Teamer,
			Personal
		},
		data() {
			return {
				// 数据类型
				dataType,
				// 当前类型
				currentType: 0,
				// 文字设置
				words: undefined,
				// 显示入驻协议弹窗
				showLicense: false,
				// 入驻协议阅读状态
				isRead: false,
				// 当前记录
				form: {},
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			const app = this
			// 切换类型
			this.setDataType(options.dataType)
			// 获取设置信息
			this.getSetting()
			// 获取用户坐标及当前入驻申请记录
			app.getLocation((res) => {
				app.getData(res.longitude, res.latitude)
			})
		},
		methods: {
			// 切换类型
			setDataType(dataType) {
				if (dataType == 'partner') {
					this.currentType = 0
				}
				if (dataType == 'delivery') {
					this.currentType = 1
				}
				if (dataType == 'teamer') {
					this.currentType = 2
				}
				if (dataType == 'personal') {
					this.currentType = 3
				}
				console.log("dataType: ",this.dataType[this.currentType]);
			},

			// 获取用户坐标
			// 参考文档：https://uniapp.dcloud.io/api/location/location?id=getlocation
			getLocation(callback) {
				const app = this
				uni.getLocation({
					type: 'wgs84',
					success: callback,
					fail() {
						app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
						app.isAuthor = false
					}
				})
			},

			// 加载数据
			getData(longitude, latitude) {
				const app = this
				const { currentType, dataType } = this
				dataType[currentType].longitude = longitude
				dataType[currentType].latitude = latitude
				ApplyApi.detail().then(res => {
					const detail = res.data.detail
					console.log("detail: ",detail);
					// 编辑信息
					if (detail) {
						app.createFormData(detail)
					}
				})
			},

			// 生成默认的表单数据
			createFormData(detail) {
				const {
					form
				} = this
				form.region = this.createRegion(detail)
				// 是否可编辑
				this.disabled = true
				// 状态
				console.log("recore.apply_status: ", form.apply_status);
				if (form.apply_status == 10) {
					this.submitText = '待审核'
				}
				if (form.apply_status == 20) {
					this.submitText = '审核通过'
				}
				if (form.apply_status == 30) {
					this.submitText = '重新提交'
					this.disabled = false
				}

				// 加载图片
				this.imageList = detail.images.map(d => {
					return {
						path: d.image_url,
						size: 101
					}
				})
				form.images = detail.images.map(d => {
					return d.image_id
				})
			},

			// 地区
			createRegion(detail) {
				console.log("detail: ", detail);
				return [{
					label: detail.region.province,
					value: detail.province_id
				}, {
					label: detail.region.city,
					value: detail.city_id
				}, {
					label: detail.region.region,
					value: detail.region_id
				}]
			},

			// 获取分销设置
			getSetting() {
				const app = this
				SettingModel.data()
					.then(setting => {
						app.dataType[app.currentType].licenseTitle = setting.words.apply.words.license.value
						// // 赋值属性
						app.dataType[app.currentType].license = setting.license.license
						// 设置当前页面标题
						app.setPageTitle()
					})
			},

			// 设置当前页面标题
			setPageTitle() {
				uni.setNavigationBarTitle({
					title: this.dataType[this.currentType].title
				})
			},
			
			// 选择图片
			chooseImage(imageIndex,tempFiles){
				console.log("imageIndex: ",imageIndex);
				console.log("tempFiles: ",tempFiles);
				const {dataType, currentType} = this
				dataType[currentType].imageList.splice(imageIndex,1,tempFiles)
			},
			
			// 删除图片
			deleteImage(imageIndex) {
				const { disabled } = this
				if (disabled == true) {
					return false
				}
				this.imageList[imageIndex].path = '/static/not-dealer.png'
			},
			
			// 显示入驻协议弹窗
			handleShowLicense(e) {
				this.showLicense = e
			},
			
			// 提交到后台
			handleSubmit(form,imageList){
				const app = this
				if (app.disabled) {
					return false
				}
				app.disabled = true
				app.form = form
				ApplyApi.checkAvailable(form).then(res => {
					if (imageList.length > 0 && imageList[0].size != 100) {
						app.uploadFile()
							.then(() => app.onSubmit())
							.catch(err => {
								app.disabled = false
								if (err.statusCode !== 0) {
									app.$toast(err.errMsg)
								}
								console.log('err', err)
							})
					} else {
						app.onSubmit()
					}
				}).catch(err => {
					console.log("err: ", err);
					if (err.statusCode == 0) {
						app.disabled = false
						app.$toast(err.errMsg)
						return false
					}
				})
			},
			// 上传图片
			uploadFile() {
				const app = this
				const {
					imageList,
					form
				} = app
				// 批量上传
				return new Promise((resolve, reject) => {
					if (imageList.length > 0) {
						UploadApi.image(imageList)
							.then(fileIds => {
								form.images = fileIds
								resolve(fileIds)
							})
							.catch(reject)
					} else {
						resolve()
					}
				})
			},
			
			// 提交到后端
			onSubmit() {
				const app = this
				const {
					form
				} = this
				let req;
				if (form.apply_status == 30) {
					req = ApplyApi.edit(form.apply_id, form)
				} else {
					req = ApplyApi.add(form)
				}
				req.then(result => {
						console.log("result: ", result);
						app.$toast(result.message)
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
			
					})
					.finally(() => app.disabled = false)
			}
		}
	}
</script>

<style>
	page {
		background: #f7f8fa;
	}
</style>
<style lang="scss" scoped>
	.page-title {
		width: 94%;
		margin: 0 auto;
		padding-top: 40rpx;
		font-size: 28rpx;
		color: rgba(69, 90, 100, 0.6);
	}
	.pops-content {
		padding: 20rpx;
	}
</style>
