<!--
 * @Descripttion: 编辑
-->
<template>
	<div class="x-update">
		<component :is="componentType" :title="(config.name || titleMap[mode]) || '编辑'" v-model="visible" :size="size" :style="style" @closed="$emit('closed')">
			<el-main style="padding:0 20px 0px 20px" class="xUpdate">
				<el-skeleton v-if="loading" :rows="4" />
				<x-form ref="formref" :config="config" v-model="data" v-if="!loading" :loading="loading"> </x-form>
			</el-main>
			<template #footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">{{ config.submitname || '保存' }}</el-button>
				<el-button @click="visible=false">取消</el-button>
			</template>
		</component>
	</div>
</template>
<style scoped>
	.x-update:deep(.el-drawer) .el-drawer__footer {
		text-align: left;
		border-top: 1px solid var(--el-border-color-light);
		padding: 10px 18px;
	}
</style>

<script>
	export default {
		emits: ['success', 'closed'],
		props: {
			column: { type: Array, default: () => [] },
			name: { type: String, default: "id" },
		},
		data() {
			return {
				loading: false,
				mode: "plus",
				token: '',
				key: this.name,
				titleMap: {
					plus: '新增',
					edit: '编辑'
				},
				data: {},
				style: {},
				config: {
					column : this.column,
					labelPosition : "right",
					labelWidth : "120px",
					size : "medium",
					url:'',
					submitname:'保存'
				},
				size:900,
				visible: false,
				isSaveing: false,
				type:'dialog',
			}
		},
		watch: {
			column(){
				this.config.column = this.column;
			}
		},
		computed: {
		    componentType() {
		      	return this.type == 'drawer' ? 'el-drawer' : 'x-dialog';
		    }
		},
		mounted() {

		},
		methods: {
			getComponentType(type) {
			   	this.type = type;
			   	return this;
			},
			// 显示
			open(mode='plus'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			// 表单提交方法
			submit(){
				this.$refs.formref.validate(async (valid) => {
					if (valid) {
						if (!this.config.url) {
							console.log(this.data)
							this.$alert('没有'+  ((this.config.name || this.titleMap[this.mode]) || '编辑') +'数据相关配置', "提示", {type: 'error'});
							return;
						}
						this.isSaveing = true;
						this.$http.post(this.config.url,  {token:this.token, info:this.data}).then((res) => {
							this.isSaveing = false;
							if (res.code == 200 ) {
								this.visible = false;
								this.$emit('success', res.data, this.mode, res.message || "操作成功");
								return;
							}
							this.$alert(res.message, "提示", {type: 'error'});
			            })
					}
				})
			},
			// 配置
			setConfig(o){
				Object.assign(this.config, o);
				// 远程读取数据
				if (this.config.remoteurl) {
					this.loading = true;
					setTimeout(async ()=>{
						var res = await this.$http.get(this.config.remoteurl,  {[this.key]: this.data[this.key]})
						if (res.code == 200 ) {

							this.loading = false;
							if (res.data.config) {
								Object.assign(this.config, res.data.config);
							}

							if (res.data.data) {
								this.setData(res.data.data);
							}

							if (res.data.token) {
								this.token = res.data.token
							}

							if (res.data.size) {
								this.size = res.data.size
							}

							if (res.data.type && res.data.type !== this.type) {
								this.getComponentType(res.data.type)
							}

							if (res.data.style) {
								this.style = res.data.style;
							}
							return;
						}
						this.$alert(res.message, "提示", {type: 'error'});
					}, 100)
					return false;
				}
			},
			// 表单注入数据
			setData(data){
				this.data = data;
				return this;
			},
		}
	}
</script>