<template>
	<el-dialog title="修改场馆" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-form size="small" :model="form" :rules="formRules" ref="form">
			<el-form-item label="场馆名称" prop="name" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="场馆主图" prop="image" :label-width="formLabelWidth">
				<el-row>
					<el-button type="primary" @click="openUpload">选择图片</el-button>
					<div v-if="form.image != ''" class="img">
						<img :src="file_path" width="100" height="100" />
					</div>
				</el-row>
			</el-form-item>

			<el-form-item label="场馆类型" prop="type_id" :label-width="formLabelWidth">
				<el-select v-model="form.type_id">
					<el-option label="网球" value="1"></el-option>
					<el-option label="篮球" value="2"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="营业时间" prop="day_time" :label-width="formLabelWidth">
				<el-input v-model="form.day_time" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="营业开始时间" prop="start_time" :label-width="formLabelWidth">
				<el-input v-model="form.start_time" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="营业结束时间" prop="end_time" :label-width="formLabelWidth">
				<el-input v-model="form.end_time" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="场馆地址" prop="address" :label-width="formLabelWidth">
				<el-input v-model="form.address" autocomplete="off"></el-input>
			</el-form-item>			
			
			<el-form-item label="场馆经度" prop="longitude" :label-width="formLabelWidth">
				<el-input v-model="form.longitude" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="场馆纬度" prop="latitude" :label-width="formLabelWidth">
				<el-input v-model="form.latitude" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="联系电话" prop="contact_phone" :label-width="formLabelWidth">
				<el-input v-model="form.contact_phone" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="店铺状态" prop="shop_status" :label-width="formLabelWidth">
				<el-select v-model="form.shop_status">
					<el-option label="开店" value="1"></el-option>
					<el-option label="打烊" value="0"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="详情内容：" prop="textarea1" :label-width="formLabelWidth" v-if="form.type_id == 2">
				<div class="edit_container">
					<Uediter :text="form.textarea1" :config="ueditor.config" ref="ue"
						@contentChange="contentChangeFunc"></Uediter>
				</div>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible">取 消</el-button>
			<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button>
		</div>
		<!--上传图片组件-->
		<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
	</el-dialog>

</template>

<script>
import PorductApi from '@/api/product.js';
import Upload from '@/components/file/Upload';
import Uediter from '@/components/UE.vue';
import VenueApi from '@/api/venue.js';

export default {
	components: {
		Upload,
		Uediter,
	},
	data() {
		return {
			/*富文本框配置*/
			ueditor: {
				text: '',
				config: {
					initialFrameWidth: 400,
					initialFrameHeight: 500
				},
			},
			form: {
				name: '',
				image: '',
				type_id: '',
				day_time: '',
				start_time: '',
				end_time: '',
				contact_phone: '',
				address: '',
				longitude: '',
				latitude: '',
				textarea1: '',
				shop_status: ''
			},
			formRules: {
				name: [{
					required: true,
					message: '请输入场馆名称',
					trigger: 'blur'
				}],
				image: [{
					required: true,
					message: '请上传场馆图片',
					trigger: 'blur'
				}],
				type_id: [{
					required: true,
					message: '请选择场馆类型',
					trigger: 'blur'
				}],
				day_time: [{
					required: true,
					message: '请输入营业时间',
					trigger: 'blur'
				}],
				start_time: [{
					required: true,
					message: '请输入营业开始时间',
					trigger: 'blur'
				}],		
				end_time: [{
					required: true,
					message: '请输入营业结束时间',
					trigger: 'blur'
				}],		
				contact_phone: [{
					required: true,
					message: '请输入联系电话',
					trigger: 'blur'
				}],		
				address: [{
					required: true,
					message: '请输入详细地址',
					trigger: 'blur'
				}],		
				longitude: [{
					required: true,
					message: '请输入经度',
					trigger: 'blur'
				}],	
				latitude: [{
					required: true,
					message: '请输入纬度',
					trigger: 'blur'
				}],		
				shop_status: [{
					required: true,
					message: '请选择店铺状态',
					trigger: 'change'
				}],
				textarea1: [{
					required: true,
					message: '请输入详情',
					trigger: 'blur'
				}],
			},
			/*左边长度*/
			formLabelWidth: '120px',
			/*是否显示*/
			dialogVisible: false,
			loading: false,
			/*是否上传图片*/
			isupload: false,
		};
	},
    props: ['open_edit', 'editform'],
	created() {
		this.dialogVisible = this.open_edit;
		console.log(this.editform.model);
		this.form.name = this.editform.name;
		this.form.image = this.editform.image;
		this.form.type_id = this.editform.type_id;
		this.form.day_time = this.editform.day_time;
		this.form.start_time = this.editform.start_time;
		this.form.end_time = this.editform.end_time;
		this.form.contact_phone = this.editform.contact_phone;
		this.form.address = this.editform.address;
		this.form.longitude = this.editform.longitude;
		this.form.latitude = this.editform.latitude;
		this.form.textarea1 = this.editform.textarea1;
		this.form.shop_status = this.editform.shop_status;
	},
	methods: {
		/*添加场馆*/
		addUser() {
			let self = this;
			let params = self.form;
	
			self.$refs.form.validate((valid) => {
				if (valid) {
					self.loading = true;
					VenueApi.addGround(params).then(data => {
						self.loading = false;
						self.$message({
							message: '添加成功',
							type: 'success'
						});
						self.dialogFormVisible(true);
					}).catch(error => {
						self.loading = false;
					});
				}
			});
		},

		/*获取富文本内容*/
		contentChangeFunc(e){
			this.form.textarea1 = e;
		},

		/*关闭弹窗*/
		dialogFormVisible(e) {
			if (e) {
				this.$emit('closeDialog', {
					type: 'success',
					openDialog: false
				})
			} else {
				this.$emit('closeDialog', {
					type: 'error',
					openDialog: false
				})
			}
		},
		/*上传*/
		openUpload(e) {
			this.type = e;
			this.isupload = true;
		},
		/*获取图片*/
		returnImgsFunc(e) {
			if (e != null && e.length > 0) {
				this.file_path = e[0].file_path;
				this.form.image = e[0].file_id;
			}
			this.isupload = false;
		},

	}
};
</script>

<style>
.img {
	margin-top: 10px;
}
</style>
