<template>
	<div class="chartDialog-box">
		<el-dialog
		:visible.sync="isOpenDialog"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelHandle"
		custom-class="dialog"
		center
		width="560px"
		v-dialogDrag>
			<div slot="title" style="display:flex;alignItems:center;">
				<img :src="title=='添加'?$icons.add:title=='编辑'?$icons.edit:''" style="color:#fff;width:16px;height:16px;marginRight:5px;">
				<span style="fontSize:16px;">{{title}}</span>
			</div>
			<div class="dialog-main">
				<el-form
				ref="diaForm"
				label-position="left"
				hide-required-asterisk
				label-width="80px"
				:model="formData"
				:rules="formRules">
					<!-- 添加/编辑1级目录 -->
					<template 
					v-if="(title=='添加'&&formData.level === 0)
					|| (title=='编辑'&&formData.level === 1)">
						<el-form-item label="分类名称" prop="level_1">
							<el-input
							v-model="formData.level_1"
							style="width: 80%"
							placeholder="必填项"></el-input>
						</el-form-item>
					</template>
					<!-- 添加/编辑2级目录 -->
					<template 
					v-else-if="(title=='添加'&&formData.level === 1)
					|| (title=='编辑'&&formData.level === 2)">
						<el-form-item label="一级目录" prop="level_1">
							<span>{{formData.level_1}}</span>
						</el-form-item>
						<el-form-item label="分类名称" prop="level_2">
							<el-input
							v-model="formData.level_2"
							style="width: 80%"
							placeholder="必填项"></el-input>
						</el-form-item>
					</template>
					<!-- 添加/编辑三级目录 -->
				<!-- 	<template v-else-if="(title=='添加'&&formData.level === 2)
					|| (title=='编辑'&&formData.level === 3)">
						<el-form-item label="一级目录" prop="level_1">
							<span>{{formData.level_1}}</span>
						</el-form-item>
						<el-form-item label="二级目录" prop="level_2">
							<span>{{formData.level_2}}</span>
						</el-form-item>
						<el-form-item label="分类名称" prop="level_3">
							<el-input
							v-model="formData.level_3"
							style="width: 80%"
							placeholder="必填项"></el-input>
						</el-form-item>
					</template> -->
				</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 { dataBaseInterface } from '@/api/api.js';
import { formRules } from '@/utils/defaultOptions'
export default {
	props: {
		isOpenDialog: {
			type: Boolean,
		},
		//标题
		title: {
			type: String,
			default: '添加'
		},
		formData: {
			type: Object,
		}
	},
	watch: {
		'isOpenDialog': {
			handler(newval) {
				if((newval && this.formData.level === 3)) {
					this.getMenu();
				}
				// console.log(this.formData);
			}
		}
	},
	data () {
		return {			
			formRules,
			options:  [],
			levelProps: {
				label: 'ChartClassifyName',
				value: 'ChartClassifyId',
				children: 'Children',
			},

		};
	},
	methods: {
		saveHandle() {
			this.$refs.diaForm.validate((valid) => {
				if(valid) {
					this.title==='添加' && dataBaseInterface.addChartClassify({
						ChartClassifyName: this.formData.level === 0 
							? this.formData.level_1
							: this.formData.level === 1
							? this.formData.level_2
							:'',
						ParentId:this.formData.parent_id || 0,
						Level: this.formData.level
					}).then(res => {
						if(res.Ret === 200) {
							this.$message.success(res.Msg);
							this.callbackHandle('add');
						}
					})
					//修改图表
					if(this.title==='编辑' && this.formData.level===3) {
						dataBaseInterface.chartEdit({
							ChartClassifyId: this.formData.level_menu[this.formData.level_menu.length - 1],
							ChartInfoId: this.formData.chart_id,
							ChartName: this.formData.level_4
						}).then(res => {
							if(res.Ret === 200) {
								this.$message.success(res.Msg);
								this.callbackHandle('update');
							}
						})
					}else if(this.title==='编辑' && this.formData.level!==3) {
						//修改目录
						dataBaseInterface.editChartClassify({
							ChartClassifyName: this.formData.level === 1
								? this.formData.level_1
								: this.formData.level === 2
								? this.formData.level_2
								:'',
							ChartClassifyId:this.formData.classify_id || 0
						}).then(res => {
							if(res.Ret === 200) {
								this.$message.success(res.Msg);
								this.callbackHandle();
							}
						})
					}

					// this.title === '选择分类' && this.$emit('addClassifyCallBack',this.formData.level_menu[2])
				}
			})
		},
		/* 成功回调 */
		callbackHandle(type) {
			this.$refs.diaForm.resetFields();
			this.$emit('sucessCallback',type)
		},
		/* 取消 */
		cancelHandle() {
			this.$refs.diaForm.resetFields();
			this.$emit('closeDia')
		},
		/* 获取目录结构 */
		getMenu() {
			dataBaseInterface.chartClassify().then(res => {
				if(res.Ret === 200) {
					this.filterNodes(res.Data.AllNodes);
					this.options = res.Data.AllNodes || [];
				}
			})
		},
		// 递归改变第三级目录结构
		filterNodes(arr) {
			arr.length && arr.forEach(item => {
				item.Children.length && this.filterNodes(item.Children)
				if(item.Level === 2) {
					delete item.Children
				}
			})
		}
	},
	created() {},
	mounted() {},
}
</script>
<style lang='scss'>
.chartDialog-box {
	.dialog-main {
		padding-left: 50px;
	}
	.el-cascader .el-input {
		width: 100%;
	}
	.dia-bot {
		margin: 52px 0 30px;
		display: flex;
		justify-content: center;

	}
}
</style>