<template>
	<div class="app-list-content">
		<div class="content-wrap">

		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex';
	import operateLineModule from '@/components/module/operate-line';
	export default {
		name: 'set-password',
		components: {
			operateLineModule
		},
		data() {
			return {
				form: {
					name: '',
					menuOption: '0',
					replyUrl: '',
					targetId: 0
				},
				rule: {},
				isModifyParents: false,
				// isAdd: false,
				addDialog: false,
				activeIndex: null,
				subActiveIndex: null,
				menuData: [],
				// 常用链接
				urlIndex: null,
				commonUrlData: [],
				// 操作菜单
				operateShow: [],
				operateData: null,
				// 按钮列表
				btnData: []
			};
		},
		computed: {
			...mapGetters(['shopInfo', 'userInfo'])
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				this._getDet();
				this._getUrl();
			},
			_getDet() {
				this.$service.setting.getMenu().then(res => {
					this.menuData = res.map(e => {
						if (!e.children) {
							e.children = [];
						}

						return e;
					});
					res.map(() => {
						this.operateShow.push(false);
					});
				});
			},
			_getUrl() {
				this.$service.single.commonUrl().then(res => {
					this.commonUrlData = res;
				});
			},
			async submitFn() {
				console.log(this.menuData);
				// return false;
				await this.$service.setting.updateMenu(this.menuData).then(res => {
					this.$message.success(res.msg || '提交');
					// this.closeOperate();
					this.resetForm();
				});
			},
			// operate
			menuClickFn(item, index) {
				this.isModifyParents = true;
				// this.isAdd = false;

				this.closeOperate();
				this.activeIndex = index;
				this.operateShow[index] = true;
				this.operateData = item.children || [];
				// 修改
				// this.dialogData = item;
				// this.form.name = JSON.parse(JSON.stringify(item.name));
				console.log('江总', item);
				console.log('江总11', this.commonUrlData);
				Object.keys(this.form).forEach(i => {
					this.form[i] = item[i];
				});

				this.addDialog = true;
			},
			// operate
			operateClickFn(item) {
				this.isModifyParents = false;
				// this.isAdd = false;
				this.subActiveIndex = item.index;
				console.log('item', item);
				// this.dialogData = item;
				item.targetId = item.targetId ? parseInt(item.targetId) : 0;

				Object.keys(this.form).forEach(i => {
					this.form[i] = item[i];
				});
				this.addDialog = true;
			},
			operateAddFn(index) {
				if (this.operateData.length > 4) {
					this.$message.warning('亲，最多只能设置五个子菜单！')
					return false
				}
				// this.isModifyParents = false;

				let form = {
					name: '子菜单名',
					menuOption: '0',
					replyUrl: '',
					targetId: 0
				};
				
				this.$set(this.operateShow, this.activeIndex, false);
				this.operateData.push(form);
				this.menuData[this.activeIndex].children = JSON.parse(JSON.stringify(this.operateData));

				setTimeout(() => {
					this.$set(this.operateShow, this.activeIndex, true);
				});
				// this.isAdd = true;
				// this.dialogData = this.menuData[3].children[index];
				// this.addDialog = true;
				// if (this.$refs['form']) {
				// 	console.log('asdf');
				// 	this.resetForm()
				// }
			},
			operateDelFn(index) {
				console.log('我点击了删除按钮！', index)
				// this.closeOperate();
				this.$set(this.operateShow, this.activeIndex, false);
				this.operateData.splice(index, 1);
				
				this.menuData[this.activeIndex].children = JSON.parse(JSON.stringify(this.operateData));

				setTimeout(() => {
					this.$set(this.operateShow, this.activeIndex, true);
				});
			},
			closeOperate() {
				this.activeIndex = null;
				this.operateShow = this.operateShow.map(e => (e = false));
				this.addDialog = false;
				// if (this.addDialog) {
				// 	this.resetForm();
				// }
			},
			closeOptionFn() {
				this.closeOperate();
				this.resetForm();
			},
			// modal
			confirmForm() {
				let form = JSON.parse(JSON.stringify(this.form));

				if (this.isModifyParents) {
					Object.keys(form).forEach(i => {
						this.menuData[this.activeIndex][i] = form[i];
					});
					console.log('江总22', this.menuData);
					// 如果是父菜单操作时
					// this.menuData[this.activeIndex].name = form.name;
				} else {
					// 如果是子菜单操作时
					// if (this.isAdd) {
					// } else {
					this.operateData[this.subActiveIndex] = form;
					// }

					console.log('this.operateData', this.operateData)
					
					this.menuData[this.activeIndex].children = JSON.parse(JSON.stringify(this.operateData));
				}
				this.submitFn().then(res => {
					console.log('this.activeIndex', this.activeIndex);
					
					this.addDialog = false;
					// if (this.isAdd) {
					// }
				});
			},
			resetForm() {
				this.form = {
					name: '',
					menuOption: '0',
					replyUrl: '',
					targetId: 0
				};
				this.$refs['form'].resetFields();
				// this.addDialog = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.app-list-content {
		background-color: #fff;
	}
	.content-wrap {
		display: flex;
		align-items: center;
	}
	// wx 容器
	.wx-wrap {
		width: 375px;
		margin: 0 15px;
		padding-top: 20px;
		flex-shrink: 0;
		// 头部
		.wx-bar {
			position: relative;
			.bar-text {
				position: absolute;
				top: 30px;
				font-size: 17px;
				font-weight: 500;
				color: #fff;
				width: 100%;
				text-align: center;
			}
		}
		.wx-content {
			width: 100%;
			height: 555px;
			background-color: #ededed;
		}
		// 按钮
		.wx-btn {
			@include disFlex(center, space-between);
			background-color: #f7f7f7;
			padding: 10px;
			height: 45px;
			.key-btn {
				width: 13%;
				.key-btn-img {
					width: 40px;
				}
			}
			.menu-btn {
				width: 29%;
				height: calc(100% - 30px);
				@include disFlex(center, center);
				border-left: 2px solid $borderColor;
				&.active {
					/deep/.operate-module-line {
						.operate-btn {
							color: $mainColor;
							.iconfont {
								color: #09bb07;
							}
						}
					}
				}
				.iconfont-blo {
					margin-right: 6px;
				}
				.iconfont {
					color: $fontColor3;
					font-size: 24px;
					transform: scale(0.6);
				}
			}
		}
	}
	// 编辑块
	.ad-modal-content {
		width: 640px;
		min-width: 640px;
		height: 640px;
		border: 20px solid #f7f7f7;
		// border-top: 0;
		margin-top: 20px;
		display: flex;
		align-items: center;
		// padding: 20px;
		background-color: #f7f7f7;

		.ad-modal-wrap {
			width: 100%;
			.content-j-wrap {
				width: 100%;
				height: 460px;
				background-color: #fff;
				padding-top: 10px;
			}
		}

		.dialog-footer {
			display: flex;
			align-items: center;
			// justify-content: center;
			// padding-left: 100px;
			margin-top: 10px;
			.el-button {
				margin: 0 10px;
			}
		}
	}
	.prompt-text {
		padding: 30px 30px 60px 30px;
		color: $fontColor3;
	}
</style>
