<template>
  <div
    class="menu_setting_box js_menuBox dn"
    style="display: block;">
    <div
      id="menustatus_1"
      class="highlight_box border icon_wrap menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon icon icon_msg_small success"/>
      <p class="title">菜单使用中</p>
      <p class="desc">可在手机查看菜单内容。若停用菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      id="menustatus_2"
      class="highlight_box border icon_wrap menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon icon_msg_small info"/>
      <p class="title">菜单编辑中</p>
      <p class="desc">菜单未发布，请确认菜单编辑完成后点击“保存并发布”同步到手机。若停用菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      id="menustatus_3"
      class="highlight_box icon_wrap border menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon icon_msg_small waiting"/>
      <p class="title">菜单已发布</p>
      <p class="desc"><span class="js_waitHour"/>小时后可在手机查看菜单内容。若停用菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      id="menustatus_4"
      class="highlight_box icon_wrap border icon_small menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon lock"/>
      <p class="title">未开启自定义菜单</p>
      <p class="desc">通过编辑和发布自定义菜单来进行便携管理。若开启菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      id="menustatus_5"
      class="highlight_box icon_wrap border icon_small menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon lock"/>
      <p class="title">未开启自定义菜单</p>
      <p class="desc">由于开发者通过接口修改了菜单配置，当前菜单配置已失效并停用。你可以前往<a
        href="/advanced/advanced?action=dev&amp;t=advanced/dev&amp;token=1849635325&amp;lang=zh_CN">开发者中心</a>进行停用。
      </p>
    </div>
    <div
      id="menustatus_6"
      class="highlight_box icon_wrap border menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon icon icon_msg_small success"/>
      <p class="title">API版本菜单使用中</p>
      <p class="desc">该页面显示的菜单版本已失效。当前生效版本请调用API查看。若停用菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      id="menustatus_7"
      class="highlight_box icon_wrap border menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon icon icon_msg_small success"/>
      <p class="title">API版本/个性化菜单使用中</p>
      <p class="desc">该页面显示的菜单版本已失效。当前生效版本请调用API查看。若停用菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      id="menustatus_8"
      class="highlight_box icon_wrap border menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon icon_msg_small waiting"/>
      <p class="title">菜单已发布/个性化菜单使用中</p>
      <p class="desc"><span class="js_waitHour"/>小时后可在手机查看菜单内容。当前生效的个性化菜单内容请调用API查看。若停用菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      id="menustatus_9"
      class="highlight_box icon_wrap border menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon icon_msg_small info"/>
      <p class="title">菜单编辑中/个性化菜单使用中</p>
      <p class="desc">菜单未发布，请确认菜单编辑完成后点击“保存并发布”同步到手机。当前生效的个性化菜单内容请调用API查看。若停用菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      id="menustatus_10"
      class="highlight_box icon_wrap border menu_setting_msg js_menustatus dn"
      style="display: none;">
      <i class="icon icon icon_msg_small success"/>
      <p class="title">菜单使用中/个性化菜单使用中</p>
      <p class="desc">可在手机查看菜单内容，当前生效的个性化菜单内容请调用API查看。若停用菜单，请<a
        href="/cgi-bin/plugindetails?t=service/profile&amp;pluginid=10007&amp;action=intro&amp;token=1849635325&amp;lang=zh_CN"
        class="js_closeMenu">点击这里</a></p>
    </div>
    <div
      class="page_msg mini plugin_update_tips js_authorized"
      style="display:none;margin:-20px 30px 0 30px">
      <div class="inner group">
        <span class="msg_icon_wrp"><i class="icon_msg_mini info"/></span>
        <div class="msg_content">
          <p>你已授权给<span class="js_auth_name"/>帮助你运营公众号，点击管理<a
            href="/cgi-bin/component_unauthorize?action=list&amp;t=service/auth_plugins&amp;token=1849635325&amp;lang=zh_CN">已授权的第三方平台</a>
          </p>
        </div>
      </div>
    </div>
    <div class="menu_setting_area js_editBox">
      <div class="menu_preview_area">
        <div class="mobile_menu_preview">
          <div class="mobile_hd tc">
            {{ gzh_name }}
          </div>
          <div class="mobile_bd">
            <ul
              id="menuList"
              class="pre_menu_list grid_line ui-sortable ui-sortable-disabled no_menu"
              style="z-index:3;">
              <li
                v-for="(btn,index) in menu.button"
                :key="btn.id"
                class="jsMenu pre_menu_item grid_item jslevel1 size1of3 ui-sortable ui-sortable-disabled">
                <a
                  :class="[{pre_menu_link: index===activeMenuIndex && activeMenuType()==1}]"
                  href="javascript:void(0);"
                  draggable="false"
                  @click="menu_selected(btn.name,index)">
                  <i class="icon_menu_dot js_icon_menu_dot dn"/>
                  <i class="icon20_common sort_gray"/>
                  <span class="js_l1Title">{{ btn.name }}</span>
                </a>
                <div
                  v-if="index===activeMenuIndex"
                  class="sub_pre_menu_box js_l2TitleBox">
                  <ul class="sub_pre_menu_list">
                    <li
                      v-for="(sub,index) in btn.sub_button"
                      :key="sub.id"
                      class="jslevel2"><a
                        :class="[{pre_menu_link: index===activeMenuItemIndex && activeMenuType()==2}]"
                        href="javascript:void(0);"
                        class="jsSubView"
                        draggable="false"
                        @click="menu_item_selected(sub.name,index)"><span class="sub_pre_menu_inner js_sub_pre_menu_inner"><i
                          class="icon20_common sort_gray"/><span class="js_l2Title">{{ sub.name }}</span></span></a></li>
                    <li
                      v-if="isSet(menu.button[activeMenuIndex].sub_button)&&btn.sub_button.length>=0&&btn.sub_button.length<5"
                      class="js_addMenuBox">
                      <a
                        href="javascript:void(0);"
                        class="jsSubView js_addL2Btn"
                        title="最多添加5个子菜单"
                        draggable="false"
                        @click="menu_item_add()"><span class="sub_pre_menu_inner js_sub_pre_menu_inner"><i
                          class="icon14_menu_add"/></span></a></li>
                  </ul>
                  <i class="arrow arrow_out"/>
                  <i class="arrow arrow_in"/>
                </div>
              </li>
              <li class="js_addMenuBox pre_menu_item grid_item no_extra size1of1"><a
                v-if="isSet(menu.button)?(menu.button.length>=0&&menu.button.length<3):false"
                :class="[{pre_menu_link: activeMenuIndex===''}]"
                href="javascript:void(0);"
                class="js_addL1Btn"
                title="最多添加3个一级菜单"
                draggable="false"
                @click="menu_add()"> <i
                  class="icon14_menu_add"/> <span class="js_addMenuTips">添加菜单</span></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="menu_form_area">
        <div
          id="js_none"
          class="menu_initial_tips tips_global"
          style="display: none;"/>
        <div
          v-show="activeMenuIndex > 0 || activeMenuIndex === 0 || activeMenuItemIndex > 0 || activeMenuIndex === 0 "
          id="js_rightBox"
          class="portable_editor to_left"
          style="display: none;">
          <div class="editor_inner">
            <div class="global_mod float_layout menu_form_hd js_second_title_bar">
              <h4 class="global_info"> 菜单名称 </h4>
              <div class="global_extra">
                <a
                  v-if="showDelBtnType===1"
                  id="jsDelBt"
                  href="javascript:void(0);"
                  @click="menu_del()">删除菜单</a>
                <a
                  v-if="showDelBtnType===2"
                  id="jsDelBt"
                  href="javascript:void(0);"
                  @click="menu_item_del()">删除子菜单</a>
              </div>
            </div>
            <div
              id="view"
              class="menu_form_bd">
              <div
                id="js_innerNone"
                style="display:none;"
                class="msg_sender_tips tips_global"/>
              <div class="frm_control_group js_setNameBox">
                <label
                  for=""
                  class="frm_label"> <strong class="title js_menuTitle">菜单名称</strong>
                </label>
                <div class="frm_controls">
                  <span
                    v-if="activeMenuType() == 1 && isSet(menu.button[activeMenuIndex])"
                    class="frm_input_box with_counter counter_in append"> <input
                      v-model="menu.button[activeMenuIndex].name"
                      type="text"
                      class="frm_input js_menu_name"> </span>
                  <span
                    v-if="activeMenuType() == 2 && isSet(menu.button[activeMenuIndex].sub_button[activeMenuItemIndex])"
                    class="frm_input_box with_counter counter_in append">
                    <input
                      v-model="menu.button[activeMenuIndex].sub_button[activeMenuItemIndex].name"
                      type="text"
                      class="frm_input js_menu_name">
                  </span>
                  <p class="frm_msg fail js_titleEorTips dn">字数超过上限</p>
                  <p
                    class="frm_msg fail js_titlenoTips dn"
                    style="display: none;">请输入菜单名称</p>
                  <p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p>
                </div>
              </div>
              <div
                v-show="((activeMenuIndex > 0 || activeMenuIndex === 0) && (menu.button[activeMenuIndex].sub_button.length == 0)) || (activeMenuItemIndex > 0 || activeMenuItemIndex === 0) "
                class="frm_control_group"
                style="display: none;">
                <label
                  for=""
                  class="frm_label"> <strong class="title js_menuContent">菜单内容</strong>
                </label>
                <div class="frm_controls frm_vertical_pt">
                  <label
                    :class="[{selected:showMenuContentType===1}]"
                    class="frm_radio_label js_radio_sendMsg"
                    data-editing="0"
                    @click="radio_label_selected(1)"> <i class="icon_radio"/> <span class="lbl_content">发送消息</span> <input
                      type="radio"
                      name="hello"
                      class="frm_radio"> </label>
                  <label
                    :class="[{selected:showMenuContentType===2}]"
                    class="frm_radio_label js_radio_url"
                    data-editing="0"
                    @click="radio_label_selected(2)"> <i class="icon_radio"/> <span class="lbl_content">跳转网页</span> <input
                      type="radio"
                      name="hello"
                      class="frm_radio"> </label>
                  <label
                    :class="[{selected:showMenuContentType===3}]"
                    class="frm_radio_label js_radio_url"
                    data-editing="0"
                    @click="radio_label_selected(3)"> <i class="icon_radio"/> <span class="lbl_content">小程序</span> <input
                      type="radio"
                      name="hello"
                      class="frm_radio"> </label>
                </div>
              </div>
              <div class="menu_content_container">
                <div
                  v-show="showMenuContentType===1"
                  id="edit"
                  class="menu_content send jsMain"
                  style="display: none;">
                  <div
                    id="editDiv"
                    class="msg_sender">
                    <div class="msg_tab">
                      <div class="tab_navs_panel">
                        <span class="tab_navs_switch_wrp switch_prev js_switch_prev"> <span
                          class="tab_navs_switch"/> </span>
                        <span
                          class="tab_navs_switch_wrp switch_next js_switch_next"
                          style="display: none;"> <span class="tab_navs_switch"/>
                        </span>
                        <div
                          class="tab_navs_wrp"
                          style="width: 650px">
                          <ul
                            class="tab_navs js_tab_navs"
                            style="margin-left:0;">
                            <li
                              :class="[{selected:showMenuContentMsgType===1}]"
                              class="tab_nav tab_appmsg width4"
                              data-type="10"
                              data-tab=".js_appmsgArea"
                              data-tooltip="图文消息"><a
                                href="javascript:void(0);"
                                @click="content_msg_tab_nav(1)">&nbsp;<i
                                  class="icon_msg_sender"/><span class="msg_tab_title">图文消息</span></a></li>
                            <li
                              :class="[{selected:showMenuContentMsgType===2}]"
                              class="tab_nav tab_img width4"
                              data-type="2"
                              data-tab=".js_imgArea"
                              data-tooltip="图片"><a
                                href="javascript:void(0);"
                                @click="content_msg_tab_nav(2)">&nbsp;<i
                                  class="icon_msg_sender"/><span class="msg_tab_title">图片</span></a></li>
                            <li
                              :class="[{selected:showMenuContentMsgType===3}]"
                              class="tab_nav tab_audio width4"
                              data-type="3"
                              data-tab=".js_audioArea"
                              data-tooltip="语音"><a
                                href="javascript:void(0);"
                                @click="content_msg_tab_nav(3)">&nbsp;<i
                                  class="icon_msg_sender"/><span class="msg_tab_title">语音</span></a></li>
                            <li
                              :class="[{selected:showMenuContentMsgType===4}]"
                              class="tab_nav tab_video width4 no_extra"
                              data-type="15"
                              data-tab=".js_videoArea"
                              data-tooltip="视频">
                              <a
                                href="javascript:void(0);"
                                @click="content_msg_tab_nav(4)">&nbsp;<i class="icon_msg_sender"/><span
                                  class="msg_tab_title">视频</span></a></li>
                            <li class="tab_nav">
                              <label>KEY:</label>
                              <input
                                v-if="activeMenuType() == 1 && isSet(menu.button[activeMenuIndex])"
                                v-model="menu.button[activeMenuIndex].key"
                                style="width: 190px"
                                type="text"
                                value="">
                              <input
                                v-if="activeMenuType() == 2 && isSet(menu.button[activeMenuIndex].sub_button[activeMenuItemIndex])"
                                v-model="menu.button[activeMenuIndex].sub_button[activeMenuItemIndex].key"
                                style="width: 190px"
                                type="text"
                                value="">
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="tab_panel">
                        <div
                          v-show="showMenuContentMsgType===1"
                          class="tab_content"
                          style="display: none;">
                          <div class="js_appmsgArea inner ">
                            <!--type 10图文 2图片  3语音 15视频 11商品消息-->
                            <div
                              class="tab_cont_cover jsMsgSendTab"
                              data-index="0">
                              <div class="media_cover">
                                <span class="create_access"> <a
                                  class="add_gray_wrp jsMsgSenderPopBt"
                                  href="javascript:void(0);"
                                  data-type="10"
                                  data-index="0"> <i class="icon36_common add_gray"/>
                                <strong>从素材库中选择</strong> </a> </span>
                              </div>
                              <div class="media_cover">
                                <span class="create_access"> <a
                                  target="_blank"
                                  class="add_gray_wrp"
                                  href="javascript:void(0);">
                                  <i class="icon36_common add_gray"/>
                                <strong>新建图文消息</strong> </a>
                                  <!--
                               <a target="_blank" href="javascript:void(0);"><i class="icon_shopmsg_create"></i><strong>单图文消息</strong></a>
                               <a target="_blank" href="javascript:void(0);"><i class="icon_shopmsg_create multi"></i><strong>多图文消息</strong></a>
                               -->
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          v-show="showMenuContentMsgType===2"
                          class="tab_content"
                          style="display: none;">
                          <div class="js_imgArea inner ">
                            <!--type 10图文 2图片  3语音 15视频 11商品消息-->
                            <div
                              class="tab_cont_cover jsMsgSendTab"
                              data-index="1"
                              data-type="2">
                              <div class="media_cover">
                                <span class="create_access"> <a
                                  class="add_gray_wrp jsMsgSenderPopBt"
                                  href="javascript:void(0);"
                                  data-type="2"
                                  data-index="1"> <i class="icon36_common add_gray"/>
                                <strong>从素材库中选择</strong> </a> </span>
                              </div>
                              <div class="media_cover">
                                <span class="create_access"> <a
                                  id="msgSendImgUploadBt"
                                  class="add_gray_wrp"
                                  data-type="2"
                                  href="javascript:void(0);"> <i
                                    class="icon36_common add_gray"/>
                                <strong>上传图片</strong> </a> </span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          v-show="showMenuContentMsgType===3"
                          class="tab_content"
                          style="display: none;">
                          <div class="js_audioArea inner ">
                            <!--type 10图文 2图片  3语音 15视频 11商品消息-->
                            <div
                              class="tab_cont_cover jsMsgSendTab"
                              data-index="2"
                              data-type="3">
                              <div class="media_cover">
                                <span class="create_access"> <a
                                  class="add_gray_wrp jsMsgSenderPopBt"
                                  href="javascript:void(0);"
                                  data-type="3"
                                  data-index="2"> <i class="icon36_common add_gray"/>
                                <strong>从素材库中选择</strong> </a> </span>
                              </div>
                              <div class="media_cover">
                                <span class="create_access"> <a
                                  id="msgSendAudioUploadBt"
                                  class="add_gray_wrp "
                                  href="javascript:void(0);"> <i
                                    class="icon36_common add_gray"/>
                                <strong>新建语音</strong> </a> </span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          v-show="showMenuContentMsgType===4"
                          class="tab_content"
                          style="display: none;">
                          <div class="js_videoArea inner ">
                            <!--type 10图文 2图片  3语音 15视频 11商品消息-->
                            <div
                              class="tab_cont_cover jsMsgSendTab"
                              data-index="3">
                              <div class="media_cover">
                                <span class="create_access"> <a
                                  class="add_gray_wrp jsMsgSenderPopBt"
                                  href="javascript:void(0);"
                                  data-type="15"
                                  data-index="3"> <i class="icon36_common add_gray"/>
                                <strong>从素材库中选择</strong> </a> </span>
                              </div>
                              <div class="media_cover">
                                <span class="create_access"> <a
                                  target="_blank"
                                  class="add_gray_wrp"
                                  href="javascript:void(0);">
                                  <i class="icon36_common add_gray"/>
                                <strong>新建视频</strong> </a> </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="profile_link_msg_global menu_send mini_tips warn dn js_warn">
                    请勿添加其他公众号的主页链接 </p>
                </div>
                <div
                  v-show="showMenuContentType===2"
                  id="url"
                  class="menu_content url jsMain"
                  style="display: none;">
                  <form
                    id="urlForm"
                    action=""
                    onsubmit="return false;">
                    <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p>
                    <div class="frm_control_group">
                      <label
                        for=""
                        class="frm_label">页面地址</label>
                      <div class="frm_controls">
                        <span
                          v-if="activeMenuType() == 1"
                          class="frm_input_box"> <input
                            id="urlText"
                            v-model="menu.button[activeMenuIndex].url"
                            type="text"
                            class="frm_input"
                            name="urlText"> </span>
                        <span
                          v-if="activeMenuType() == 2"
                          class="frm_input_box"> <input
                            id="urlText"
                            v-model="menu.button[activeMenuIndex].sub_button[activeMenuItemIndex].url"
                            type="text"
                            class="frm_input"
                            name="urlText">
                        </span>
                        <p class="profile_link_msg_global menu_url mini_tips warn dn js_warn">
                          请勿添加其他公众号的主页链接 </p>
                        <p
                          id="js_urlTitle"
                          class="frm_tips"
                          style="display: none;"> 来自<span class="js_name"/><span style="display:none;"> -《<span
                            class="js_title"/>》</span></p>
                      </div>
                    </div>
                    <div class="frm_control_group btn_appmsg_wrap">
                      <div class="frm_controls">
                        <p
                          id="urlUnSelect"
                          class="frm_msg fail dn"
                          style="display: none;">
                          <span
                            for="urlText"
                            class="frm_msg_content"
                            style="display: inline;">请选择一篇文章</span></p>
                        <a
                          id="js_appmsgPop"
                          href="javascript:void(0);">从公众号图文消息中选择</a>
                        <a
                          id="js_reChangeAppmsg"
                          href="javascript:void(0);"
                          class="dn btn btn_default">重新选择</a>
                      </div>
                    </div>
                  </form>
                </div>
                <div
                  v-show="showMenuContentType===3"
                  class="menu_content url jsMain"
                  style="display: none;">
                  <form
                    action=""
                    onsubmit="return false;">
                    <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下小程序</p>
                    <div class="frm_control_group">
                      <label
                        for=""
                        class="frm_label">小程ID</label>
                      <div class="frm_controls">
                        <span
                          v-if="activeMenuType() == 1"
                          class="frm_input_box"> <input
                            id="urlText"
                            v-model="menu.button[activeMenuIndex].appid"
                            type="text"
                            class="frm_input"
                            name="urlText"> </span>
                        <span
                          v-if="activeMenuType() == 2"
                          class="frm_input_box"> <input
                            id="urlText"
                            v-model="menu.button[activeMenuIndex].sub_button[activeMenuItemIndex].appid"
                            type="text"
                            class="frm_input"
                            name="urlText">
                        </span>
                        <p class="profile_link_msg_global menu_url mini_tips warn dn js_warn">
                          请勿添加其他公众号的主页链接 </p>
                        <p
                          id="js_urlTitle"
                          class="frm_tips"
                          style="display: none;"> 来自<span class="js_name"/><span style="display:none;"> -《<span
                            class="js_title"/>》</span></p>
                      </div>
                    </div>
                    <div class="frm_control_group">
                      <label
                        for=""
                        class="frm_label">首页地址</label>
                      <div class="frm_controls">
                        <span
                          v-if="activeMenuType() == 1"
                          class="frm_input_box"> <input
                            v-model="menu.button[activeMenuIndex].pagepath"
                            type="text"
                            class="frm_input"
                            name="urlText"> </span>
                        <span
                          v-if="activeMenuType() == 2"
                          class="frm_input_box"> <input
                            v-model="menu.button[activeMenuIndex].sub_button[activeMenuItemIndex].pagepath"
                            type="text"
                            class="frm_input"
                            name="urlText">
                        </span>
                        <p class="profile_link_msg_global menu_url mini_tips warn dn js_warn">
                          请勿添加其他公众号的主页链接 </p>
                        <p
                          id="js_urlTitle"
                          class="frm_tips"
                          style="display: none;"> 来自<span class="js_name"/><span style="display:none;"> -《<span
                            class="js_title"/>》</span></p>
                      </div>
                    </div>
                  </form>
                </div>
                <div
                  class="menu_content sended"
                  style="display:none;">
                  <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p>
                  <div
                    id="viewDiv"
                    class="msg_wrp"/>
                  <p class="frm_tips">来自<span class="js_name">素材库</span><span style="display:none;">
                    -《<span class="js_title"/>》</span></p>
                </div>
                <div
                  id="js_errTips"
                  style="display:none;"
                  class="msg_sender_msg mini_tips warn"/>
              </div>
            </div>
          </div>
          <span class="editor_arrow_wrp"> <i class="editor_arrow editor_arrow_out"/> <i
            class="editor_arrow editor_arrow_in"/> </span>
        </div>
      </div>
    </div>
    <div class="tool_bar tc js_editBox">
      <el-button type="primary" @click="saveData()">保存菜单</el-button>
      <el-button type="danger" @click="delData()">删除菜单</el-button>
      <el-button type="success" @click="pubData()">发布菜单</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Wechat',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data: function() {
    return {
      gzh_name: '实时预览',
      menu: {},
      new_menu: { button: [] },
      activeMenuName: '',
      activeMenuIndex: '',
      activeMenuItemName: '',
      activeMenuItemIndex: '',
      showDelBtnType: '', // 1:delMenu 2:delMenuItem
      showMenuContentType: '', // 1:发送消息 2:跳转链接
      showMenuContentMsgType: '' // 1:图文信息 2:图片 3:语音 4:视频
    }
  },
  watch: {
    data: {
      handler(val) {
        this.menu = val
      },
      immediate: true
    }
  },
  methods: {
    menu_data_completing: function() {
      for (let i = 0; i < this.menu.button.length; i++) {
        if (!('type' in this.menu.button[i])) {
          this.menu.button[i].type = 'click'
        }
        if (!('name' in this.menu.button[i])) {
          this.menu.button[i].name = ''
        }
        if (!('key' in this.menu.button[i])) {
          this.menu.button[i].key = ''
        }
        if (!('url' in this.menu.button[i])) {
          this.menu.button[i].url = ''
        }
        if (!('appid' in this.menu.button[i])) {
          this.menu.button[i].appid = ''
        }
        if (!('pagepath' in this.menu.button[i])) {
          this.menu.button[i].pagepath = ''
        }
        if (!('sub_button' in this.menu.button[i])) {
          this.menu.button[i].sub_button = []
        }
        if (this.menu.button[i].sub_button.length > 0) {
          for (let j = 0; j < this.menu.button[i].sub_button.length; j++) {
            if (!('type' in this.menu.button[i].sub_button[j])) {
              this.menu.button[i].sub_button[j].type = 'click'
            }
            if (!('name' in this.menu.button[i].sub_button[j])) {
              this.menu.button[i].sub_button[j].name = ''
            }
            if (!('key' in this.menu.button[i].sub_button[j])) {
              this.menu.button[i].sub_button[j].key = ''
            }
            if (!('url' in this.menu.button[i].sub_button[j])) {
              this.menu.button[i].sub_button[j].url = ''
            }
            if (!('appid' in this.menu.button[i].sub_button[j])) {
              this.menu.button[i].sub_button[j].appid = ''
            }
            if (!('pagepath' in this.menu.button[i].sub_button[j])) {
              this.menu.button[i].sub_button[j].pagepath = ''
            }
            if (!('sub_button' in this.menu.button[i].sub_button[j])) {
              this.menu.button[i].sub_button[j].sub_button = []
            }
          }
        }
      }
    },
    saveData: function() {
      // 补全数据,无数据也要为空
      this.menu_data_completing()
      for (let i = 0; i < this.menu.button.length; i++) {
        if (this.menu.button[i].sub_button.length > 0) {
          const _sub_button = []
          for (let j = 0; j < this.menu.button[i].sub_button.length; j++) {
            if (this.menu.button[i].sub_button[j].type == 'click') {
              _sub_button[j] = {
                type: this.menu.button[i].sub_button[j].type,
                name: this.menu.button[i].sub_button[j].name,
                key: this.menu.button[i].sub_button[j].key
              }
            } else if (this.menu.button[i].sub_button[j].type == 'view') {
              _sub_button[j] = {
                type: this.menu.button[i].sub_button[j].type,
                name: this.menu.button[i].sub_button[j].name,
                url: this.menu.button[i].sub_button[j].url
              }
            } else if (this.menu.button[i].sub_button[j].type == 'miniprogram') {
              _sub_button[j] = {
                type: this.menu.button[i].sub_button[j].type,
                name: this.menu.button[i].sub_button[j].name,
                appid: this.menu.button[i].sub_button[j].appid,
                pagepath: this.menu.button[i].sub_button[j].pagepath
              }
            }
          }
          if (this.menu.button[i].type == 'click') {
            this.new_menu.button[i] = {
              name: this.menu.button[i].name,
              sub_button: _sub_button
            }
          } else if (this.menu.button[i].type == 'view') {
            this.new_menu.button[i] = {
              name: this.menu.button[i].name,
              sub_button: _sub_button
            }
          } else if (this.menu.button[i].type == 'miniprogram') {
            this.new_menu.button[i] = {
              name: this.menu.button[i].name,
              sub_button: _sub_button
            }
          }
        } else {
          if (this.menu.button[i].type == 'click') {
            this.new_menu.button[i] = {
              type: this.menu.button[i].type,
              name: this.menu.button[i].name,
              key: this.menu.button[i].key
            }
          } else if (this.menu.button[i].type == 'view') {
            this.new_menu.button[i] = {
              type: this.menu.button[i].type,
              name: this.menu.button[i].name,
              url: this.menu.button[i].url
            }
          } else if (this.menu.button[i].type == 'miniprogram') {
            this.new_menu.button[i] = {
              type: this.menu.button[i].type,
              name: this.menu.button[i].name,
              appid: this.menu.button[i].appid,
              pagepath: this.menu.button[i].pagepath
            }
          }
        }
      }
      this.$emit('saveData', this.new_menu)
    },
    pubData: function() {
      this.$emit('pubData', this.new_menu)
    },
    delData: function() {
      this.$emit('delData', this.new_menu)
    },
    menu_selected: function(name, index) {
      this.showDelBtnType = 1
      this.activeMenuName = name
      this.activeMenuIndex = index
      this.activeMenuItemName = ''
      this.activeMenuItemIndex = ''

      // 补全数据,无数据也要为空
      this.menu_data_completing()

      if (this.menu.button[this.activeMenuIndex].sub_button.length > 0) {
        this.showMenuContentType = ''
      } else {
        this.showMenuContentType = this.activeMenuBtnType()
      }
    },
    menu_item_selected: function(name, index) {
      this.showDelBtnType = 2
      this.activeMenuItemName = name
      this.activeMenuItemIndex = index

      // 补全数据,无数据也要为空
      this.menu_data_completing()

      if (this.activeMenuIndex > 0 || this.activeMenuIndex === 0) {
        if (this.menu.button[this.activeMenuIndex].sub_button.length > 0) {
          this.showMenuContentType = this.activeMenuBtnType()
        }
      }
    },
    menu_add: function() {
      if (this.menu.button.length < 3) {
        this.activeMenuItemIndex = ''
        this.activeMenuItemName = ''
        this.menu.button.push({
          type: 'click',
          name: '菜单名称',
          key: '',
          url: '',
          sub_button: []
        })
        this.activeMenuIndex = this.menu.button.length - 1
        this.activeMenuName = '菜单名称'
        this.showDelBtnType = 1
        // 补全数据,无数据也要为空
        this.menu_data_completing()
      } else {
        alert('最多3个一级菜单')
      }
    },
    menu_item_add: function() {
      if (this.menu.button[this.activeMenuIndex].sub_button.length < 5) {
        this.menu.button[this.activeMenuIndex].sub_button.push({
          type: 'click',
          name: '子菜单名称',
          key: '',
          url: '',
          sub_button: []
        })
        this.activeMenuItemIndex =
            this.menu.button[this.activeMenuIndex].sub_button.length - 1
        this.activeMenuItemName = '子菜单名称'
        this.showDelBtnType = 2
        // 补全数据,无数据也要为空
        this.menu_data_completing()
      } else {
        alert('最多5个二级菜单')
      }
    },
    menu_del: function() {
      if (this.menu.button.length <= 3 && this.menu.button.length > 0) {
        if (
          this.activeMenuIndex !== 0 &&
            this.activeMenuIndex == this.menu.button.length - 1
        ) {
          this.menu.button.splice(this.activeMenuIndex, 1)
          this.activeMenuIndex -= 1
        } else if (this.activeMenuIndex == 0) {
          this.menu.button.splice(this.activeMenuIndex, 1)
          this.activeMenuIndex = 0
        } else {
          this.menu.button.splice(this.activeMenuIndex, 1)
        }

        if (this.menu.button.length == 0) {
          this.activeMenuIndex = ''
          this.activeMenuName = ''
          this.activeMenuItemIndex = ''
          this.activeMenuItemName = ''
        }
      }
    },
    menu_item_del: function() {
      if (
        this.menu.button[this.activeMenuIndex].sub_button.length <= 5 &&
          this.menu.button[this.activeMenuIndex].sub_button.length > 0
      ) {
        if (
          this.activeMenuItemIndex ==
            this.menu.button[this.activeMenuIndex].sub_button.length - 1
        ) {
          this.menu.button[this.activeMenuIndex].sub_button.splice(
            this.activeMenuItemIndex,
            1
          )
          this.activeMenuItemIndex -= 1
        } else if (this.activeMenuItemIndex == 0) {
          this.menu.button[this.activeMenuIndex].sub_button.splice(
            this.activeMenuItemIndex,
            1
          )
          this.activeMenuItemIndex = 0
        } else {
          this.menu.button[this.activeMenuIndex].sub_button.splice(
            this.activeMenuItemIndex,
            1
          )
        }

        if (this.menu.button[this.activeMenuIndex].sub_button.length == 0) {
          this.activeMenuIndex = ''
          this.activeMenuName = ''
          this.activeMenuItemIndex = ''
          this.activeMenuItemName = ''
        }
        this.showMenuContentType = this.activeMenuBtnType()
      }
    },
    radio_label_selected: function(val) {
      this.showMenuContentType = val
      if (val == 1) {
        this.setType('click')
      } else if (val == 2) {
        this.setType('view')
      } else if (val == 3) {
        this.setType('miniprogram')
      }
    },
    content_msg_tab_nav: function(val) {
      this.showMenuContentMsgType = val
    },
    activeMenuType: function() {
      if (this.activeMenuIndex !== '' && this.activeMenuItemIndex !== '') {
        // 子菜单、二级菜单
        return 2
      } else if (
        this.activeMenuIndex !== '' &&
          this.activeMenuItemIndex === ''
      ) {
        // 一级菜单
        return 1
      } else {
        return 0
      }
    },
    activeMenuBtnType: function() {
      if (this.activeMenuType() === 1) {
        // 一级菜单
        switch (this.menu.button[this.activeMenuIndex].type) {
          case 'click':
            return 1
          case 'view':
            return 2
          case 'miniprogram':
            return 3
          default:
            return 0
        }
      } else if (this.activeMenuType() === 2) {
        // 子菜单、二级菜单
        switch (
          this.menu.button[this.activeMenuIndex].sub_button[
            this.activeMenuItemIndex
          ].type
        ) {
          case 'click':
            return 1
          case 'view':
            return 2
          case 'miniprogram':
            return 3
          default:
            return 0
        }
      } else {
        return ''
      }
    },
    isSet: function(variable) {
      if (typeof variable !== 'undefined') {
        return true
      } else {
        return false
      }
    },
    setType: function(type) {
      if (this.activeMenuType() == 1) {
        this.menu.button[this.activeMenuIndex].type = type
      } else if (this.activeMenuType() == 2) {
        this.menu.button[this.activeMenuIndex].sub_button[
          this.activeMenuItemIndex
        ].type = type
      }
    },
    setNemMenuObj: function() {
      for (let i = 0; i < this.menu.button.length; i++) {
        if (this.menu.button[i].sub_button.length > 0) {
          this.new_menu.push({
            name: this.menu.button[i].name,
            sub_button: this.menu.button[i].sub_button
          })
        } else {
          if (this.menu.button[i].type == 'click') {
            this.new_menu.push({
              name: this.menu.button[i].name,
              type: this.menu.button[i].type,
              key: this.menu.button[i].key,
              sub_button: []
            })
          } else if (this.menu.button[i].type == 'view') {
            this.new_menu.push({
              name: this.menu.button[i].name,
              type: this.menu.button[i].type,
              url: this.menu.button[i].url,
              sub_button: []
            })
          } else if (this.menu.button[i].type == 'miniprogram') {
            this.new_menu.push({
              name: this.menu.button[i].name,
              type: this.menu.button[i].type,
              appid: this.menu.button[i].appid,
              pagepath: this.menu.button[i].pagepath,
              sub_button: []
            })
          }
        }
      }
    }
  }
}
</script>
<style src="./css/base.css" scoped/>
<style src="./css/index.css" scoped/>
<style src="./css/media_dialog&emotion_editor&msg_tab&emoji&msg_sender&tooltip.css" scoped/>
