<template>
	<u-form :model="formData" ref="dataForm" :errorType="['toast']" label-position="left" label-width="150">
		<u-form-item :label="item.label" :prop="item.id" v-for="(item, i) in formConfCopy" :key="i">
			<template v-if="webType != 4">
				<block v-if="useInputList.indexOf(item.__config__.jnpfKey) > -1">
					<u-input input-align='right' v-model="formData[item.id]" :placeholder="'请输入'+item.label" />
				</block>
				<block v-if="item.__config__.jnpfKey==='inputNumber'||item.__config__.jnpfKey==='calculate'">
					<jnpf-num-range v-model="formData[item.id]"
						:precision="!item.precision && item.__config__.jnpfKey=='calculate'?0:item.precision " />
				</block>
				<view v-if="item.__config__.jnpfKey==='switch'" class="u-flex u-form-item-switch">
					<jnpf-switch v-model="formData[item.id]"></jnpf-switch>
				</view>
				<block v-if="['select','radio','checkbox'].indexOf(item.__config__.jnpfKey) > -1">
					<jnpf-select v-model="formData[item.id]" :placeholder="'请选择'+item.label" :options="item.options"
						:props="item.props" :multiple="item.searchMultiple">
					</jnpf-select>
				</block>
				<block v-if="item.__config__.jnpfKey==='cascader'">
					<jnpf-cascader v-model="formData[item.id]" :placeholder="'请选择'+item.label" :options="item.options"
						:props="item.props" :filterable='item.filterable' :showAllLevels="item.showAllLevels"
						:multiple="item.searchMultiple">
					</jnpf-cascader>
				</block>
				<!-- 下拉补全 -->
				<block v-if="item.__config__.jnpfKey==='autoComplete'">
					<jnpf-auto-complete :interfaceName="item.interfaceName" :placeholder="item.placeholder"
						:interfaceId="item.interfaceId" :total="item.total" v-model="formData[item.id]"
						:templateJson="item.templateJson" :formData='formData' :relationField="item.relationField"
						:propsValue="item.propsValue" :clearable='item.clearable'></jnpf-auto-complete>
				</block>
				<block
					v-if="useDateList.indexOf(item.__config__.jnpfKey) > -1 || item.__config__.jnpfKey==='timePicker'">
					<jnpf-date-range v-model="formData[item.id]" :format='item.format'
						:jnpfKey="item.jnpfKey==='timePicker'?'time':'date'" />
				</block>
				<block v-if="item.__config__.jnpfKey==='rate'">
					<u-rate v-model="formData[item.id]" size="40" :count="item.count">
					</u-rate>
				</block>
				<block v-if="item.__config__.jnpfKey==='slider'">
					<jnpf-slider v-model="formData[item.id]" :step="item.step" :min="item.min||0"
						:max="item.max||100" />
				</block>
				<block v-if="item.__config__.jnpfKey==='groupSelect'">
					<jnpf-group-select :vModel='item.id' v-model="formData[item.id]" :multiple="item.searchMultiple"
						:disabled="item.disabled" :placeholder="item.placeholder" :ableIds="item.ableIds"
						:selectType="item.selectType" />
				</block>
				<block v-if="item.__config__.jnpfKey==='roleSelect'">
					<jnpf-role-select :vModel='item.id' v-model="formData[item.id]" :multiple="item.searchMultiple"
						:disabled="item.disabled" :placeholder="item.placeholder" :ableIds="item.ableIds"
						:selectType="item.selectType" />
				</block>
				<block v-if="item.__config__.jnpfKey==='organizeSelect'||item.__config__.jnpfKey==='currOrganize'">
					<jnpf-com-select v-model="formData[item.id]" :placeholder="'请选择'+item.label"
						:multiple="item.searchMultiple" :ableIds="item.ableIds" :selectType="item.selectType">
					</jnpf-com-select>
				</block>
				<block v-if="item.__config__.jnpfKey==='depSelect'||item.__config__.jnpfKey==='currDept'">
					<jnpf-postordep-select type="department" v-model="formData[item.id]" :placeholder="'请选择'+item.label"
						:ableIds="item.ableIds" :selectType="item.selectType" :multiple="item.searchMultiple">
					</jnpf-postordep-select>
				</block>
				<block v-if="item.__config__.jnpfKey==='posSelect'||item.__config__.jnpfKey==='currPosition'">
					<jnpf-postordep-select type="position" v-model="formData[item.id]" :placeholder="'请选择'+item.label"
						:ableIds="item.ableIds" :selectType="item.selectType" :multiple="item.searchMultiple">
					</jnpf-postordep-select>
				</block>
				<block v-if="['userSelect','createUser', 'modifyUser'].indexOf(item.__config__.jnpfKey) > -1">
					<jnpf-user-select v-model="formData[item.id]" :placeholder="'请选择'+item.label"
						:ableIds="item.ableIds" :selectType="item.selectType!='custom'?'all':'custom'" :bh="650"
						:multiple="item.searchMultiple">
					</jnpf-user-select>
				</block>
				<!-- 用户组件 -->
				<block v-if="item.__config__.jnpfKey==='usersSelect'">
					<jnpf-user-choice v-model="formData[item.id]" :multiple="item.searchMultiple"
						:placeholder="'请选择'+item.label" :selectType="item.selectType" :ableIds="item.ableIds"
						:clearable="item.clearable">
					</jnpf-user-choice>
				</block>
				<block v-if="item.__config__.jnpfKey==='treeSelect'">
					<jnpf-tree-select v-model="formData[item.id]" :options="item.options" :props="item.props"
						:placeholder="'请选择'+item.label" :filterable='item.filterable' :multiple="item.searchMultiple">
					</jnpf-tree-select>
				</block>
				<block v-if="item.__config__.jnpfKey==='areaSelect'">
					<jnpf-city-select v-model="formData[item.id]" :placeholder="'请选择'+item.label" :level="item.level"
						:multiple="item.searchMultiple">
					</jnpf-city-select>
				</block>
			</template>
			<template v-else>
				<block>
					<u-input input-align='right' v-model="formData[item.id]" :placeholder="'请输入'+item.label" />
				</block>
			</template>
		</u-form-item>
	</u-form>
