<template>
	<div class="edit-view">
		<page-title>
			<el-button @click="$router.go(-1)" :disabled="saving"> 取消 </el-button>
			<el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id"> 删除 </el-button>
			<el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
		</page-title>
		<div class="edit-view__content-wrapper">
			<div class="edit-view__content-section">
				<el-form
					:model="formData"
					:rules="rules"
					ref="form"
					label-width="116px"
					label-position="right"
					size="small"
					style="max-width: 500px"
				>
					<el-form-item prop="region" label="所属区域">
						<el-select v-model="formData.region" clearable filterable placeholder="请选择">
							<el-option
								v-for="item in regionOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="x" label="区域内坐标x轴">
						<el-input v-model="formData.x"> </el-input>
					</el-form-item>
					<el-form-item prop="y" label="区域内坐标y轴">
						<el-input v-model="formData.y"> </el-input>
					</el-form-item>
                    <el-form-item prop="z" label="区域内坐标z轴">
						<el-input v-model="formData.z"> </el-input>
					</el-form-item>
					<el-form-item prop="sale" label="挂售">
						<el-switch v-model="formData.sale"> </el-switch>
					</el-form-item>
					<el-form-item prop="userId" label="所属用户id">
						<el-input-number type="number" v-model="formData.userId"> </el-input-number>
					</el-form-item>
					<el-form-item prop="size" label="空间大小(m)²">
						<el-input-number type="number" v-model="formData.size"> </el-input-number>
					</el-form-item>
					<el-form-item class="form-submit">
						<el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
						<el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id">
							删除
						</el-button>
						<el-button @click="$router.go(-1)" :disabled="saving"> 取消 </el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'MetaSpatialInfoEdit',
	created() {
		if (this.$route.query.id) {
			this.$http
				.get('metaSpatialInfo/get/' + this.$route.query.id)
				.then(res => {
                    if (res.coordinate) {
                        res.x = res.coordinate.x
                        res.y = res.coordinate.y
                        res.z = res.coordinate.z
                    }
					this.formData = res;
				})
				.catch(e => {
					console.log(e);
					this.$message.error(e.error);
				});
		}
	},
	data() {
		return {
			saving: false,
			formData: {},
			rules: {
				region: [
					{
						required: true,
						message: '请输入所属区域',
						trigger: 'blur'
					}
				],
				x: [
					{
						required: true,
						message: '请输入区域内坐标x轴',
						trigger: 'blur'
					}
				],
				y: [
					{
						required: true,
						message: '请输入区域内坐标y轴',
						trigger: 'blur'
					}
				],
                z: [
					{
						required: true,
						message: '请输入区域内坐标z轴',
						trigger: 'blur'
					}
				],
				userId: [
					{
						required: true,
						message: '请输入所属用户id',
						trigger: 'blur'
					}
				],
				size: [
					{
						required: true,
						message: '请输入空间大小',
						trigger: 'blur'
					}
				]
			},
			regionOptions: [
				{ label: '1区', value: 'ONE' },
				{ label: '2区', value: 'TWO' },
				{ label: '3区', value: 'THREE' },
				{ label: '4区', value: 'FOUR' },
				{ label: '5区', value: 'FIVE' },
				{ label: '6区', value: 'SIX' },
				{ label: '7区', value: 'SEVEN' },
				{ label: '8区', value: 'EIGHT' },
				{ label: '9区', value: 'NINE' }
			]
		};
	},
	methods: {
		onSave() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.submit();
				} else {
					return false;
				}
			});
		},
		submit() {
			let data = { ...this.formData };
            data.coordinate = {x:this.formData.x, y:this.formData.y, z:this.formData.z}
            delete data.x
            delete data.y
            delete data.z
			this.saving = true;
			this.$http
				.post('/metaSpatialInfo/save', data, { body: 'json' })
				.then(res => {
					this.saving = false;
					this.$message.success('成功');
					this.$router.go(-1);
				})
				.catch(e => {
					console.log(e);
					this.saving = false;
					this.$message.error(e.error);
				});
		},
		onDelete() {
			this.$confirm('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
				.then(() => {
					return this.$http.post(`/metaSpatialInfo/del/${this.formData.id}`);
				})
				.then(() => {
					this.$message.success('删除成功');
					this.$router.go(-1);
				})
				.catch(e => {
					if (e !== 'cancel') {
						console.log(e);
						this.$message.error((e || {}).error || '删除失败');
					}
				});
		}
	}
};
</script>
<style lang="less" scoped>
</style>
