<template>
	<el-dialog :title="isDetail ? '详情' : !dataForm.id ? '新增' : '修改'" :visible.sync="visible" @close="handleClose"> </el-dialog>
</template>

<script>
const compareCache = (dataForm, cache) => {
	// 一个简单的比对 dataForm 和 cache 的方法，也许需要优化地更精细
	// 由于js不保证对象属性的顺序，所以此方法可能在某些情况下失效
  // 或者使用 _.isEqual() --- 也不是很完美
	return JSON.stringify(dataForm) === JSON.stringify(cache)
}
export default {
	name: 'AddOrUpdateDialog',
	data() {
		return {
			visible: false,
			isEdit: false,
			isDetail: false,
			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
			isUpdated: false
		}
	},
	updated() {
		this.isUpdated = true // 此时如果点击保存就会 emit(refreshDataList)
	},
	// beforeDestroy() {
	// 缓存比较方案：
	// 在组件快要销毁时，比较localStorage和dataForm里的值
	// 如果有改变则 emit
	// 否则直接销毁
	// 清除localStorage里的缓存
	// if (cached && compareCache(this.dataForm, localStorage...) || !isEdit) {
	//   // 如果是编辑页面，并且已经更新了内容；或者是新增页面，就emit刷新列表
	//   clearCache()
	//   this.$emit('refreshDataList')
	// }
	// },
	methods: {
		init() {
			this.visible = true
		},
		handleClose() {
			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
			this.visible = false
		}
	}
}
</script>