</template>
<script>
	import {
		getDictionaryDataSelector,
		getDataInterfaceRes
	} from '@/api/common'
	const dyOptionsList = ['radio', 'checkbox', 'select', 'cascader', 'treeSelect']
	const useInputList = ['input', 'textarea', 'text', 'billRule']
	const useDateList = ['datePicker', 'createTime', 'modifyTime']
	const useArrList = ['cascader', 'areaSelect', 'inputNumber', 'calculate', ...useDateList]
	const isDef = ['userSelect', 'posSelect', 'depSelect', 'organizeSelect']
	export default {
		props: ['formConf', 'webType', 'searchFormData'],
		data() {
			const data = {
				useInputList,
				useDateList,
				formConfCopy: this.$u.deepClone(this.formConf),
				formData: this.$u.deepClone(this.searchFormData),
			}
			this.initRelationForm(data.formConfCopy)
			this.initFormData(data.formConfCopy, data.formData)
			return data
		},
		methods: {
			initFormData(componentList, formData) {
				componentList.forEach(cur => {
					const config = cur.__config__
					if (cur.id && !formData[cur.id]) {
						formData[cur.id] = cur.value;
					}
					if (dyOptionsList.indexOf(config.jnpfKey) > -1) {
						let isTreeSelect = config.jnpfKey === 'treeSelect' || config.jnpfKey === 'cascader'
						if (config.dataType === 'dictionary' && config.dictionaryType) {
							cur.options = []
							getDictionaryDataSelector(config.dictionaryType).then(res => {
								cur.options = res.data.list
							})
						}
						if (config.dataType === 'dynamic' && config.propsUrl) {
							cur.options = []
							getDataInterfaceRes(config.propsUrl).then(res => {
								cur.options = Array.isArray(res.data) ? res.data : []
							})
						}
					}
				})
			},
			initRelationForm(componentList) {
				componentList.forEach(cur => {
					const config = cur.__config__
					if (config.jnpfKey == 'relationFormAttr' || config.jnpfKey == 'popupAttr') {
						const relationKey = cur.relationField.split("_jnpfTable_")[0]
						componentList.forEach(item => {
							const noVisibility = Array.isArray(item.__config__.visibility) && !item
								.__config__.visibility.includes('app')
							if ((relationKey == item.id) && (noVisibility || !!item.__config__
									.noShow)) {
								cur.__config__.noShow = true
							}
						})
					}
					if (cur.__config__.children && cur.__config__.children.length) this.initRelationForm(cur
						.__config__.children)
				})
			},
			submitForm() {
				this.$refs.dataForm.validate(valid => {
					if (!valid) return
					for (let key in this.formData) {
						if (!this.formData[key]) this.formData[key] = undefined
						if (this.formData[key] && Array.isArray(this.formData[key]) && !this.formData[key]
							.length) {
							this.formData[key] = undefined
						}
					}
					this.$emit('submit', this.formData)
				})
			},
			resetForm() {
				this.$refs.dataForm.resetFields()
			}
		}
	}
</script>
<style lang="scss">
	/deep/.u-form-item {
		min-height: 112rpx;
	}
</style>