
<!-- 
/**
  * 表单通用组件
  *	@example1: 
		1, 引入
			import cuForm from '@/components/cuForm';

		2, 注册
			export default {
				components: {
					cuForm
				},
				data() {
					return {
						Dict:{selectList:[]},
						rules: {},
						form: {
							title:'', visible:false, reqType:'add', historyDialog:false,
							status:{cu:0},
							query:{},
							search:{},
							item:{},
							file:0,
							config:{},
						},
					}
				},
				mounted(){
					// 获取基本信息
					this.pageApi = Config.getModuleInfo(this);
					this.Dict = this.pageApi.Dict;
					this.form.search = this.Dict.search;
					this.form.config = this.pageApi.config;

					this.rules = reqApi.getRules(this.Dict.baseInfo) || (this.Dict.rules || {});
				},
				methods: {
					upload(e, key){
					},
					submitForm(form, item){
					},
				}
			}
		
		3, 创建
			<cu-form
				ref="cuForm" 
				:form="form"
				:Dict="Dict"
				:rules="rules"
				:submit="submitForm" 
				:upload="upload"
			/>

		#4, 使用

  * @author: Kimber
  * @updatetime: 2022/5/19(周四)
  * @createtime: 2021/12/09
  */
-->
<template>
	<el-dialog id="printJS-form" class="qyzz-dialog" append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" :width="form.config.formWidth || '50%'">
		<el-form :model="form.item" :rules="rules" :ref="ref" :inline="true" size="small" :label-width="(form.config.labelWidth || 80) + 'px'">
			<el-form-item v-for="(item, key) in Dict.baseInfo" :prop="item.rule || key" :label="item.name" v-if="item.form !== 0" :style="item.style">
				<template v-if="item.type === 'img'">
					<div class="img-upload">
						<label class="upload-area" for="imgUpload">
							<div class="img-box" v-show="form.item[key]">
								<img :src="item.src ? item.src.call(_self, form.item, key) : form.item[key]" v-model="form.item[key]">
							</div>
							<div class="upload-layer el-icon-plus" :class="{'show':!form.item[key]}">
								<input type="file" style="display:none" id="imgUpload" @change="item.change && item.change.call(_self.$parent, $event, key)">
							</div>
						</label>
					</div> 
				</template>
				<template v-else-if="new String(item.type).indexOf('date') === 0">
					<el-date-picker
						v-model="form.item[key]"
						:type="item.datetype || item.type"
						:value-format="item.format || 'yyyy-MM-dd'"
						:disabled="item.disabled"
						placeholder="选择日期时间">
					</el-date-picker>
				</template>
				<template v-else-if="item.type === 'select'">
					<el-select v-model="form.item[key]" :placeholder="item.name" size="small" :style="'width:'+(item.width || 'auto')" :disabled="item.disabled" :multiple="item.multiple || false" @change="eventTransmit(item.change)">
						<el-option v-for="obj in Dict.selectList[key]" :label="obj[item.key||'name']" :value="obj[item.val] || obj.value" ></el-option>
					</el-select>
				</template>
				<template v-else-if="item.type === 'filename'">
					<div class="file-box">
						<div v-if="!!form.item[key]" style="width:260px;">
							{{form.item[key]}} <label class="el-icon-edit btn2" for="cufilename"></label>
						</div>
						<label v-else class="upload-area el-icon-folder-add" for="cufilename" style="width:260px;font-size:30px"></label>
						<input type="file" style="display:none" id="cufilename" @change="item.change && item.change.call(_self.$parent, $event, key)">
					</div>
				</template>
				<template v-else-if="item.type === 'textarea'">
					<el-input v-model="form.item[key]" :style="'width:'+(item.width || 380)+'px;'" type="textarea"  :rows="item.rows" :disabled="item.disabled"/>
				</template>
				<template v-else-if="item.type === 'number'">
					<el-input-number v-model.number="form.item[key]" :min="0" controls-position="right" />
				</template>
				<template v-else-if="item.type === 'text'">
					<div class="form-text">{{form.item[key]}}</div>
				</template>
				<template v-else-if="item.type === 'radio'">
					<el-radio-group v-model="form.item[key]" @change="eventTransmit(item.change)">
						<el-radio v-for="obj in Dict.selectList[key]" :label="obj[item.val]" >{{obj[item.key]}}</el-radio>
					</el-radio-group>
				</template>
				<template v-else-if="item.type === 'checkbox'">
					<el-checkbox-group v-model="form.item[key]" @change="eventTransmit(item.change)">
						<el-checkbox v-for="obj in Dict.selectList[key]" :label="obj[item.val]" >{{obj[item.key]}}</el-checkbox>
					</el-checkbox-group>
				</template>
				<template v-else-if="item.type === 'map'">
					<el-input v-model="form.item[key]" :style="'width:'+(item.width || 260)+'px;'" :placeholder="item.placeholder || ('请输入' + item.name)" :disabled="item.disabled"/>
					<div class="map-ctn" :style="'width:'+(item.width || '80%')+';'+'height:'+(item.mapHeight || '180px')+';'">
						<cu-amap 
							ref="amap" 
							:options="item.mapConfig.options"
							:parent="_self"
						/>
					</div>
				</template>
				<!-- 富文本 -->
				<template v-else-if="item.type === 'editor'">
					<wang-editor 
						style="height:500px; overflow-y:hidden;" 
						:item="form.item"
						:name="key"
						:Dict="Dict"
						:upload="item.change"
						:formvue="_self.$parent"
					/>
				</template>
				<template v-else>
					<el-input v-if="item.ruleType==='number'" v-model.number="form.item[key]" :style="'width:'+(item.width || 260)+'px;'" :placeholder="item.placeholder || ('请输入' + item.name)" :disabled="item.disabled" @input="item.input && item.input.call(_self, $event)"/>
					<el-input v-else v-model="form.item[key]" :style="'width:'+(item.width || 260)+'px;'" :placeholder="item.placeholder || ('请输入' + item.name)" :disabled="item.disabled" @input="item.input && item.input.call(_self, $event)"/>
				</template>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="text" @click="cancelForm">取消</el-button>
			<el-button :loading="form.status.cu === 2" type="primary" @click="submit($refs[ref], form.item)">确认</el-button>
			<!-- <el-button v-for="(item, i) in form.config.formBtn" :type="item.type" @click="item.callback && item.callback.call(_self, $refs[ref], form.item)">{{item.name}}</el-button> -->
		</div>
	</el-dialog>
