<template>
	<view>
		<!-- 信息 -->
		<view class="section">
			<uni-list>
				<view v-for="(item,index) in formDatas" :key="index">
					<uni-list-item :title="item.label" :showArrow="item.arrow" :rightText="item.placeholder">
						<template v-slot:footer>
							<block v-if="!item.arrow">
								<input class="list-item-left" v-model="item.value" type="text"
									:placeholder="item.placeholder" />
							</block>
						</template>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<!-- 地址 -->
		<view class="section">
			<uni-list>
				<uni-list-item @tap="selectAddress" :title="address.area.label" :showArrow="address.area.arrow"
					:rightText="selects.registryAddress">

				</uni-list-item>
				<uni-list-item :title="address.detail.label">
					<template v-slot:footer>
						<input class="list-item-left" style="text-align: right;" v-model="address.detail.value"
							type="text" :placeholder="address.detail.placeholder" />
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 客户分类 -->
		<view class="section" style="padding: 0 40rpx;">
			<uni-forms-item>
				<template #label>
					<view style="height: 88rpx;line-height: 120rpx;">
						{{$t('index.customer-type')}}
					</view>
				</template>
				<view style="padding-left: 40rpx;">
					<uni-data-checkbox v-model="selects.industryName" :localdata="customerTypes"></uni-data-checkbox>
				</view>
			</uni-forms-item>
		</view>
		<!-- 客户角色 -->
		<view class="section" style="padding: 0 40rpx;">
			<uni-forms-item>
				<template #label>
					<view style="height: 88rpx;line-height: 120rpx;">
						{{$t('index.apply-role')}}
					</view>
				</template>
				<view style="padding-left: 40rpx;">
					<uni-data-checkbox @change="change" v-model="selects.roles" multiple
						:localdata="roles"></uni-data-checkbox>
				</view>
			</uni-forms-item>
		</view>
		<!-- 经营主体 -->
		<view class="section" style="padding: 0 40rpx;" v-if="isSeller">
			<uni-forms-item>
				<template #label>
					<view style="height: 88rpx;line-height: 120rpx;">
						{{$t('index.business-entity')}}
					</view>
				</template>
				<view style="padding-left: 40rpx;">
					<uni-data-checkbox v-model="selects.businessEntities" multiple
						:localdata="entities"></uni-data-checkbox>
				</view>
			</uni-forms-item>
		</view>
		<!-- 楼层 -->
		<view class="section" v-if="isSeller">
			<uni-list-item>
				<template v-slot:header>
					<view style="height: 88rpx;line-height: 88rpx;font-size: 28rpx;color: #333;padding-left: 10rpx;">
						{{$t('index.floor')}}
					</view>
				</template>
				<template v-slot:footer>
					<uni-data-picker :border="false" :placeholder="$t('index.select')+$t('index.floor')" v-model="floor"
						:localdata="dataTree" @change="onchange"></uni-data-picker>
				</template>
			</uni-list-item>
		</view>

		<!-- 店铺类型 -->
		<view class="section" style="padding: 0 40rpx;" v-if="isSupplier">
			<uni-forms-item>
				<template #label>
					<view style="height: 88rpx;line-height: 120rpx;">
						{{$t('index.shop-type')}}
					</view>
				</template>
				<view style="padding-left: 40rpx;">
					<uni-data-checkbox v-model="selects.shopType" :localdata="shopTypes"></uni-data-checkbox>
				</view>
			</uni-forms-item>
		</view>

		<!-- 营业执照 -->
		<view class="section" style="padding: 0 40rpx 40rpx 40rpx;">
			<view style="height: 88rpx;line-height: 88rpx;">
				{{$t('index.business-license')}}
			</view>
			<uni-file-picker @delete="license=false" @select="selectBusinessLicense" file-mediatype="image"
				:limit="1"></uni-file-picker>
		</view>

		<!-- 操作人员委托授权书 -->
		<view class="section" style="padding: 0 40rpx 40rpx 40rpx;">
			<view style="height: 88rpx;line-height: 88rpx;">
				{{$t('index.operator-contract')}}
			</view>
			<uni-file-picker @delete="operatorAuth=false" @select="selectOperatorAuth" file-mediatype="image"
				:limit="1"></uni-file-picker>
		</view>

		<!-- 公司简介 -->
		<view class="section" style="padding: 0 40rpx 40rpx 40rpx;">
			<view style="height: 88rpx;line-height: 88rpx;">
				{{$t('index.company-introduce')}}
			</view>
			<uni-easyinput type="textarea" v-model="selects.introduce"
				:placeholder="$t('index.enter')+$t('index.company-introduce')"></uni-easyinput>
		</view>
		<view style="padding-bottom: 44rpx;">
			<view class="btn" @click="registerEvent">
				<view>
					{{$t('index.register')}}
				</view>
			</view>
		</view>

		<cityPicker :column="column" @confirm="confirm" @cancel="visiable=false" :visible="visiable" />
	</view>
