<style>
  .User_Main {
    display: flex;
    margin-top: 10px;
  }

  .UserCenter .User_mobile {
    width: 400px;
    height: 740px;
    padding: 35px 11px;
    background-color: #fff;
    border-radius: 30px;
    background-size: cover;
    position: relative;
    font-size: .85rem;
    float: left;
    margin-right: 1rem;
  }

  .UserCenter .mobile_Header {
    width: 378px;
    height: 64px;
    position: relative;
    text-align: center;
    background: url('../../assets/img/head.png')
  }

  .UserCenter .mobile_Header div {
    position: absolute;
    text-align: center;
    width: 378px;
    font-size: 16px;
    font-weight: 600;
    height: 64px;
    line-height: 88px;
  }

  .UserCenter .mobile_showbox {
    height: 606px;
    width: 375px;
    overflow: auto;
    font-size: 12px;
  }

  .UserCenter .mb_topBox {
    width: 100%;
    height: 150px;
    background: #F5F7F9;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
  }

  .UserCenter .mb_header {
    display: flex;
    align-items: center;
  }

  .UserCenter .mobole_head {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #E3E3E3;
    margin-left: 20px;
  }

  .UserCenter .mb_header span {
    margin-left: 10px;
    color: #fff;
  }

  .UserCenter .mobile_footBox {
    position: relative;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .UserCenter .foot-box-item {
    height: 64px;
    color: #666666;
    font-size: 13px;
    width: 50%;
    display: flex;
    justify-content: center;
  }

  .UserCenter .userAppimage {
    background-size: cover;
    background-position: center center;
    width: 20px;
    height: 20px;
    border-radius: 0%;
    margin-top: 33px;
  }

  .UserCenter .foot-box-info {
    padding-top: 8px;
    margin-left: 8.5px;
    text-align: center;
  }

  .UserCenter .foot-box-num {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .UserCenter .foot-box-line {
    position: absolute;
    height: 20px;
    width: 1px;
    background-color: #666666;
    top: 22px;
    left: 50%;
    margin-left: -1px;
  }

  .UserCenter .userAccount_box {
    width: 100%;
    height: 60px;
    background-color: #f7f7f7;
    padding: 0 8px 8px;
  }

  .UserCenter .userAccount_box>div {
    background-color: #fff;
    border-radius: 4px;
    padding: 8px 0;
    height: 100%;
    display: flex;
    flex-direction: row;
  }

  .UserCenter .accountList {
    padding: 5px 0px;
    border-right: 1px solid rgb(226, 226, 226);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
  }

  .UserCenter .accountList:last-child {
    border-right: 0;
  }

  .UserCenter .accountListImg {
    width: 10px;
    height: 10px;
    border-radius: 0%;
    display: inline-block;
    margin-right: 5px;
  }

  .UserCenter .Account_score {
    color: rgb(255, 187, 67);
    margin-bottom: 5px;
  }

  .UserCenter .AccountOrder_box {
    width: 100%;
    background-color: #f7f7f7;
    padding: 0 8px 1px;
    margin-bottom: 8px;
  }

  .UserCenter .AccountOrder_box>div {
    background-color: #fff;
    border-radius: 8px;
    height: 100%;
  }

  .UserCenter .AccountOrder_Top {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .UserCenter .Account_bTM {
    display: flex;
    margin: 10px 0px;
    padding-bottom: 10px;
    flex-direction: row;
  }

  .UserCenter .Account_bTMList {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .UserCenter .Account_btmimg {
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 30px;
    border-radius: 0%;
  }

  .UserCenter .mobile-menus-box {
    width: 100%;
    background-color: #f7f7f7;
    padding: 8px;
  }

  .UserCenter .mobile-menus-box>div {
    background-color: #fff;
    border-radius: 8px;
    height: 100%;
  }

  .UserCenter .mobile-menus-box .mobile-menu-title {
    padding: 10px 16px;
    font-size: 14px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .UserCenter .mobile_menu_inner {
    display: flex;
    flex-wrap: wrap;
  }

  .UserCenter .mobile_menuList {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 25%;
    margin-bottom: 18px;
  }

  .UserCenter .mobile_menu_image {
    background-size: cover;
    background-position: center center;
    width: 25px;
    height: 25px;
    border-radius: 0%;
  }

  .UserCenter .mobile_showbox::-webkit-scrollbar {
    width: 1px;
  }

  .UserCenter .mobile_tableDiv {
    display: flex;
    flex-direction: column;
  }

  .UserCenter .mobile_tableDivList {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    flex-direction: row;
  }

  .UserCenter .User_rightContent {
    width: 100%;
    height: 740px;
    overflow-y: scroll;
  }

  .UserCenter .User_rightTop {
    margin-bottom: 20px;
    min-width: 500px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  .UserCenter .User_rightTop_header {
    padding: 18px 20px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .UserCenter .User_topBtm {
    padding: 20px;
    padding-right: 30%;
  }

  .UserCenter .userCommonimg {
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .UserCenter .userCommonimg img {
    width: 100%;
    height: 100%;
  }

  .UserCenter .CollectDiv {
    display: flex;
    flex-wrap: wrap;
  }

  .UserCenter .ColeectList {
    display: flex;
    height: 80px;
    padding-top: 10px;
    border: 1px solid #eeeeee;
    margin-left: -1px;
    cursor: pointer;
    min-width: 60px;
    flex-grow: 1;
    max-width: 134.16px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .UserCenter .ColeectImgList {
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 30px;
  }

  .UserCenter .AccountImgList {
    background-size: cover;
    background-position: center center;
    width: 21px;
    height: 21px;
  }

  .UserCenter .LastMenuDiv {
    border: 1px solid #eeeeee;
    background: #F6F8F9;
  }

  .UserCenter .menu-add {
    text-align: right;
    background: #ffffff;
    height: 40px;
    line-height: 40px;
    padding-right: 10px;
  }

  .UserCenter .Lastmenu_item {
    cursor: move;
    background-color: #fff;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .UserCenter .LastMenu_image {
    background-size: cover;
    background-position: center center;
    width: 25px;
    height: 25px;
  }

  .UserCenter .LastMenuFirst {
    margin: 0 10px;
    flex-grow: 0;
  }

  .UserCenter .LastMenu_Second {
    flex-grow: 1;
  }

  .UserCenter .LastMenu_Third {
    display: flex;
    flex-grow: 0;
    width: 94px;
    margin: 5px 0px;
  }

  .mb_headerOther {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
  }

  .UserUpImg img {
    width: 80px;
    height: 80px;
  }

</style>
<template>
  <div class="UserCenter">
    <div class="CommonHeader">用户中心设置</div>
    <div class="User_Main">
      <div class="User_mobile">
        <div class="mobile_Header">
          <div>用户中心</div>
        </div>
        <div class="mobile_showbox">
          <div class="mb_topBox" :style="{backgroundImage:'url('+ postMsg.DefaultBgImg +  ')'}">
            <div class="mb_header" v-if="postMsg.HeadStyle==1">
              <div class="mobole_head"></div>
              <span>用户昵称</span>
            </div>
            <div class="mb_headerOther" v-if="postMsg.HeadStyle==2">
              <div style="margin-left:0;" class="mobole_head"></div>
              <span>用户昵称</span>
            </div>
          </div>
          <div class="mobile_footBox" v-if="postMsg.IsShowFavorite==0">
            <div class="foot-box-item" v-for="(item,index) in postMsg.FavoriteFootMenuList" :key="index">
              <div class="userAppimage" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
              <div class="foot-box-info">
                <div class="foot-box-num">0</div>
                <div>{{item.MenuName}}</div>
              </div>
            </div>
            <div class="foot-box-line"></div>
          </div>
          <div class="userAccount_box" v-if="postMsg.IsShowAccountNav==0">
            <div>
              <div class="accountList" v-for="(item,index) in postMsg.AccountMenuList" :key="index">
                <div class="Account_score">0</div>
                <div>
                  <img class="accountListImg" :src="item.MenuIcon">{{item.MenuName}}
                </div>
              </div>
            </div>
          </div>
          <div class="AccountOrder_box" v-if="postMsg.IsShowOrderNav==0">
            <div>
              <div class="AccountOrder_Top">
                <div>我的订单</div>
                <div style="color: rgb(153, 153, 153);">查看更多></div>
              </div>
              <div class="Account_bTM">
                <div class="Account_bTMList" v-for="(item,index) in postMsg.OrderMenuList" :key="index">
                  <div class="Account_btmimg" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                  <div style="margin-top:5px;">{{item.MenuName}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="AccountOrder_box" v-if="postMsg.IsShowSDNav==0">
            <div>
              <div class="AccountOrder_Top">
                <div>司导订单</div>
                <div style="color: rgb(153, 153, 153);">查看更多></div>
              </div>
              <div class="Account_bTM">
                <div class="Account_bTMList" v-for="(item,index) in postMsg.SDOrderMenuList" :key="index">
                  <div class="Account_btmimg" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                  <div style="margin-top:5px;">{{item.MenuName}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="mobile-menus-box" v-if="postMsg.IsShowMenuNav==0">
            <template v-for="childItem in postMsg.NavMoreList">
              <template v-if="childItem.MenuNavStyle==1">
                <div class="mobile-menu-title">{{childItem.MenuNavTitle}}</div>
                <div class="mobile_menu_inner">
                  <div class="mobile_menuList" v-for="(item,index) in childItem.MeunList" :key="index">
                    <div class="mobile_menu_image" style="margin-bottom:8px;" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                    <div class="vue-line-clamp">{{item.MenuName}}</div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="mobile_tableDiv">
                  <div class="mobile-menu-title">{{childItem.MenuNavTitle}}</div>
                  <div class="mobile_tableDivList" v-for="(item,index) in childItem.MeunList" :key="index">
                    <div class="mobile_menu_image" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                    <div class="vue-line-clamp" style="margin-left:10px;">{{item.MenuName}}</div>
                  </div>
                </div>
              </template>
            </template>
          </div>
        </div>
      </div>
      <div class="User_rightContent">
        <div class="User_rightTop">
          <div class="User_rightTop_header">头像栏设置</div>
          <div class="User_topBtm">
            <el-form label-width="150px">
              <el-form-item label="背景图片" size="small">
                <div>
                  <el-tooltip class="item" effect="dark" content="建议尺寸:750*300" placement="top-start">
                    <el-button size="mini" @click="choicImg=true,imgType=1">选择文件</el-button>
                  </el-tooltip>
                </div>
                <div class="userCommonimg">
                  <img v-if="postMsg.DefaultBgImg" :src="postMsg.DefaultBgImg" alt="" />
                  <img v-else src="../../assets/img/default.png" alt="" />
                </div>
              </el-form-item>
              <el-form-item label="普通用户图标" size="small">
                <div>
                  <el-tooltip class="item" effect="dark" content="建议尺寸:44*44" placement="top-start">
                    <el-button size="mini" @click="choicImg=true,imgType=2">选择文件</el-button>
                  </el-tooltip>
                </div>
                <div class="userCommonimg">
                  <img v-if="postMsg.MemberBgImg" :src="postMsg.MemberBgImg" alt="" />
                  <img v-else src="../../assets/img/default.png" alt="" />
                </div>
              </el-form-item>
              <div style="display:flex;"> 
                <el-form-item label="会员中心背景图" size="small" style="display:inline-block;">
                  <div>
                    <el-tooltip class="item" effect="dark" content="建议尺寸:660*320" placement="top-start">
                      <el-button size="mini" @click="choicImg=true,imgType=3">选择文件</el-button>
                    </el-tooltip>
                  </div>
                  <div class="userCommonimg">
                    <img v-if="postMsg.VipBgImg" :src="postMsg.VipBgImg" alt="" />
                    <img v-else src="../../assets/img/default.png" alt="" />
                  </div>
                </el-form-item>
                <el-form-item label="vip购买图片" size="small" style="display:inline-block;">
                  <div>
                    <el-tooltip class="item" effect="dark" content="建议尺寸:660*320" placement="top-start">
                      <el-button size="mini" @click="choicImg=true,imgType=5">选择文件</el-button>
                    </el-tooltip>
                  </div>
                  <div class="userCommonimg">
                    <img v-if="postMsg.MemberBuyVipImg" :src="postMsg.MemberBuyVipImg" alt="" />
                    <img v-else src="../../assets/img/default.png" alt="" />
                  </div>
                </el-form-item>
              </div>
              <el-form-item label="头像样式" size="small">
                <el-radio-group v-model="postMsg.HeadStyle">
                  <el-radio :label="1">头像靠左</el-radio>
                  <el-radio :label="2">头像居中</el-radio>
                  <!-- <el-radio :label="3">头像内嵌</el-radio> -->
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="User_rightTop">
          <div class="User_rightTop_header">收藏足迹栏</div>
          <el-form label-width="150px" style="padding:20px;">
            <el-form-item label="收藏足迹栏显示状态" size="small">
              <el-switch v-model="postMsg.IsShowFavorite" :active-value="0" :inactive-value="1"></el-switch>
            </el-form-item>
            <el-form-item label="收藏足迹栏" size="small">
              <div class="CollectDiv">
                <div class="ColeectList" v-for="(item,index) in postMsg.FavoriteFootMenuList" :key="index"
                  @click="upDateMsg(item,1),comCheckIndex=index">
                  <div class="ColeectImgList" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                  <div>{{item.MenuName}}</div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="User_rightTop">
          <div class="User_rightTop_header">订单栏设置</div>
          <el-form label-width="150px" style="padding:20px;">
            <el-form-item label="订单栏显示状态" size="small">
              <el-switch v-model="postMsg.IsShowOrderNav" :active-value="0" :inactive-value="1"></el-switch>
            </el-form-item>
            <el-form-item label="订单栏" size="small">
              <div class="CollectDiv">
                <div class="ColeectList" v-for="(item,index) in postMsg.OrderMenuList" :key="index"
                  @click="upDateMsg(item,2),comCheckIndex=index">
                  <div class="ColeectImgList" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                  <div>{{item.MenuName}}</div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="User_rightTop">
          <div class="User_rightTop_header">司导订单栏设置</div>
          <el-form label-width="150px" style="padding:20px;">
            <el-form-item label="司导订单栏显示状态" size="small">
              <el-switch v-model="postMsg.IsShowSDNav" :active-value="0" :inactive-value="1"></el-switch>
            </el-form-item>
            <el-form-item label="订单栏" size="small">
              <div class="CollectDiv">
                <div class="ColeectList" v-for="(item,index) in postMsg.SDOrderMenuList" :key="index"
                  @click="upDateMsg(item,5),comCheckIndex=index">
                  <div class="ColeectImgList" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                  <div>{{item.MenuName}}</div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="User_rightTop">
          <div class="User_rightTop_header">账户栏设置</div>
          <el-form label-width="150px" style="padding:20px;">
            <el-form-item label="显示状态" size="small">
              <el-switch v-model="postMsg.IsShowAccountNav" :active-value="0" :inactive-value="1"></el-switch>
            </el-form-item>
            <el-form-item label="订单栏" size="small">
              <div class="CollectDiv">
                <div class="ColeectList" v-for="(item,index) in postMsg.AccountMenuList" :key="index"
                  @click="upDateMsg(item,3),comCheckIndex=index">
                  <div class="AccountImgList" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                  <div>{{item.MenuName}}</div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="User_rightTop">
          <div class="User_rightTop_header">菜单栏设置</div>
          <el-form label-width="150px" style="padding:20px;">
            <el-form-item label="菜单栏显示状态" size="small">
              <el-switch v-model="postMsg.IsShowMenuNav" :active-value="0" :inactive-value="1"></el-switch>
            </el-form-item>
            <el-form-item label="菜单栏标题" size="small">
              <el-input type="text" size="small" v-model="postMsg.MenuNavTitle" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="菜单栏样式" size="small">
              <el-radio-group v-model="postMsg.MenuNavStyle">
                <el-radio :label="0">列表形式</el-radio>
                <el-radio :label="1">九宫格形式</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单栏" size="small">
              <div class="LastMenuDiv">
                <div class="menu-add">
                  <el-button plain size="mini" @click="isShowLink=true">添加</el-button>
                </div>
                <draggable v-model="postMsg.SelfMenuList">
                  <div class="Lastmenu_item" v-for="(item,index) in postMsg.SelfMenuList" :key="index">
                    <div class="LastMenuFirst">
                      <div class="LastMenu_image" :style="{backgroundImage:'url('+ item.MenuIcon +  ')'}"></div>
                    </div>
                    <div class="LastMenu_Second">{{item.MenuName}}</div>
                    <div class="LastMenu_Third">
                      <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                        <el-button circle type="primary" size="mini" icon="el-icon-edit"
                          @click="upDateMsg(item,4),comCheckIndex=index">
                        </el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                        <el-button circle type="danger" size="mini" icon="el-icon-delete"
                          @click="deleteItem(index,item)">
                        </el-button>
                      </el-tooltip>
                    </div>
                  </div>
                </draggable>
              </div>
            </el-form-item>
          </el-form>
        </div> -->
        <div class="User_rightTop">
          <div class="User_rightTop_header" style="display:flex;justify-content: space-between;align-items:center;">
            <div>菜单栏设置</div>
            <el-button size="small" @click="addOtherMenu">新增</el-button>
          </div>
          <el-form label-width="150px" style="padding:20px;">
            <el-form-item label="菜单栏显示状态" size="small">
              <el-switch v-model="postMsg.IsShowMenuNav" :active-value="0" :inactive-value="1"></el-switch>
            </el-form-item>
            <template v-for="(item,childIndex) in postMsg.NavMoreList">
              <div style="position:relative;border-top:1px solid #d1d1d1;padding-top:40px;">
                <el-tooltip class="item" effect="dark" content="删除当前菜单" placement="top-start">
                  <el-button circle type="danger" size="mini" style="position:absolute;right:5px;top:8px;" icon="el-icon-close"
                    @click="deleNavMore(childIndex)">
                  </el-button>
                </el-tooltip>
                <el-form-item label="菜单栏标题" size="small">
                  <el-input type="text" size="small" v-model="item.MenuNavTitle" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="菜单栏样式" size="small" :key="childIndex+1">
                  <el-radio-group v-model="item.MenuNavStyle">
                    <el-radio :label="0">列表形式</el-radio>
                    <el-radio :label="1">九宫格形式</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单栏" size="small">
                  <div class="LastMenuDiv">
                    <div class="menu-add">
                      <el-button plain size="mini" @click="isShowLink=true,menuIndex=childIndex">添加</el-button>
                    </div>
                    <draggable v-model="item.MeunList">
                      <div class="Lastmenu_item" v-for="(SubItem,SubIndex) in item.MeunList" :key="SubIndex">
                        <div class="LastMenuFirst">
                          <div class="LastMenu_image" :style="{backgroundImage:'url('+ SubItem.MenuIcon +  ')'}"></div>
                        </div>
                        <div class="LastMenu_Second">{{SubItem.MenuName}}</div>
                        <div class="LastMenu_Third">
                          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button circle type="primary" size="mini" icon="el-icon-edit"
                              @click="upDateMsg(SubItem,6),comCheckIndex=SubIndex,ckIndex=childIndex">
                            </el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <el-button circle type="danger" size="mini" icon="el-icon-delete"
                              @click="deleteItem(SubIndex,childIndex,SubItem)">
                            </el-button>
                          </el-tooltip>
                        </div>
                      </div>
                    </draggable>
                  </div>
                </el-form-item>
              </div>
            </template>
          </el-form>

        </div>
        <el-button size="small" type="primary" @click="SetMiniUserCenterConfig()">保存</el-button>
        <el-button size="small" @click="RestoreDefault()">恢复默认</el-button>
      </div>
    </div>

    <!-- 导航菜单编辑 -->
    <el-dialog :title="commonEditTitle" :visible.sync="isShowDialog" width="450px">
      <el-form label-width="120px">
        <el-form-item label="名称">
          <el-input type="text" :disabled="EditIndex==1||EditIndex==2||EditIndex==5" v-model="modifyMsg.name"
            size="small" class="w200" maxlength="100" />
        </el-form-item>
        <el-form-item label="图标">
          <div>
            <el-tooltip class="item" effect="dark" :content="SuggestSize" placement="top-start">
              <el-button size="small" @click="choicImg=true">选择文件</el-button>
            </el-tooltip>
          </div>
          <div class="UserUpImg">
            <img v-if="modifyMsg.image" :src="modifyMsg.image" alt="" />
            <img v-else src="../../assets/img/default.png" alt="" />
          </div>
        </el-form-item>
        <el-form-item label="可查看分组">
          <el-select v-model="modifyMsg.GroupId" clearable class="w300">
            <el-option v-for="item in groupArray" :key="item.GroupId" :label="item.GroupName" :value="item.GroupId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="updateInfo()">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
      <chooseMenu ref="chooseMenu">
      </chooseMenu>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowLink=false">取 消</el-button>
        <el-button size="small" type="danger" @click="getMenu()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>

  </div>
</template>
<script>
  import chooseMenu from "../common/chooseMenu.vue";
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import draggable from "vuedraggable"
  export default {
    data() {
      return {
        comCheckIndex: -1,
        imgType: -1,
        //图片选择弹窗
        choicImg: false,
        //是否显示链接弹窗
        isShowLink: false,
        commonEditTitle: '',
        isShowDialog: false,
        SuggestSize: '',
        EditIndex: 1,
        defaultMsg: {
          //背景图片
          defaultImg: this.domainManager().ImageUrl + '/Static/user_default.jpg',
          //普通用户图标
          MemberBgImg: this.domainManager().ImageUrl + '/Static/user_default.jpg',
          //会员中心背景图
          VipBgImg: this.domainManager().ImageUrl + '/Static/user_cardmember-0.png',
          //vip购买背景图
          MemberBuyVipImg: this.domainManager().ImageUrl + '/Static/user_cardmember-0.png',
          //头像样式
          HeadStyle: 1,
          //收藏足迹栏显示状态
          IsShowFavorite: 0,
          //收藏夹默认图片
          FavoriteIcon: this.domainManager().ImageUrl + '/Static/user_favorite.png',
          //足迹默认图片
          FootIcon: this.domainManager().ImageUrl + '/Static/user_foot.png',
          //订单栏显示状态
          IsShowOrderNav: 0,
          //待付款
          OrderNoPayIcon: this.domainManager().ImageUrl + '/Static/user_order-0.png',
          //待发货
          OrderNoSendIcon: this.domainManager().ImageUrl + '/Static/user_order-1.png',
          //待收货
          OrderNoReciveIcon: this.domainManager().ImageUrl + '/Static/user_order-2.png',
          //待评价
          OrderNoPingJiaIcon: this.domainManager().ImageUrl + '/Static/user_order-3.png',
          //售后
          OrderBeforeSalesIcon: this.domainManager().ImageUrl + '/Static/user_order-4.png',
          //显示状态
          IsShowAccountNav: 0,
          //积分
          IntegralIcon: this.domainManager().ImageUrl + '/Static/user_integral.png',
          //余额
          BalanceIcon: this.domainManager().ImageUrl + '/Static/user_balance.png',
          //优惠券
          CouponIcon: this.domainManager().ImageUrl + '/Static/user_coupon.png',
          //卡券
          CardIcon: this.domainManager().ImageUrl + '/Static/user_card.png',
          //菜单栏显示状态
          IsShowMenuNav: 0,
          //菜单栏标题
          MenuNavTitle: '',
          //菜单栏样式
          MenuNavStyle: 0,
          //全部订单
          AllOrderIcon: this.domainManager().ImageUrl + '/Static/user_order-all.png',
          //我的订单
          MyOrderIcon: this.domainManager().ImageUrl + '/Static/user_order.png',
          //客服
          CustomerServiceIcon: this.domainManager().ImageUrl + '/Static/user_service.png',
          //分销中心
          user_sharecenter: this.domainManager().ImageUrl + '/Static/user_sharecenter.png',
          //我的卡券
          user_usercard: this.domainManager().ImageUrl + '/Static/user_usercard.png',
          //我的优惠券
          user_usercoupons: this.domainManager().ImageUrl + '/Static/user_usercoupons.png',
          //领券中心
          user_coupons: this.domainManager().ImageUrl + '/Static/user_coupons.png',
          //积分明细
          user_score: this.domainManager().ImageUrl + '/Static/user_score.png',
          //商城管理
          user_setting: this.domainManager().ImageUrl + '/Static/user_setting.png',
        },
        modifyMsg: {
          name: '',
          image: '',
          GroupId:''
        },
        //用户中心配置
        userCenterMsg: {
          MenuList: [], //菜单列表
        },
        postMsg: {
          MallBaseId: 0,
          DefaultBgImg: "", //会员中心默认背景
          MemberBgImg: "", //会员中心普通用户背景
          VipBgImg: "", //会员中心Vip背景
          MemberBuyVipImg: "", //vip购买图片选择
          HeadStyle: 0, //会员中心头像样式类型(1-头像靠左，2-头像居中，3-头像内嵌)
          HeadStyleStr: "", //会员中心头像样式字符串
          IsShowFavorite: 0, //是否显示收藏夹(0-显示，1-不显示)
          IsShowOrderNav: 0, //是否显示订单栏(0-显示，1-不显示)
          IsShowSDNav: 0, //是否显示司导订单栏(0-显示，1-不显示)
          IsShowAccountNav: 0, //是否显示账户栏(0-显示，1-不显示)
          IsShowMenuNav: 0, //是否显示菜单栏(0-显示，1-不显示)
          MenuNavTitle: "", //菜单栏标题
          MenuNavStyle: 0, //菜单栏样式(0-列表,1-九宫格)
          FavoriteFootMenuList: [], //收藏足迹菜单
          OrderMenuList: [], //订单菜单
          SDOrderMenuList: [], //司导订单栏
          AccountMenuList: [], //账号菜单
          SelfMenuList: [], //自定义菜单
          NavMoreList: [], //强东新增
        },
        menuIndex: 0, //新增第几个惨淡栏
        ckIndex:0,
        groupArray:[] //可查看分组下拉数据
      };
    },
    components: {
      chooseMenu,
      draggable,
      ChooseImg
    },
    created() {
      this.getMenuList();
    },
    methods: {
      //选择图片
      SelectId(msg) {
        if (this.imgType == 1) {
          this.postMsg.DefaultBgImg = this.getIconLink(msg.url);
        } else if (this.imgType == 2) {
          this.postMsg.MemberBgImg = this.getIconLink(msg.url);
        } else if (this.imgType == 3) {
          this.postMsg.VipBgImg = this.getIconLink(msg.url);
        } else if (this.imgType == 4) {
          this.modifyMsg.image = this.getIconLink(msg.url);
        } else if(this.imgType==5){
          this.postMsg.MemberBuyVipImg = this.getIconLink(msg.url);
        }
        this.choicImg = false;
      },
      getMenu() {
        //调用子组件方法
        var obj = this.$refs.chooseMenu.getChooseMenu();
        this.postMsg.NavMoreList[this.menuIndex].MeunList.push({
          DetailId: 0,
          MallBaseId: 0,
          MenuType: 4,
          MenuName: obj.PageName,
          MenuIcon: "",
          MenuUrl: obj.PageUrl
        });
        this.isShowLink = false;
      },
      //修改确定
      updateInfo() {
        switch (this.EditIndex) {
          case 1:
            this.postMsg.FavoriteFootMenuList[this.comCheckIndex].MenuName = this.modifyMsg.name;
            this.postMsg.FavoriteFootMenuList[this.comCheckIndex].MenuIcon = this.modifyMsg.image;
            break;
          case 2:
            this.postMsg.OrderMenuList[this.comCheckIndex].MenuName = this.modifyMsg.name;
            this.postMsg.OrderMenuList[this.comCheckIndex].MenuIcon = this.modifyMsg.image;
            break;
          case 3:
            this.postMsg.AccountMenuList[this.comCheckIndex].MenuName = this.modifyMsg.name;
            this.postMsg.AccountMenuList[this.comCheckIndex].MenuIcon = this.modifyMsg.image;
            break;
          case 4:
            this.postMsg.SelfMenuList[this.comCheckIndex].MenuName = this.modifyMsg.name;
            this.postMsg.SelfMenuList[this.comCheckIndex].MenuIcon = this.modifyMsg.image;
            break;
          case 5:
            this.postMsg.SDOrderMenuList[this.comCheckIndex].MenuName = this.modifyMsg.name;
            this.postMsg.SDOrderMenuList[this.comCheckIndex].MenuIcon = this.modifyMsg.image;
            break;
          case 6:
            this.postMsg.NavMoreList[this.ckIndex].MeunList[this.comCheckIndex].MenuName = this.modifyMsg.name;
            this.postMsg.NavMoreList[this.ckIndex].MeunList[this.comCheckIndex].MenuIcon = this.modifyMsg.image;
            this.postMsg.NavMoreList[this.ckIndex].MeunList[this.comCheckIndex].GroupId = this.modifyMsg.GroupId;
        }
        this.isShowDialog = false;
      },
      //修改方法
      upDateMsg(item, index) {
        this.isShowDialog = true;
        this.EditIndex = index;
        this.imgType = 4;
        switch (index) {
          case 1:
            this.commonEditTitle = '收藏栏编辑';
            this.SuggestSize = '建议尺寸:40*40';
            break;
          case 2:
            this.commonEditTitle = '订单栏编辑';
            this.SuggestSize = '建议尺寸:60*60';
            break;
          case 3:
            this.commonEditTitle = '我的账户编辑';
            this.SuggestSize = '建议尺寸:26*26';
            break;
          case 4:
            this.commonEditTitle = '订单栏编辑';
            this.SuggestSize = '建议尺寸:50*50';
            break;
          case 5:
            this.commonEditTitle = '司导订单栏编辑';
            this.SuggestSize = '建议尺寸:60*60';
            break;
          case 6:
            this.commonEditTitle = '菜单栏设置';
            this.SuggestSize = '建议尺寸:50*50';
        }
        this.modifyMsg.name = item.MenuName;
        this.modifyMsg.image = item.MenuIcon;
        this.modifyMsg.GroupId = item.GroupId;
      },
      //获取用户中心配置
      getUserCenterConfig() {
        this.apipost("/api/Tenant/GetUserCenterConfig", {}, res => {
          if (res.data.resultCode == 1) {
            var jsonData = res.data.data;
            if (jsonData.DefaultBgImg) {
              this.postMsg.DefaultBgImg = jsonData.DefaultBgImg;
            } else {
              this.postMsg.DefaultBgImg = this.defaultMsg.defaultImg;
            }
            if (jsonData.MemberBgImg) {
              this.postMsg.MemberBgImg = jsonData.MemberBgImg;
            } else {
              this.postMsg.MemberBgImg = this.defaultMsg.MemberBgImg;
            }
            if (jsonData.VipBgImg) {
              this.postMsg.VipBgImg = jsonData.VipBgImg;
            } else {
              this.postMsg.VipBgImg = this.defaultMsg.VipBgImg;
            }
            if(jsonData.MemberBuyVipImg){
              this.postMsg.MemberBuyVipImg = jsonData.MemberBuyVipImg;
            }else{
              this.postMsg.MemberBuyVipImg = this.defaultMsg.MemberBuyVipImg;
            }
            if (jsonData.HeadStyle) {
              this.postMsg.HeadStyle = jsonData.HeadStyle;
            } else {
              this.postMsg.HeadStyle = this.defaultMsg.HeadStyle;
            }
            if (jsonData.IsShowFavorite) {
              this.postMsg.IsShowFavorite = jsonData.IsShowFavorite;
            } else {
              this.postMsg.IsShowFavorite = this.defaultMsg.IsShowFavorite;
            }
            if (jsonData.IsShowOrderNav) {
              this.postMsg.IsShowOrderNav = jsonData.IsShowOrderNav;
            } else {
              this.postMsg.IsShowOrderNav = this.defaultMsg.IsShowOrderNav;
            }
            if (jsonData.IsShowAccountNav) {
              this.postMsg.IsShowAccountNav = jsonData.IsShowAccountNav;
            } else {
              this.postMsg.IsShowAccountNav = this.defaultMsg.IsShowAccountNav;
            }
            if (jsonData.IsShowMenuNav) {
              this.postMsg.IsShowMenuNav = jsonData.IsShowMenuNav;
            } else {
              this.postMsg.IsShowMenuNav = this.defaultMsg.IsShowMenuNav;
            }
            if (jsonData.MenuNavTitle) {
              this.postMsg.MenuNavTitle = jsonData.MenuNavTitle;
            } else {
              this.postMsg.MenuNavTitle = this.defaultMsg.MenuNavTitle;
            }
            if (jsonData.MenuNavStyle) {
              this.postMsg.MenuNavStyle = jsonData.MenuNavStyle;
            } else {
              this.postMsg.MenuNavStyle = this.defaultMsg.MenuNavStyle;
            }
            //收藏足迹栏
            if (jsonData.FavoriteFootMenuList) {
              this.postMsg.FavoriteFootMenuList = jsonData.FavoriteFootMenuList;
            } else {
              this.restoreFavoriteAndFoot(false);
            }
            //订单栏
            if (jsonData.OrderMenuList) {
              this.postMsg.OrderMenuList = jsonData.OrderMenuList;
            } else {
              this.restoreOrder(false);
            }
            //司导栏显示
            if (jsonData.SDOrderMenuList) {
              this.postMsg.SDOrderMenuList = jsonData.SDOrderMenuList;
            }
            //账户栏
            if (jsonData.AccountMenuList) {
              this.postMsg.AccountMenuList = jsonData.AccountMenuList;
            } else {
              this.restoreAccount(false);
            }
            //其它菜单栏
            if (jsonData.SelfMenuList) {
              this.postMsg.SelfMenuList = jsonData.SelfMenuList;
            } else {
              this.restoreSelfMenu(false);
            }
            if (jsonData.NavMoreList) {
              this.postMsg.NavMoreList = jsonData.NavMoreList;
            } else {
              this.restoreSelfMenu(false);
            }
            if (jsonData.IsShowSDNav) {
              this.postMsg.IsShowSDNav = jsonData.IsShowSDNav;
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      getMenuList() {
        this.apipost("/api/Tenant/GetMiniprogramPageListExt", {}, res => {
          if (res.data.resultCode == 1) {
            this.userCenterMsg.MenuList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      SetMiniUserCenterConfig() {
        this.apipost("/api/Tenant/SetMiniUserCenterConfig", this.postMsg, res => {
          if (res.data.resultCode == 1) {
            this.getUserCenterConfig();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      deleteItem(index, childIndex, item) {
        var that = this;
        that.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (item.DetailId > 0) {
            that.apipost("/api/Tenant/RemoveMiniUserCenterMenu", {
              DetailId: item.DetailId
            }, res => {
              if (res.data.resultCode == 1) {} else {
                that.Info(res.data.message);
              }
            })
          }
          that.postMsg.NavMoreList[childIndex].MeunList.splice(index, 1);
        }).catch(() => {

        });
      },

      //删除
      deleNavMore(index){
        var that = this;
        that.$confirm('是否删除当前菜单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.postMsg.NavMoreList.splice(index, 1);
        }).catch(() => {

        });
      },

      //重置"收藏"和"足迹"
      restoreFavoriteAndFoot(isclear) {
        if (isclear) {
          this.postMsg.FavoriteFootMenuList = [];
        }
        this.userCenterMsg.MenuList.forEach(item => {
          if (item.PageTypeId == 1) {
            item.SubMenuList.forEach(subItem => {
              if ((subItem.PageName == "我的收藏" && subItem.PageUrl=='/pages/favorite/favorite') || subItem.PageName == "我的足迹") {
                var dObj = {
                  DetailId: 0,
                  MallBaseId: 0,
                  MenuType: item.PageTypeId,
                  MenuName: subItem.PageName,
                  MenuIcon: "",
                  MenuUrl: subItem.PageUrl
                };
                if (subItem.PageName == "我的收藏") {
                  dObj.MenuIcon = this.defaultMsg.FavoriteIcon;
                }
                if (subItem.PageName == "我的足迹") {
                  dObj.MenuIcon = this.defaultMsg.FootIcon;
                }
                this.postMsg.FavoriteFootMenuList.push(dObj);
              }
            })
          }
        })
      },
      //重置"订单栏"
      restoreOrder(isclear) {
        if (isclear) {
          this.postMsg.OrderMenuList = [];
        }
        this.userCenterMsg.MenuList.forEach(item => {
          if (item.PageTypeId == 3) {
            item.SubMenuList.forEach(subItem => {
              if (subItem.PageName == "待付款" || subItem.PageName == "待发货" || subItem.PageName ==
                "待收货" || subItem.PageName == "待评价" || subItem.PageName == "售后") {
                var dObj = {
                  DetailId: 0,
                  MallBaseId: 0,
                  MenuType: item.PageTypeId,
                  MenuName: subItem.PageName,
                  MenuIcon: "",
                  MenuUrl: subItem.PageUrl
                };
                switch (subItem.PageName) {
                  case "待付款":
                    dObj.MenuIcon = this.defaultMsg.OrderNoPayIcon;
                    break;
                  case "待发货":
                    dObj.MenuIcon = this.defaultMsg.OrderNoSendIcon;
                    break;
                  case "待收货":
                    dObj.MenuIcon = this.defaultMsg.OrderNoReciveIcon;
                    break;
                  case "待评价":
                    dObj.MenuIcon = this.defaultMsg.OrderNoPingJiaIcon;
                    break;
                  case "售后":
                    dObj.MenuIcon = this.defaultMsg.OrderBeforeSalesIcon;
                    break;
                }
                this.postMsg.OrderMenuList.push(dObj);
              }
            })
          }
        })
      },
      //重置"账号栏"
      restoreAccount(isclear) {
        if (isclear) {
          this.postMsg.AccountMenuList = [];
        }
        this.userCenterMsg.MenuList.forEach(item => {
          if (item.PageTypeId == 2) {
            item.SubMenuList.forEach(subItem => {
              if (subItem.PageName == "积分明细" || subItem.PageName == "余额记录" || subItem.PageName ==
                "我的优惠券" || subItem.PageName == "我的卡卷") {
                var dObj = {
                  DetailId: 0,
                  MallBaseId: 0,
                  MenuType: item.PageTypeId,
                  MenuName: subItem.PageName,
                  MenuIcon: "",
                  MenuUrl: subItem.PageUrl
                };
                switch (subItem.PageName) {
                  case "积分明细":
                    dObj.MenuIcon = this.defaultMsg.IntegralIcon;
                    break;
                  case "余额记录":
                    dObj.MenuIcon = this.defaultMsg.BalanceIcon;
                    break;
                  case "我的优惠券":
                    dObj.MenuIcon = this.defaultMsg.CouponIcon;
                    break;
                  case "我的卡卷":
                    dObj.MenuIcon = this.defaultMsg.CardIcon;
                    break;
                }
                this.postMsg.AccountMenuList.push(dObj);
              }
            })
          }
        })
      },
      //重置"自定义菜单栏"
      restoreSelfMenu(isclear) {
        var Arr=[];
        if (isclear) {
          this.postMsg.NavMoreList = [];
        }
        this.userCenterMsg.MenuList.forEach(item => {
          if (item.PageTypeId > 0) {
            item.SubMenuList.forEach(subItem => {
              if ((subItem.PageName == "全部订单" ||
                subItem.PageName == "我的订单" ||
                subItem.PageName == "客服" ||
                subItem.PageName == "分销中心" ||
                subItem.PageName == "我的卡券" ||
                subItem.PageName == "我的优惠券" ||
                subItem.PageName == "领券中心" ||
                subItem.PageName == "积分明细" ||
                subItem.PageName == "商城管理")
              &&subItem.PageUrl!='/pages/guidecar/orderList?status=0') {
                var dObj = {
                  DetailId: 0,
                  MallBaseId: 0,
                  MenuType: 4,
                  MenuName: subItem.PageName,
                  MenuIcon: "",
                  MenuUrl: subItem.PageUrl
                };
                switch (subItem.PageName) {
                  case "全部订单":
                    dObj.MenuIcon = this.defaultMsg.AllOrderIcon;
                    break;
                  case "我的订单":
                    dObj.MenuIcon = this.defaultMsg.MyOrderIcon;
                    break;
                  case "客服":
                    dObj.MenuIcon = this.defaultMsg.CustomerServiceIcon;
                    break;
                  case "分销中心":
                    dObj.MenuIcon = this.defaultMsg.user_sharecenter;
                    break;
                  case "我的卡券":
                    dObj.MenuIcon = this.defaultMsg.user_usercard;
                    break;
                  case "我的优惠券":
                    dObj.MenuIcon = this.defaultMsg.user_usercoupons;
                    break;
                  case "领券中心":
                    dObj.MenuIcon = this.defaultMsg.user_coupons;
                    break;
                  case "积分明细":
                    dObj.MenuIcon = this.defaultMsg.user_score;
                    break;
                  case "商城管理":
                    dObj.MenuIcon = this.defaultMsg.user_setting;
                    break;
                }
                Arr.push(dObj);
              }
            })
          }
        })
        var obj = {
          Sort:1,
          MenuNavTitle:'',
          TitleStyle:1,
          MenuNavStyle:1,
          MeunList:Arr
        }
        this.postMsg.NavMoreList.push(obj);
      },
      //重置基本信息
      restoreBasic() {
        this.postMsg.DefaultBgImg = this.defaultMsg.defaultImg;
        this.postMsg.MemberBgImg = this.defaultMsg.MemberBgImg;
        this.postMsg.VipBgImg = this.defaultMsg.VipBgImg;
        this.postMsg.MemberBuyVipImg = this.defaultMsg.MemberBuyVipImg;
        this.postMsg.HeadStyle = this.defaultMsg.HeadStyle;
        this.postMsg.IsShowFavorite = this.defaultMsg.IsShowFavorite;
        this.postMsg.IsShowOrderNav = this.defaultMsg.IsShowOrderNav;
        this.postMsg.IsShowAccountNav = this.defaultMsg.IsShowAccountNav;
        this.postMsg.IsShowMenuNav = this.defaultMsg.IsShowMenuNav;
        this.postMsg.MenuNavTitle = this.defaultMsg.MenuNavTitle;
        this.postMsg.MenuNavStyle = this.defaultMsg.MenuNavStyle;
      },
      //恢复默认
      RestoreDefault() {
        let that = this;
        that.$confirm('是否要恢复默认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.restoreFavoriteAndFoot(true);
          that.restoreOrder(true);
          that.restoreAccount(true);
          that.restoreSelfMenu(true);
          that.restoreBasic();
          that.apipost("/api/Tenant/RemoveMiniUserCenterMenuByMallId", {}, res => {
            if (res.data.resultCode == 1) {
              that.SetMiniUserCenterConfig();
            } else {
              that.Info(res.data.message);
            }
          });
        }).catch(() => {

        });
      },
      //新增菜单栏
      addOtherMenu() {
        let obj = {
          Sort: this.postMsg.NavMoreList.length + 1,
          MenuNavTitle: '',
          TitleStyle: 1,
          MenuNavStyle: 0,
          MeunList: []
        }
        this.postMsg.NavMoreList.push(obj);
      },
      //获取分组下来列表
      getgroupList() {
        this.apipost("/api/User/GetMemberGroupList", {}, res => {
          if (res.data.resultCode == 1) {
            this.groupArray = res.data.data;
          }
        });
      }
    },
    mounted() {
      this.getgroupList();
      this.getUserCenterConfig();
    }
  };

</script>
