<template>
	<base-action :action="action" @ok="ok" @reset="reset">
		<template slot="view">
			<component :is="viewIs"
			           :model="model"
			           :property="propertys"
			           @edit="edit"
			           class="view-edit"
			/>
		</template>
		<template slot="edit">
			<component :is="editIs"
			           @focus="createOutClick"
			           :property="propertys"
			           :getData="getData"
			           @change="onChange"
			           @keyup="ok"
			           @submit="ok"
			           @reset="reset"
			           :model.sync="value"
			           ref="editComp"
			/>
		</template>
	</base-action>
</template>

<script>
	import OutSideClick from './OutSideClick'
	let outSideClick=null;
	export default {
		name: "veEditInput",
		components: {
			BaseAction: () => import("./baseAction"),
			BaseView: () => import("./baseView"),
		},
		data() {
			return {
				viewIs:"",
				editIs:"",
				action: false,
				value: "",
				propertys:{},
			}
		},
		props: {
			model: {
				type:[String, Number, Object, Array],
				default: ""
			},
			type: {
				type: String,
				default: "input"
			},
			getData: {
				type: Function,
				default: ()=>{}
			},
			property: {
				type: Object,
				default: ()=>{}
			},
			viewComp: {
				default:null
			},
			editComp: {
				default:null
			},
		},
		created() {
			MapUtil.setDftValue(this.propertys,this.property);
			let defComp={
				input:()=>import("./items/input.vue"),
				filterSelect:()=>import("./items/filterSelect.vue"),
				select:()=>import("./items/select.vue"),
				remoteSelect:()=>import("./items/remoteSelect.vue"),
				datePickerYear:()=>import("./items/datePickerYear.vue"),
				datePicker:()=>import("./items/datePicker.vue"),
				wxCode:()=>import("./items/wxCode.vue"),
				tag:()=>import("./items/tag.vue"),
				treeSelect:()=>import("./items/treeSelect.vue"),
				treeCheckSelect:()=>import("./items/treeCheckSelect.vue"),
				selectInput:()=>import("./items/selectInput.vue"),
			};
			let viewComp={
				tag:()=>import("./items/veTag.vue"),
				treeSelect:()=>import("./items/veTreeSelect.vue"),
				treeCheckSelect:()=>import("./items/veTreeCheckSelect.vue"),
				wxCode:()=>import("./items/veSelectInput.vue"),
				selectInput:()=>import("./items/veSelectInput.vue"),
			};
			this.editIs=this.editComp||(defComp[this.type]);
			this.viewIs=this.viewComp||(viewComp[this.type]) || "BaseView";
		},
		beforeDestroy(){
			this.unbindClick();
		},
		methods: {
			unbindClick(){
				this.outSideClick&&this.outSideClick.unbind();
				this.outSideClick=null;
			},
			createOutClick(){
				let vm=this;
				vm.outSideClick=vm.outSideClick||new OutSideClick().setOutClick(vm.$refs.editComp.submit).setCancel(vm.$refs.editComp.$el);
				outSideClick=vm.outSideClick;
			},
			/**
			 * 点击文本 编辑
			 */
			edit() {
				let vm=this;
				this.value = this.$parent.getValue();
				this.action = true;
				this.oldValue=ObjUtil.copy(this.value);
				let timer=setInterval(function(){
					if(vm.$refs.editComp&&vm.$refs.editComp.init){
						clearInterval(timer);
						vm.$refs.editComp.init(vm.value);
						if(outSideClick){
							outSideClick.unbind();
							vm.outSideClick=null;
							vm.createOutClick();
						}
					}
				},100)
			},
			/**
			 * 绑定outSideClick
			 */
			bindClick() {
				let vm=this;
				this.action = true;
				let timer=setInterval(function(){
					if(vm.$refs.editComp&&vm.$refs.editComp.init){
						clearInterval(timer);
						vm.$refs.editComp.init(vm.value);
						vm.outSideClick=new OutSideClick().setOutClick(vm.$refs.editComp.submit).setCancel(vm.$refs.editComp.$el);
					}
				},100)
			},
			/**
			 * 编辑完成
			 */
			ok({error,success}) {

				let vm = this;
				if(!vm.action)return;
				if(vm.oldValue==vm.value){
					vm.reset();
					return;
				}
				this.$parent.set(vm.value).then(function(obj){
					if (obj===true) {
						vm.reset();
						vm.oldValue=vm.value;
						success&&success();
					}else{
						vm.unbindClick();
						error&& error(obj);
					}
				});
			},
			/**
			 * 获取应该显示的文本
			 */
			getLabel(){
				return this.$refs.editComp.getLabel&&this.$refs.editComp.getLabel()||this.value;
			},
			/**
			 * 撤销编辑
			 */
			reset() {
				this.unbindClick();
				this.action = false;
			},
			/**
			 * 编辑
			 */
			onChange(value) {
			},

		}
	}
</script>

<style scoped  lang="less">
	.view-edit {
		position: absolute;
		width: 100%;
		height: 100%;
		min-height: 100%;
		top: 0;
		left: 0;
	}
	/deep/ .el-divider__text, .el-link {
		font-size: 12px;
	}
	/deep/ .el-icon--right {
		font-size: 28px;
	}
</style>
