<template>
	<div class="authDialog-box">
		<el-dialog
		:visible.sync="isOpenDialog"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		:title="title"
		@close="cancelHandle"
		custom-class="dialog"
		center
		width="560px"
		v-dialogDrag>
			<div class="dialog-main">
				<el-form
				ref="diaForm"
				label-position="left"
				hide-required-asterisk
				label-width="80px"
				:model="formData"
				:rules="formRules">
						<el-form-item label="上级分类" prop="classify">
							<el-select 
							v-model="formData.classify" 
							placeholder="请选择上级分类" 
							style="width:80%"
							:disabled="title==='编辑分类'&&!form.parentId">
								<el-option
									v-for="item in classifyArr"
									:key="item.ClassifyId"
									:label="item.ClassifyName"
									:value="item.ClassifyId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="分类名称" prop="nodeName">
							<el-input
							v-model="formData.nodeName"
							style="width: 80%"
							placeholder="分类名称"></el-input>
						</el-form-item>
				</el-form>
			</div>
			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="saveHandle">保存</el-button>
				<el-button type="primary" plain @click="cancelHandle">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { dataAuthInterface } from '@/api/api.js';
export default {
	props: {
		isOpenDialog: {
			type: Boolean,
		},
		form: {
			type: Object,
		},
		title: {
			type: String,
		}
	},
	watch: {
		isOpenDialog(nval) {
			if(!nval) return
			
			this.getClassifyOne();
			console.log(this.form)
			this.formData = {
				classify: this.form.classifyId ? this.form.parentId : '',
				nodeName: this.form.classifyName || '',
				ownClassifyId: this.form.classifyId || '',
			}
		}
	},
	data () {
		return {
			formRules: {
				classify:[
					{ required: true, message: '一级分类不能为空', trigger: 'blur' },
				],
				nodeName:[
					{ required: true, message: '分类名称不能为空', trigger: 'blur' },
				],
			},
			classifyArr:[],

			formData: {}

		};
	},
	methods: {

		/* 获得一级分类 */
		async getClassifyOne() {
			const res = await dataAuthInterface.classifyOne();
			if(res.Ret !== 200) return
			this.classifyArr = res.Data || [];
			if(this.title === '添加分类' || !this.form.parentId) {
				this.classifyArr.unshift({
					ClassifyId: 0,
					ClassifyName: '无'
				})
			}
		},

		async saveHandle() {
			await this.$refs.diaForm.validate();

			const res = this.title === '添加分类' 
				? await	dataAuthInterface.classifyAdd({
						ParentId: this.formData.classify,
						ClassifyName: this.formData.nodeName
					})
				:	await	dataAuthInterface.classifyEdit({
						ParentId: this.formData.classify,
						ClassifyId: this.formData.ownClassifyId,
						ClassifyName: this.formData.nodeName
					})

			if(res.Ret !== 200) return
			this.$message.success('保存成功');
			this.callbackHandle();
		},
		/* 成功回调 */
		callbackHandle() {
			this.$refs.diaForm.resetFields();
			this.$emit('sucessCallback')
		},
		/* 取消 */
		cancelHandle() {
			this.$refs.diaForm.resetFields();
			this.$emit('closeDia')
		},
	},
}
</script>
<style lang='scss'>
.authDialog-box {
	.dialog-main {
		padding-left: 50px;
	}
	.el-cascader .el-input {
		width: 100%;
	}
	.dia-bot {
		margin: 52px 0 30px;
		display: flex;
		justify-content: center;

	}
}
</style>