</template>

<script>
	import {
		getCustomerType,
		getBusinessEntity,
		getFloorInfo,
		uploadFile,
		updateEnterpriseInfo,
		getShopType
	} from '@/config/api.js'
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'

	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				id: '',
				license: false,
				operatorAuth: false,
				formDatas: [{
						label: '*' + this.$t('index.company-name'),
						keyName: "companyName",
						placeholder: this.$t('index.enter') + this.$t('index.company-name'),
						value: "",
						arrow: false
					},
					{
						label: '*' + this.$t('index.legal-person-name'),
						keyName: "legalName",
						placeholder: this.$t('index.enter') + this.$t('index.legal-person-name'),
						value: "",
						arrow: false
					},
					{
						label: '*' + this.$t('index.contact-name'),
						keyName: "contactName",
						placeholder: this.$t('index.enter') + this.$t('index.contact-name'),
						value: "",
						arrow: false
					},
					{
						label: '*' + this.$t('index.telephone'),
						keyName: "contactPhone",
						placeholder: this.$t('index.enter') + this.$t('index.telephone'),
						value: "",
						arrow: false
					},
					{
						label: '*' + this.$t('index.credit-code'),
						keyName: "creditCode",
						placeholder: this.$t('index.enter') + this.$t('index.credit-code'),
						value: "",
						arrow: false
					},
					{
						label: '*' + this.$t('index.email'),
						keyName: "postal",
						placeholder: this.$t('index.enter') + this.$t('index.email'),
						value: "",
						arrow: false
					}
				],
				address: {
					area: {
						label: '*' + this.$t('index.register-region'),
						keyName: "area",
						placeholder: this.$t('index.select') + this.$t('index.register-region'),
						value: "",
						arrow: true
					},
					detail: {
						label: '*' + this.$t('index.detail-address'),
						keyName: "introduce",
						placeholder: this.$t('index.enter') + this.$t('index.detail-address'),
						value: "",
						arrow: false
					}
				},
				customerTypes: [],
				roles: [{
						value: "buyer",
						text: this.$t('index.buyer'),
						disable: false
					},
					{
						value: "seller",
						text: this.$t('index.seller'),
						disable: false
					},
					{
						value: "supplier",
						text: this.$t('index.supplier'),
						disable: false
					}
				],
				entities: [],
				floor: '',
				dataTree: [],
				selects: {
					industryName: null,
					roles: [],
					businessEntities: [],
					floor: [],
					province: '',
					city: '',
					district: '',
					registryAddress: this.$t('index.select') + this.$t('index.register-region'),
					introduce: '',
					floorId: '',
					floorName: '',
					shopType: ''
				},
				authApplyFiles: [],
				column: 3,
				visiable: false,
				shopTypes: []
			}
		},
		computed: {
			isSeller() {
				return this.selects.roles.indexOf('seller') != -1
			},
			isSupplier() {
				return this.selects.roles.indexOf('supplier') != -1
			}
		},
		methods: {
			async getCustomerType() {
				const {
					content
				} = await getCustomerType()
				content.forEach(item => {
					item.text = item.label
				})
				this.customerTypes = [...content]
			},
			async getBusinessEntity() {
				const {
					content
				} = await getBusinessEntity()
				content.forEach(item => {
					item.text = item.value
				})
				this.entities = [...content]
			},
			async getFloorInfo() {
				const {
					content
				} = await getFloorInfo()
				content.forEach(item => {
					item.text = item.floorLevel
					item.value = item.floorLevel
					item.children.forEach(child => {
						child.text = child.floorLevel
						child.value = child.id
					})
				})
				this.dataTree = [...content]
			},
			async getShopType() {
				const {
					content
				} = await getShopType()
				content.forEach(item => {
					item.text = item.value
				})
				this.shopTypes = [...content]
			},
			change(e) {
				if (e.detail.value.indexOf('seller') != -1) {
					this.roles[2].disable = true
				} else {
					this.roles[2].disable = false
				}
				if (e.detail.value.indexOf('supplier') != -1) {
					this.roles[1].disable = true
				} else {
					this.roles[1].disable = false
				}
			},
			selectBusinessLicense(res) {
				this.license = true
				let index = -1
				for (let i = 0; i < this.authApplyFiles.length; i++) {
					if (this.authApplyFiles[i].authName == '企业授权材料') {
						index = i
						break
					}
				}
				if (index != -1) {
					this.authApplyFiles.splice(index, 1)
				}
				uploadFile({
					filePath: res.tempFilePaths[0],
					name: 'file',
					formData: { //其他需要携带的参数
						'modelType': 'default'
					}
				}).then(resp => {
					let content = resp.content
					this.authApplyFiles.push({
						authCode: 'authMaterials',
						authFieldId: content.id,
						authFileName: content.fileName,
						authFilePath: content.filePath,
						authName: '企业授权材料',
						platformType: '',
						productType: ''
					})
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			selectOperatorAuth(res) {
				this.operatorAuth = true
				let index = -1
				for (let i = 0; i < this.authApplyFiles.length; i++) {
					if (this.authApplyFiles[i].authName == '营业执照') {
						index = i
						break
					}
				}
				if (index != -1) {
					this.authApplyFiles.splice(index, 1)
				}
				uploadFile({
					filePath: res.tempFilePaths[0],
					name: 'file',
					formData: { //其他需要携带的参数
						'modelType': 'default'
					}
				}).then(resp => {
					let content = resp.content
					this.authApplyFiles.push({
						authCode: 'authLicense',
						authFieldId: content.id,
						authFileName: content.fileName,
						authFilePath: content.filePath,
						authName: '营业执照',
						platformType: '',
						productType: ''
					})
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			selectAddress() {
				this.visiable = true
			},
			confirm(res) {
				this.selects.district = res.code
				this.selects.registryAddress = `${res.provinceName},${res.cityName},${res.areaName}`
				this.visiable = false
			},

			onchange(e) {

				let arr = e.detail.value
				let floorIds = []
				let floorNames = []
				arr.forEach(item => {
					floorIds.push(item.value)
					floorNames.unshift(item.text)
				})

				this.selects.floorId = floorIds.join(',')
				this.selects.floorName = floorNames.join('/')
			},
			registerEvent() {
				let msg
				if (!this.operatorAuth) msg =
					`${this.$t('index.select')}${this.$t('index.operator-contract')}`
				if (!this.license) msg =
					`${this.$t('index.select')}${this.$t('index.business-license')}`
				if (this.isSeller) {
					if (this.selects.floorId == '') msg = `${this.$t('index.select')}${this.$t('index.floor')}`
					if (this.selects.businessEntities.length == 0) msg =
						`${this.$t('index.select')}${this.$t('index.business-entity')}`
				}
				if (this.isSupplier) {
					if (this.selects.shopType == '') `${this.$t('index.select')}${this.$t('index.shop-type')}`
				}
				if (this.selects.roles.length == 0) msg = `${this.$t('index.select')}${this.$t('index.apply-role')}`
				if (this.selects.industryName == null) `${this.$t('index.select')}${this.$t('index.customer-type')}`
				if (this.selects.manageAddressDetail == '')
					`${this.$t('index.enter')}${this.$t('index.detail-address')}`
				if (this.selects.registryAddress == '') `${this.$t('index.select')}${this.$t('index.register-region')}`
				for (let i = this.formDatas.length - 1; i >= 0; i--) {
					let form = this.formDatas[i]
					if (form.value == '') {
						msg = form.placeholder
					}
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					return
				}

				let ids = []
				this.entities.forEach(item => {
					if (this.selects.businessEntities.indexOf(item.text) != -1) {
						ids.push(item.id)
					}
				})

				let params = {
					authApplyFiles: this.authApplyFiles,
					authChannel: 'customer_application',
					businessEntityId: ids.join(','),
					businessEntityName: this.selects.businessEntities.join(','),
					district: this.selects.district,
					manageAddressDetail: this.address.detail.value,
					registryAddress: this.selects.registryAddress,
					floorId: this.selects.floorId,
					floorName: this.selects.floorName,
					introduce: this.selects.introduce,
					industry: this.selects.industryName,
					customerRole: this.selects.roles.join(','),
					retainedId: this.id
				}
				this.formDatas.forEach(item => {
					params[item.keyName] = item.value
				})

				this.shopTypes.forEach(item => {
					if (this.selects.shopType == item.id) {
						params.shopTypeId = item.id
						params.shopTypeName = item.text
					}
				})

				this.customerTypes.forEach(item => {
					if (item.value == this.selects.industryName) {
						params.industryName = item.text
					}
				})
				params.province = this.selects.district.substring(0, 2) + '0000'
				params.city = this.selects.district.substring(0, 4) + '00'

				updateEnterpriseInfo(params).then(res => {
					uni.showToast({
						title: this.$t('index.msg-register-succ')
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getCustomerType()
			this.getBusinessEntity()
			this.getFloorInfo()
			this.getShopType()
		}
	}
</script>

<style lang="scss">
	.section {
		margin-top: 20rpx;
		background: #fff;
	}

	.list-item-left {
		width: 400rpx;
		text-align: left;
		font-size: 14px;
		color: #333;
	}

	.btn {
		margin: 88rpx 40rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #b60001;
		color: white;
		font-weight: 500;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
</style>