<!-- 自定义菜单 -->
<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css">
<div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'">
	<el-container class="ms-custom-container">
		<el-header class="ms-header" height="50px">
			<el-row>
				<el-button type="danger" size="small" icon="el-icon-delet">删除</el-button>
				<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
				<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
			</el-row>
		</el-header>
		<el-container class="ms-container">
			<el-aside>
				<el-container>
					<el-header>公众号</el-header>
					<el-main></el-main>
					<el-footer>
						<el-button icon="el-icon-date"></el-button>
						<div class="ms-create-menu">
							<div class="ms-create-sub-menu">
								<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
								<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
							</div>
							<el-button icon="el-icon-plus"></el-button>
						</div>
					</el-footer>
				</el-container>
			</el-aside>
			<el-main>
				<el-card class="custom-menu-card" shadow="never">
					<div slot="header" class="clearfix">
						<span>新建菜单</span>
					</div>
					<el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px">
						<el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name">
							<el-input v-model="customMenuForm.name" size='mini'></el-input>
							<span>菜单名称字数不多于5个汉字或10个字母</span>
						</el-form-item>
						<el-form-item label="菜单内容" class="ms-custom-menu-content">
							<el-input v-model="customMenuForm.link" size='mini'></el-input>
							<span>请输入菜单地址</span>
							<!-- <el-tabs v-model="activeName" @tab-click="">
								<el-tab-pane label="图片" name="picture">
									<span slot="label">
										<i class="el-icon-picture"></i>图片</span>
									<div onclick="materialBankFormVue.open()">
										<i class="el-icon-picture-outline"></i>
										<span>从素材库选择</span>
									</div>
									<div onclick="newPicFormVue.open()">
										<i class="el-icon-plus"></i>
										<span>新建图片</span>
									</div>
								</el-tab-pane>
								<el-tab-pane label="图文管理" name="article">
									<span slot="label">
										<i class="el-icon-picture"></i>图文管理</span>
									<div onclick="materialBankFormVue.open()">
										<i class="el-icon-picture-outline"></i>
										<span>从素材库选择</span>
									</div>
									<div onclick="newPicFormVue.open()">
										<i class="el-icon-plus"></i>
										<span>新建图文</span>
									</div>
								</el-tab-pane>
							</el-tabs> -->
						</el-form-item>
					</el-form>
				</el-card>
			</el-main>
		</el-container>
	</el-container>
</div>
<script>
	var customMenuVue = new Vue({
		el: "#custom-menu",
		data: {
			customMenuForm: {
				name: '',
				link:'',
			},
			customMenuFormRules: {
				name: [{
						required: true,
						message: '请输入菜单名称',
						trigger: ['blur', 'change']
					},
					{
						min: 1,
						max: 5,
						message: '长度在 1 到 5 个字符',
						trigger: ['blur', 'change']
					}
				],
			},
			addSubMenuShow: false, //子菜单添加弹窗
			activeName: 'picture'
		},
		methods: {

		}

	})
</script>