<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" width="50%" @close="close" @keyup.enter.native=""
			v-model="visible" @open="handleOpen">
			<el-form :model="inputForm" :rules="rules" ref="inputForm" v-loading="loading"
				:class="method === 'view' ? 'readonly' : ''"
				:disabled="status === 'audit' || status === 'taskFormDetail' || method === 'view'" label-width="100px"
				@submit.native.prevent>
				<el-row :gutter="15">
					<el-col :span="24">
						<el-form-item label="部门名称" prop="name">
							<el-input placeholder="请填写部门名称" v-model="inputForm.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="所属部门" prop="parentId">
							<el-tree-select v-model="inputForm.parentId" lazy :load="load" node-key="deptId"
								:props="props" :data="deptList" check-strictly :render-after-expand="false"
								show-checkbox check-on-click-node style="width: 240px" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
					<el-button type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check"
						v-noMoreClick>确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import ddService from "@/api/test/dd/dd.js"
import { ElDatePicker } from 'element-plus';
// eslint-disable-next-line no-unused-vars
import moment from 'moment'
export default {
	props: {
		formReadOnly: {
			type: Boolean,
			default: false
		},
		status: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			props: {
				isLeaf: 'isLeaf',
				label: 'name',
			},
			title: '',
			method: '',
			loading: false,
			visible: false,
			inputForm: {
				name: '',
				parentId: ''
			},
			deptList: [],
			rules: {
				parentId: [
					{ required: true, message: "请选择所属部门", trigger: "change" },
				],
				name: [
					{ required: true, message: "请填写部门名称", trigger: "blur" },
				],
			},
		}
	},
	created() {
	},
	mounted() {
	},
	activated() {
	},
	components: {
		ElDatePicker,
	},
	methods: {
		load(node, resolve) {
			console.log(node);
			ddService.deptList({
				deptId: node.data.deptId
			}).then(res => {
				resolve(res.result)
			})

		},
		init(method, id) {
			this.method = method
			this.visible = true
			this.inputForm = {
				classification: "",
				fileDescription: "",
				workAttachments: []
			}
			if (method === 'add') {
				this.title = `创建部门`
			} else if (method === 'edit') {
				this.inputForm.deptId = id
				this.title = '修改部门'
			}
			this.visible = true
			this.$nextTick(() => {
				this.loading = true
				this.$refs.inputForm.resetFields()
				ddService.deptList().then(res => {
					res.result.unshift({
						deptId: 1,
						name: "根部门",
						isLeaf: true
					})
					this.deptList = res.result
					if (this.commonJS.isNotEmpty(this.inputForm.deptId)) {
						ddService.queryById({
							deptId: this.inputForm.deptId
						}).then(res => {
							this.inputForm.name = res.result.name
							this.inputForm.parentId = res.result.parentId
							this.loading = false
						})
					} else {
						this.loading = false

					}
				})

			})
		},
		// 表单提交
		async doSubmit() {
			this.loading = true
			this.$refs['inputForm'].validate((valid) => {
				if (valid) {
					this.loading = true
					if (this.inputForm.deptId) {
						ddService.updateDept(this.inputForm).then((data) => {
							this.visible = false
							this.$emit('refreshList')
						}).catch(() => {
							this.$refs.inputForm.resetFields()
							this.loading = false
						})
					} else {
						ddService.addDept(this.inputForm).then((data) => {
							this.visible = false
							this.$emit('refreshList')
						}).catch(() => {
							this.$refs.inputForm.resetFields()
							this.loading = false
						})
					}
				} else {
					this.loading = false
				}
			})
		},
		close() {
			this.inputForm = {
				id: '',
			}
			this.visible = false
		},
	}

}
</script>
<style scoped>
/deep/ .el-input-number .el-input__inner {
	text-align: left;
}

/deep/ .vxe-footer--row .vxe-footer--column:nth-child(1) .vxe-cell--item {
	font-weight: 700;
}
</style>