</template>
<script>
import cuAmap from '@/components/AMap';
import WangEditor from '@/components/WangEditor/index'
export default {
	data() {
		return {
			ref:'form1',
		}
	},
	components: {cuAmap, WangEditor},
	props:{
		form: {
			type: Object,
			default: {},
		},
		rules: {
			type: Object,
			default: {},
		},
		Dict: {
			type: Object,
			default: {},
		},
		submit: {
			type: Function,
			default: () => {}
		},
	},
	beforeCreate(){
	},
	created(){
	},
	mounted() {
	},
	methods: {
		eventTransmit:qf.Vue.onEventInfos,
		cancelForm(){this.$parent.form.visible = false;},
	},
}
</script>
<style lang="scss" scope>
	.qyzz-dialog{
		display:flex;justify-content:center;align-items:center;
		.el-form .block{display:block;}
		.el-form .flex{display:flex;}
		.img-upload{
			position:relative;
			.img-box{width:300px;height:200px;}
			img{display:block;border:0;height:100%;width:100%;}
			.upload-layer{
				width:250px;height:100px;display:none;justify-content:center;align-items:center;
				background-color:#fff;
				border:1px dashed rgba(0, 0, 0, 0.1);background-color:rgba(0, 0, 0, 0.05);cursor:pointer;color:#999;
				flex-direction:column;justify-content:center;align-items:center;
				&:before{display:block;font-size:34px;}
				&:after{display:block;content:"上传图片,支持小于2MB的图片";line-height:18px;}
			}
			.upload-area{
				height:100%;width:100%;
			}
			.upload-layer.show{display:flex;}
			div.upload-text1{
				&:after{content:"上传文件";}
			}
		}
		.el-dialog{
			margin-top:0 !important;
			.el-dialog__body{
				overflow-y:auto;max-height:78vh;
				.el-form-item{
					display:inline-flex;align-items:center;
					.el-form-item__content{flex:1;}
				}
				.form-text{line-height:20px;}
				.el-form-item__label{line-height:1.5;}
			}
		}
		.file-box{
			.btn2{font-size:23px;margin-left:10px;color:#48A2FF;cursor:pointer;}
		}
	}
</style>