<template>
	<div class="app-list-content">
		<!-- 微信菜单 -->
		<div class="wx-wrap">
			<div class="wx-bar">
				<div class="bar-img">
					<img src="../../assets/images/setting/wx-bar-bg.png" alt />
				</div>
				<div class="bar-text">{{ shopInfo.merchantName }}</div>
			</div>
			<!-- 中间快 -->
			<div class="wx-content" @click="closeOperate"></div>
			<!-- 按钮 -->
			<div class="wx-btn">
				<div class="key-btn">
					<img
						class="key-btn-img"
						src="../../assets/images/setting/wx-menu.png"
						alt
						mode="widthFix"
					/>
				</div>
				<div
					class="menu-btn"
					v-for="(item, index) in menuData"
					:key="index"
					:class="[activeIndex == index ? 'active' : '']"
					@click="menuClickFn(item, index)"
				>
					<!-- <div class="iconfont-blo">
						<i class="iconfont iconcaidanlan"></i>
					</div>
					<span>{{ item.name }}</span>-->

					<operate-line-module
						:show="operateShow[index]"
						:data="item"
						@click="operateClickFn"
						@add="operateAddFn"
						@del="operateDelFn"
					/>
				</div>
			</div>
		</div>
		<!-- modal -->
		<el-dialog
			title="编辑菜单"
			:visible.sync="addDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="ad-modal-content">
				<el-form
					:model="form"
					:rules="rule"
					ref="form"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="名称" prop="name">
						<el-input
							v-model="form.name"
							placeholder="请输入菜单名称"
							size="small"
						></el-input>
					</el-form-item>
					<el-form-item label="选项" prop="menuOption">
						<el-radio-group v-model="form.menuOption">
							<el-radio label="0">常用网址</el-radio>
							<el-radio label="1">自定义网址</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="">
						<template v-if="form.menuOption == 0">
							<!-- <div> -->
							<el-radio-group v-model="form.targetId" size="mini">
								<el-radio
									v-for="(item, index) in commonUrlData"
									:key="index"
									border
									:label="item.id"
									>{{ item.name }}</el-radio
								>
							</el-radio-group>
							<!-- </div> -->
						</template>
						<template v-else>
							<div>
								<el-input
									v-model="form.replyUrl"
									placeholder="请填写链接，留空点图片不跳转"
									size="small"
								></el-input>
							</div>
						</template>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm">取 消</el-button>
				<el-button type="primary" @click="confirmForm">提交生效</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import operateLineModule from '@/components/module/operate-line';
export default {
	name: 'wx-menu',
	components: {
		operateLineModule
	},
	data() {
		return {
			form: {
				name: '',
				menuOption: '0',
				replyUrl: '',
				targetId: 0
			},
			rule: {},
			addDialog: false,
			activeIndex: 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;
				res.map(() => {
					this.operateShow.push(false);
				});
			});
		},
		_getUrl() {
			this.$service.single.commonUrl().then(res => {
				this.commonUrlData = res;
			});
		},
		submitFn() {
			this.$service.setting.updateMenu(this.menuData).then(res => {
				this.$message.success(res.msg);
				this.resetForm();
			});
		},
		// operate
		menuClickFn(item, index) {
			this.closeOperate();
			this.activeIndex = index;
			this.operateShow[index] = true;
			this.operateData = item.children;
		},
		// operate
		closeOperate() {
			this.activeIndex = null;
			this.operateShow = this.operateShow.map(e => (e = false));
		},
		operateClickFn(item) {
			this.dialogData = item;
			item.targetId = item.targetId ? parseInt(item.targetId) : 0;
			console.log(item);
			Object.keys(this.form).forEach(i => {
				this.form[i] = item[i];
			});
			this.addDialog = true;
		},
		operateAddFn() {
			this.addDialog = true;
		},
		operateDelFn(index) {
			this.closeOperate();
			this.operateData.splice(index, 1);
			setTimeout(() => {
				this.$set(this.operateShow, this.activeIndex, true);
			});
		},
		// modal
		confirmForm() {
			console.log(this.operateData);
			this.closeOperate();
			let form = JSON.parse(JSON.stringify(this.form));
			this.operateData.push(form);
			setTimeout(() => {
				this.$set(this.operateShow, this.activeIndex, true);
			});
			this.submitFn();
		},
		resetForm() {
			this.$refs['form'].resetFields();
			this.addDialog = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.app-list-content {
	background-color: #fff;
}
// wx 容器
.wx-wrap {
	width: 375px;
	margin: 0 15px;
	padding-top: 20px;
	// 头部
	.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);
			}
		}
	}
}
.prompt-text {
	padding: 30px 30px 60px 30px;
	color: $fontColor3;
}
</style>
