<template>
	<div id="one-form">
		<el-form ref="oneForm" :inline="formGlobalConfig.inline" :model="oneForm" :rules="rules" :label-width="labelWidth" :size="formGlobalConfig.size" class="one_form_auto">
			<el-form-item v-for="item in formConfigList" :key="item.id" :label="item.name" :prop="item.id" :label-width="item.labelWidth">
				<el-radio-group v-if="item.type === 'radio'" v-model="oneForm[item.id]">
					<el-radio v-for="itemX in formConfigOptionsList[item.id]" :key="itemX.id" :label="itemX.id">{{ item.name }}</el-radio>
				</el-radio-group>
				<el-input v-if="item.type === 'input'" v-model="oneForm[item.id]" :placeholder="item.placeholder" @input="() => $forceUpdate()" />
				<el-checkbox-group v-if="item.type === 'checkbox'" v-model="oneForm[item.id]">
					<el-checkbox v-for="itemX in formConfigOptionsList[item.id]" :key="itemX.id" :label="item.id">{{ item.name }}</el-checkbox>
				</el-checkbox-group>
				<el-input-number v-if="item.type === 'inputNumber'" v-model="oneForm[item.id]" :min="item.min ? item.min : 0" :max="item.max ? item.max : 255" :label="item.name" />
				<el-select v-if="item.type === 'select'" v-model="oneForm[item.id]" :placeholder="item.placeholder">
					<el-option v-for="itemX in formConfigOptionsList[item.id]" :key="itemX.id" :label="itemX.name" :value="itemX.id" />
				</el-select>
				<el-cascader v-if="item.type === 'cascader'" v-model="oneForm[item.id]" :options="formConfigOptionsList[item.id]" />
				<el-switch v-if="item.type === 'switch'" v-model="oneForm[item.id]" active-color="#13ce66" inactive-color="#ff4949" />
				<el-time-select
					v-if="item.type === 'timeSelect'"
					v-model="oneForm[item.id]"
					:value-format="item.val123ueFormat ? item.valueFormat : 'HH:ss'"
					:placeholder="item.placeholder"
				/>
				<el-date-picker
					v-if="item.type === 'datePicker'"
					v-model="oneForm[item.id]"
					:format="item.format ? item.format : 'yyyy-MM-dd'"
					:value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'"
					type="date"
					placeholder="选择日期"
				/>
				<el-date-picker
					v-if="item.type === 'datetime'"
					v-model="oneForm[item.id]"
					:value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
					type="datetime"
					placeholder="选择日期时间"
				/>
				<el-date-picker
					v-if="item.type === 'daterange'"
					v-model="oneForm[item.id]"
					type="daterange"
					:range-separator="item.rangeSeparator || '至'"
					:start-placeholder="item.startPlaceholder || '开始日期'"
					:end-placeholder="item.endPlaceholder || '结束日期'"
				/>
				<el-rate v-if="item.type === 'rate'" v-model="oneForm[item.id]" :max="item.max ? item.max : 5" />
				<el-color-picker v-if="item.type === 'colorPicker'" v-model="oneForm[item.id]" />
			</el-form-item>
			<el-form-item v-if="isTable">
				<el-button type="primary" icon="el-icon-search" :size="formGlobalConfig.size" @click="submitSearch">查询</el-button>
				<el-button type="danger" icon="el-icon-refresh" :size="formGlobalConfig.size" @click="submitRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- <div class="one-form-button">
      <el-button type="primary" icon="el-icon-search" size="small" @click="submitSearch">查询</el-button>
      <el-button type="danger" icon="el-icon-refresh" size="small" @click="submitRefresh">重置</el-button>
    </div> -->
	</div>
</template>
<script type="text/javascript">
import { deepClone } from './common/common.js'
export default {
	name: 'OneForm',
	components: {},
	props: {
		formGlobalConfigProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		// 表单校验规则
		formRules: {
			type: Object,
			default: () => {
				return {}
			}
		},
		// 名字长度
		labelWidth: {
			type: String,
			default: '80px'
		},
		// 表单数据
		tableFormSearchConfig: {
			type: Array,
			default: () => {
				return []
			}
		},
		// 选项数据
		formConfigOptionsList: {
			type: Object,
			default: () => {
				return []
			}
		},
		// 是否为table表格的搜索区域
		isTable: {
			type: Boolean,
			default: () => {
				return false
			}
		}
	},
	data() {
		return {
			formConfigList: [], // 数组数据
			// 表单数据
			oneForm: {},
			rules: {}
		}
	},
	computed: {
		formGlobalConfig() {
			const param = {
				size: 'mini',
				inline: false
			}
			Object.assign(param, this.formGlobalConfigProps)
			return param
		}
	},
	watch: {},
	created() {
		const configData = this.tableFormSearchConfig
		this.formConfigList = configData
		const congfigRules = {}
		const configForm = {}
		configData.forEach(item => {
			configForm[item.id] = item.value
			if (item.rules) {
				congfigRules[item.id] = item.rules
			}
		})
		Object.assign(this.rules, congfigRules)
		this.oneForm = deepClone(configForm)
	},
	mounted() {},
	methods: {
		// 提交查询
		submitSearch() {
			this.$refs.oneForm.validate(valid => {
				if (valid) {
					this.$emit('search', this.oneForm)
				}
			})
		},
		// 提交重置
		submitRefresh() {
			Object.keys(this.oneForm).forEach(key => {
				this.oneForm[key] = ''
			})
			this.$emit('refresh', this.oneForm)
		}
	}
}
</script>
<style>
#one-form {
	margin: 10px 0;
}
.one-form-button {
	text-align: right;
}
</style>
