<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="94px"
					label-position="right"
					size="small"
					style="max-width: 500px"
				>
					<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="model" label="模型">
						<model-upload
							:limit="1"
							v-model="formData.model"
							:customUrl="customUrl"
							accept="application/zip"
							format="json"
							single
						>
						</model-upload>
						<div class="tip">请将FBX文件与贴图打包成zip压缩包上传</div>
					</el-form-item>
					<el-form-item label="相机距离" v-if="formData.model">
						<el-input-number v-model="scale" :min="0.1" :step="0.1"> </el-input-number>
					</el-form-item>
					<el-form-item label="Y轴偏移" v-if="formData.model">
						<el-input-number v-model="yOffset"> </el-input-number>
					</el-form-item>
					<el-form-item prop="type" label="类型">
						<el-select v-model="formData.type" clearable filterable placeholder="请选择">
							<el-option
								v-for="item in typeOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</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>
import resolveUrl from 'resolve-url';
import ModelUpload from '../components/ModelUpload.vue';
import SingleUpload from '../components/SingleUpload.vue';
import TagSelect from '../components/TagSelect.vue';
export default {
	name: 'MetaPlayerWearEdit',
    components: { ModelUpload, SingleUpload, TagSelect },
	created() {
		if (this.$route.query.id) {
			this.$http
				.get('metaPlayerWear/get/' + this.$route.query.id)
				.then(res => {
                    if (res.model) {
                        let url = new URL(res.model.url);
                        this.scale = Number(url.searchParams.get('scale')) || 1;
                        this.yOffset = Number(url.searchParams.get('yOffset')) || 0;
                        res.model.url = url.origin + url.pathname;
                    }
					this.formData = res;
				})
				.catch(e => {
					console.log(e);
					this.$message.error(e.error);
				});
		}
	},
	data() {
		return {
			saving: false,
            scale: 1,
			yOffset: 0,
            customUrl: resolveUrl(this.$baseUrl, 'upload/3dModel'),
			formData: {},
			rules: {
				userId: [
					{
						required: true,
						message: '请输入用户id',
						trigger: 'blur'
					}
				],
				model: [
					{
						required: true,
						message: '请上传模型',
						trigger: 'blur'
					}
				],
				type: [
					{
						required: true,
						message: '请输入类型',
						trigger: 'blur'
					}
				]
			},
			typeOptions: [
				{ label: '头饰', value: 'HEADDRESS' },
				{ label: '衣服', value: 'CLOTHES' },
				{ label: '裤子', value: 'TROUSERS' },
				{ label: '鞋子', value: 'SHOES' },
				{ label: '动作', value: 'ACTION' }
			]
		};
	},
	methods: {
		onSave() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.submit();
				} else {
					return false;
				}
			});
		},
		submit() {
			let data = { ...this.formData };
            if (data.model) {
                data.model.url = data.model.url + '?scale=' + this.scale + '&yOffset=' + this.yOffset;
            }
			this.saving = true;
			this.$http
				.post('/metaPlayerWear/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(`/metaPlayerWear/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>
