<template>
	<div>
		<base-right-dialog ref="baseRightDialog" :drwaerHeader="false" :dialogVisible.sync="addDialog" :size="dialogSize" v-if="addDialog"
			:withHeader="false" :appendBody="true">
			<div class="dialogList">
				<div
					style="padding: 40px 0;border-bottom: 1px solid #ccc;justify-content: center;margin-bottom: 40px;position: relative">
					<el-steps :active="stepsActice" finish-status="success" align-center style="width: 50%; margin: 0 auto">
						<el-step title="单据信息">
						</el-step>
						<el-step title="数据源">
						</el-step>
						<el-step title="页面设计">
						</el-step>
						<el-step title="代码生成">
						</el-step>
					</el-steps>
					<div style=" position: absolute; right: 20px; top: 50%; transform: translateY(-50%)">
						<el-button v-if="stepsActice != 0" @click="prev">上一步</el-button>
						<el-button @click="next" v-if="stepsActice != 3">下一步</el-button>
						<el-button type="primary" @click="saveDto" v-if="stepsActice != 3">保存</el-button>
						<el-button type="primary" @click="saveDto" v-if="stepsActice == 3">一键生成</el-button>
						<el-button @click="handleClose">取消</el-button>
					</div>
				</div>
				<div style="width: 75%;margin: 0 auto;">
					<document-information ref="documentInformation" v-show="stepsActice == 0"
						@ingormationSave="ingormationSave"></document-information>
					<document-data-source ref="documentDataSource" v-show="stepsActice == 1"
						@dataSourceSave="dataSourceSave"></document-data-source>
					<document-page-design ref="documentPageDesign" v-show="stepsActice == 2"></document-page-design>
					<document-code-generation ref="documentCodeGeneration"
						v-show="stepsActice == 3"></document-code-generation>
				</div>
			</div>
		</base-right-dialog>
	</div>
</template>

<script>
import baseRightDialog from "@/components/base/baseRightDialog"
import documentInformation from "./documentInformation"
import documentDataSource from "./documentDataSource"
import documentCodeGeneration from "./documentCodeGeneration"
import documentPageDesign from "./documentPageDesign"
export default {
	components: {
		baseRightDialog,
		documentInformation,
		documentDataSource,
		documentCodeGeneration,
		documentPageDesign
	},
	data() {
		return {
			stepsActice: 0,
			addDialog: false,
			dialogSize: '100%',
			bm_id: null
		}
	},
	methods: {
		openDialog(type, id) {
			this.addDialog = true
			this.bm_id = true
			this.stepsActice = 0
			this.$nextTick(() => {
				if (this.stepsActice == 0) {
					this.$refs.documentInformation.initPage(id)
				}
			})
		},
		handleClose() {
			this.addDialog = false
			this.$emit('handleClose')
		},
		next() {
			if (this.stepsActice == 0) {
				this.$refs.documentInformation.saveDto('next')
			}
			if (this.stepsActice == 1) {
				this.$refs.documentDataSource.saveDto('next')
			}
			if (this.stepsActice == 2) {
				this.stepsActice = 3
				this.$nextTick(() => {
					this.$refs.documentCodeGeneration.initPage(this.bm_id)
				})

			}
		},
		saveDto() {
			if (this.stepsActice == 0) {
				this.$refs.documentInformation.saveDto('save')
			}
			if (this.stepsActice == 1) {
				this.$refs.documentDataSource.saveDto('save')
			}
			if (this.stepsActice == 2) {
				this.stepsActice = 3
			}
			if (this.stepsActice == 3) {
				this.$refs.documentCodeGeneration.saveDto()
			}
		},
		prev() {
			this.stepsActice = this.stepsActice - 1
			if (this.stepsActice == 0) {
				this.$nextTick(() => {
					this.$refs.documentInformation.initPage(this.bm_id)
				})
			} else if (this.stepsActice == 1) {
				this.$nextTick(() => {
					this.$refs.documentDataSource.initPage(this.bm_id)
				})
			} else if (this.stepsActice == 2) {
				this.$nextTick(() => {
					this.$refs.documentPageDesign.initPage(this.bm_id)
				})
			}
		},
		// 单据保存
		ingormationSave(type, id) {
			this.bm_id = id
			if (type == 'next') {
				this.stepsActice = 1
				this.$nextTick(() => {
					this.$refs.documentDataSource.initPage(id)
				})
			}
		},
		//数据源保存
		dataSourceSave(type, id) {
			this.bm_id = id
			if (type == 'next') {
				this.stepsActice = 2
				this.$nextTick(() => {
					this.$refs.documentPageDesign.initPage(id)
				})
			}
		}
	}
}
</script>

<style></style>