<style>



  .basicSetUp .el-tabs__header{
    padding: 0 20px;height: 56px;line-height: 56px; background-color: #fff;margin-bottom: 0;
  }
  .basicSetUp .title {
    margin-top: 10px;
    padding: 18px 20px;
    border-top: 1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3;
    background-color: #fff;
  }

  .basicSetUp .form-body {
    background-color: #fff;
    padding: 20px 50% 20px 0;
  }


  .basicSetUp .custom_t {
    display: flex;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    padding: 20px 0px;

  }
  .basicSetUp .Mintips{
      max-width: 700px;
    white-space: nowrap;/*内容超宽后禁止换行显示*/
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/*文字超出部分以省略号显示*/
    height: 72px;
    display: flex;
    flex-direction: row;
    align-content: center;
    background: black;
    position: absolute;
    right: 25px;
    top:200px;
    line-height: 72px;
  }
  .basicSetUp .triangle-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid black;
    position: absolute;
    right: 150px;
    top:180px
  }
  .basicSetUp .left-setting-menu {
    width: 260px;

  }
  .basicSetUp .left-setting-menu .el-form-item {
    height: 60px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
  }
  .basicSetUp .left_box{
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;

  }
  .basicSetUp .active{
    background-color: #F3F5F6;
    border-top-left-radius: 10px;
    /*width: 105%;*/
    border-bottom-left-radius: 10px;
  }
.basicSetUp .right-setting-menu{
  background-color: rgb(243, 245, 246);
  padding: 30px;
  border-radius: 10px;

}
.basicSetUp .item-img{
  height: 550px;
  padding: 25px 10px;
  border-radius: 30px;
  border: 1px solid #CCCCCC;
  background-color: #fff;
}
  .basicSetUp .item-img img{
    height: 100%;
  }
  .basicSetUp .img_yuan{
    width: 80px;
    height: 80px;
    margin-top: 5px;
    position: relative;
  }
  .basicSetUp .img_yuan img{
    width: 100%;
    height: 100%;
  }
  .basicSetUp .inputM_l{
    margin-left: 20px;
  }
  .basicSetUp .shanchu{
    width: 28px;height: 28px;
    border-radius: 50%;
    background: #F56C6C;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -14px;
    top: -6px;
  }
  .basicSetUp .el-button{
    padding: 7px 15px;
  }
</style>
<template>
  <div class="basicSetUp">
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="基本信息" name="first">
        <div id="pane-first">
          <div class="title"><span>基本设置</span></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="130px" style="padding:0 50px;">
              <el-form-item label="商城名称" prop="MallName" class="is-required">
                <el-input v-model="msg.MallName" class="inputM_l"/>
              </el-form-item>
              <el-form-item label="联系号码" prop="password1">
                <el-input v-model="msg.ContactNumber" @keyup.native="checkInteger(msg,'ContactNumber')" type="text" class="inputM_l"/>
              </el-form-item>
              <el-form-item label="外链客服链接" prop="password2">
                <el-input v-model="msg.OuterServiceLink" class="inputM_l"/>
              </el-form-item>
              <el-form-item label="一键导航">
                <el-form-item label="详细地址" label-width="80px">
                  <el-input v-model="msg.Address" class="inputM_l"/>
                </el-form-item>
                <el-form-item label="经纬度" style="margin-top: 15px;" label-width="80px">
                  <el-tooltip class="item" effect="dark" content="点击地图，可获取经纬度" placement="top"
                              style="position: absolute;left: -10px;top:13px">
                    <i class="el-tooltip el-icon-info"></i>
                  </el-tooltip>

                  <el-input v-model="msg.LongAndLat" :disabled="true" class="inputM_l"/>
                </el-form-item>
                <el-form-item label="地图" style="margin-top: 15px" label-width="80px">
                  <button class="el-button el-button--default el-button--small inputM_l" @click="isShowMap=true">
                    展开地图
                  </button>
                </el-form-item>
              </el-form-item>
              <el-form-item label="跳转小程序">
                <el-tooltip class="item" effect="dark" content="悬浮按钮跳转小程序" placement="top"
                            style="position: absolute;left: -10px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-form-item label="小程序appId" label-width="120px">
                  <el-input v-model="msg.MinAppId" placeholder="请输入跳转小程序AppId" class="inputM_l"/>
                </el-form-item>
                <el-form-item label="小程序路径" label-width="120px" style="margin-top: 15px">
                  <el-input v-model="msg.MinUrl" placeholder="请输入跳转小程序路径" class="inputM_l"/>
                </el-form-item>
              </el-form-item>
            </el-form>
          </div>


          <div class="title"><span>交易设置</span></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="未支付订单超时时间" prop="CancelTime">
                <el-tooltip class="item" effect="dark" content="注意：如果设置为0，则为支付订单将不会被取消" placement="top"
                            style="position: absolute;left: -10px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.CancelTime" type="number" class="inputM_l" :min="0">
                  <template slot="append">分</template>
                </el-input>
              </el-form-item>

              <el-form-item label="自动确认收货时间" prop="AutoReceiving">
                <el-tooltip class="item" effect="dark" content="从发货到自动确认的时间" placement="top"
                            style="position: absolute;left: -10px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.AutoReceiving" type="number" class="inputM_l" :min="0">
                  <template slot="append">天</template>
                </el-input>
              </el-form-item>

              <el-form-item label="售后时间" prop="AfterTime">
                <el-tooltip class="item" effect="dark"
                            content="可以申请售后的时间。注意：分销订单中的已完成订单，只有订单已确认收货，并且时间超过设置的售后天数之后才计入其中！" placement="top"
                            style="position: absolute;left: -10px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.AfterTime" type="number" class="inputM_l" :min="0">
                  <template slot="append">天</template>
                </el-input>
              </el-form-item>

              <el-form-item label="支付方式">
                <el-tooltip class="item" effect="dark" content="若都不勾选，默认选中线上支付" placement="top"
                            style="position: absolute;left: -10px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-checkbox-group v-model="checkbox.PayWay" class="inputM_l" @change="checkedPayWay">
                  <el-checkbox v-for="team in PayWaylist" :label="team.Id" :key="team.name">{{team.name}}</el-checkbox>
                </el-checkbox-group>

              </el-form-item>


              <el-form-item label="发货方式">
                <el-tooltip class="item" effect="dark" content="需添加门店，到店自提方可生效" placement="top"
                            style="position: absolute;left: -10px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-checkbox-group v-model="checkbox.DeliverWay" class="inputM_l" @change="checkedDeliverWay">
                  <el-checkbox v-for="team in DeliverWaylist" :label="team.Id" :key="team.name">{{team.name}}</el-checkbox>
                </el-checkbox-group>
                <div style="color: rgb(204, 204, 204);" class="inputM_l">
                  注：手机端显示排序（<span>1.同城配送 </span><span>2.到店自提 </span><span>3.快递配送 </span>）
                </div>
              </el-form-item>
              <el-form-item label="余额功能" >
                <el-switch
                  class="inputM_l"
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.BalanceFun"
                  active-text=""
                  inactive-text="">
                </el-switch>
              </el-form-item>

              <el-form-item label="商品面议联系方式">
                <el-tooltip class="item" effect="dark" content="若客服和外链客服两者都不勾选，默认勾选客服；客服和外链客服前端统一显示为客服" placement="top"
                            style="position: absolute;left: -10px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-checkbox-group v-model="checkbox.ConsultWay" class="inputM_l" @change="checkedConsultWay">
                  <el-checkbox v-for="team in ConsultWaylist" :label="team.Id" :key="team.name">{{team.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </el-form>

          </div>
          <div class="title"><span>自定义设置</span></div>
          <div class="custom_t">
            <div style="width: 50%">
              <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
                <el-form-item label="添加到我的小程序">
                </el-form-item>

                <el-form-item label="开关">
                  <el-switch
                    class="inputM_l"
                  :active-value="1"
                  :inactive-value="0"
                    v-model="msg.MinSwitch"
                    active-text=""
                    inactive-text="">
                  </el-switch>
                </el-form-item>

                <el-form-item label="背影颜色" v-if="msg.MinSwitch== true">
                  <el-color-picker
                    class="inputM_l"
                    v-model="msg.MinBackColor"
                    show-alpha
                    :predefine="predefineColors">
                  </el-color-picker>
                </el-form-item>
                <el-form-item label="背影透明度" v-if="msg.MinSwitch== true">
                  <el-row>
                    <el-col class="userinfo" :span="16">
                      <el-slider v-model="msg.MinBackClarity"></el-slider>
                    </el-col>
                    <el-col class="userinfo" :span="7" style="margin-left: 4.16667%;">
                      <el-input-number v-model="msg.MinBackClarity" controls-position="right" :min="0" :max="100"></el-input-number>
                    </el-col>
                  </el-row>

                </el-form-item>

                <el-form-item label="背景框圆角" v-if="msg.MinSwitch== true">
                  <el-row>
                    <el-col class="userinfo" :span="16">
                      <el-slider v-model="msg.MinBackCircularBead" :min="0" :max="36"></el-slider>
                    </el-col>
                    <el-col class="userinfo" :span="7" style="margin-left: 4.16667%;">
                      <el-input-number v-model="msg.MinBackCircularBead" controls-position="right" :min="0" :max="36"></el-input-number>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="提示文本内容" v-if="msg.MinSwitch== true">
                  <el-tooltip class="item" effect="dark" content="最多允许添加20个字" placement="top"
                              style="position: absolute;left: -10px;top:13px">
                    <i class="el-tooltip el-icon-info"></i>
                  </el-tooltip>
                  <el-input v-model="msg.MinTips" @keyup="inputChange" maxlength="20" show-word-limit class="inputM_l"/>
                </el-form-item>

                <el-form-item label="文本颜色" v-if="msg.MinSwitch== true">

                  <el-color-picker
                    class="inputM_l"
                    v-model="msg.MinTipsColor"
                    show-alpha
                    :predefine="predefineColors">
                  </el-color-picker>
                </el-form-item>

                <el-form-item label="图标颜色" v-if="msg.MinSwitch== true">
                  <el-radio-group v-model="msg.MinIcoColor" class="inputM_l">
                    <el-radio :label="1">白色</el-radio>
                    <el-radio :label="2">黑色</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>

            <div style="width: 50%; padding-left: 100px; zoom: 0.5;" v-if="msg.MinSwitch== true">
              <div style="width: 750px; border: 1px solid rgb(238, 238, 238);position: relative">
                <img src="../../assets/img/heads.png"  alt="" :style="{width: '750px',background:msg.MinIcoColor==1? '#FFFFFF':'#000000'}">
                <div class="Mintips" :style="{opacity: msg.MinBackClarity/100,borderRadius:msg.MinBackCircularBead+'px',background:msg.MinBackColor}">
                  <img src="../../assets/img/fork_white.png" alt="" style="width: 72px;height: 72px">
                  <span :style="{padding: '0 10px',color:msg.MinTipsColor}" >{{msg.MinTips}}</span>
                </div>
                <div class="triangle-up" :style="{opacity: msg.MinBackClarity/100,borderBottomColor:msg.MinBackColor}">

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


          <div style="margin-top: 1px" class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="转发小程序">
              </el-form-item>

              <el-form-item label="转发标题" >
                <el-input v-model="msg.MinShareTitle" class="inputM_l"/>
                <button class="el-button el-button--default el-button--small inputM_l" @click="openChangeDig(1)">
                  选择图标
                </button>
                <div class="img_yuan inputM_l">
                  <img v-if="msg.MinShareIco=='' || msg.MinShareIco==null" src="../../assets/img/setup/default_img.png" alt="">
                  <img v-else :src="msg.MinShareIco" alt="">
                  <div class="shanchu" @click="msg.MinShareIco=''" v-if="msg.MinShareIco">
                    <i class="el-icon-close" style="color: white"></i>
                  </div>
                </div>
              </el-form-item>
            </el-form>

          </div>
          <div style="margin-top: 1px" class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="首页购买记录框">
              </el-form-item>

              <el-form-item label="开关">
                <el-switch
                  class="inputM_l"
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.BuySwitch"
                  active-text=""
                  inactive-text="">
                </el-switch>
              </el-form-item>

              <el-form-item label="轮播订单数">
                <el-tooltip class="item" effect="dark" content="轮播最新的N条订单" placement="top"
                            style="position: absolute;left: -10px;top:13px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.CarouselOrder" class="inputM_l"/>
              </el-form-item>
            </el-form>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="显示设置" name="second">
        <div id="pane-second">
          <el-tabs v-model="activeName2" @tab-click="handleClick2" style="margin-top: 20px">
            <el-tab-pane label="商品列表显示" name="one">
              <div id="pane-first">
                <div class="form-body" style="padding: 40px; display: flex;">
                  <div class="left-setting-menu">
                      <div class="left_box" @click="target(1)" :class="{active:target_o== 1}">
                        <span style="margin-right: 10px">购物车</span>
                        <el-switch
                          :active-value="1"
                          :inactive-value="0"
                          v-model="msg.ListShopCar">
                        </el-switch>
                      </div>
                      <div class="left_box " @click="target(2)" :class="{active:target_o== 2}" >
                        <span style="margin-right: 10px">已售量</span>
                        <el-switch
                          :active-value="1"
                          :inactive-value="0"
                          v-model="msg.ListBuyCount">
                        </el-switch>
                      </div>
                      <div class="left_box " @click="target(3)" :class="{active:target_o== 3}">
                        <span style="margin-right: 10px">商品名称</span>
                        <el-switch
                          :active-value="1"
                          :inactive-value="0"
                          v-model="msg.ListName">
                        </el-switch>
                      </div>
                  </div>
                  <div class="right-setting-menu">
                    <div class="item-img">
                      <img v-if="target_o==1" src="../../assets/img/setup/is_show_cart.png" alt="">
                      <img v-else-if="target_o==2" src="../../assets/img/setup/is_show_sales_num.png" alt="">
                      <img v-else-if="target_o==3" src="../../assets/img/setup/is_show_goods_name.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商品详情显示" name="two">
              <div id="pane-first">
                <div class="form-body" style="padding: 40px; display: flex;">
                  <div class="left-setting-menu">
                    <div class="left_box" @click="target2(1)" :class="{active:target_o2== 1}">
                      <span style="margin-right: 10px">商城评论</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsComment">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(2)" :class="{active:target_o2== 2}" >
                      <span style="margin-right: 10px">划线价</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsLineationPrice">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(3)" :class="{active:target_o2== 3}">
                      <span style="margin-right: 10px">普通用户会员价</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsMemberPrice">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(4)" :class="{active:target_o2== 4}">
                      <span style="margin-right: 10px">会员用户会员价</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsVipMemberPrice">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(5)" :class="{active:target_o2== 5}">
                      <span style="margin-right: 10px">快递</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DeatilsExpress">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(6)" :class="{active:target_o2== 6}">
                      <span style="margin-right: 10px">已售量</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsBuyNum">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(7)" :class="{active:target_o2== 7}">
                      <span style="margin-right: 10px">分销价</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsSharePrice">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target2(8)" :class="{active:target_o2== 8}">
                      <span style="margin-right: 10px">商品视频特色样式开关</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.DetailsVideo">
                      </el-switch>
                    </div>
                  </div>
                  <div class="right-setting-menu">
                    <div class="item-img">
                      <img v-if="target_o2==1" src="../../assets/img/setup/comment_show.png" alt="">
                      <img v-else-if="target_o2==2" src="../../assets/img/setup/is_underline_price.png" alt="">
                      <img v-else-if="target_o2==3" src="../../assets/img/setup/price_show_2.png" alt="">
                      <img v-else-if="target_o2==4" src="../../assets/img/setup/price_show.png" alt="">
                      <img v-else-if="target_o2==5" src="../../assets/img/setup/is_express.png" alt="">
                      <img v-else-if="target_o2==6" src="../../assets/img/setup/sales_show.png" alt="">
                      <img v-else-if="target_o2==7" src="../../assets/img/setup/share_show.png" alt="">
                      <img v-else-if="target_o2==8" src="../../assets/img/setup/goods-video.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="其他显示" name="san">
              <div id="pane-first">
                <div class="form-body" style="padding: 40px; display: flex;">
                  <div class="left-setting-menu">
                    <div class="left_box" @click="target3(1)" :class="{active:target_o3== 1}">
                      <span style="margin-right: 10px">非分销商分销中心显示</span>
                      <el-tooltip class="item" effect="dark"
                                  content="仅控制用户中心显示" placement="top" style="margin-right: 5px">
                        <i class="el-tooltip el-icon-info"></i>
                      </el-tooltip>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherNoShare">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(2)" :class="{active:target_o3== 2}" >
                      <span style="margin-right: 10px">首页授权手机号</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherIndexMoblie">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(3)" :class="{active:target_o3== 3}">
                      <span style="margin-right: 10px">手动授权手机号</span>
                      <el-tooltip class="item" effect="dark"
                                  content="开启后,绑定手机号页面会显示手机号手动授权" placement="top" style="margin-right: 5px">
                        <i class="el-tooltip el-icon-info"></i>
                      </el-tooltip>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherManualMobile">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(4)" :class="{active:target_o3== 4}">
                      <span style="margin-right: 10px">关联公众号组件</span>
                      <el-tooltip class="item" effect="dark"
                                  content="注意：该功能需要 ->微信小程序后台->设置->接口设置 开启并设置关联(同一主体下)的公众号" placement="top" style="margin-right: 5px">
                        <i class="el-tooltip el-icon-info"></i>
                      </el-tooltip>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherTencent">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(5)" :class="{active:target_o3== 5}">
                      <span style="margin-right: 10px">会员等级标识</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherMemerLevel">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(6)" :class="{active:target_o3== 6}">
                      <span style="margin-right: 10px">定位地址是否必填</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherMustAddress">
                      </el-switch>
                    </div>
                    <div class="left_box " @click="target3(7)" :class="{active:target_o3== 7}">
                      <span style="margin-right: 10px">申请分销商提示弹窗</span>
                      <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="msg.OtherApplyShare">
                      </el-switch>
                    </div>
                  </div>
                  <div class="right-setting-menu">
                    <div class="item-img">
                      <img v-if="target_o3==1" src="../../assets/img/setup/is_not_share_show.png" alt="">
                      <img v-else-if="target_o3==2" src="../../assets/img/setup/auth_mobile.png" alt="">
                      <img v-else-if="target_o3==3" src="../../assets/img/setup/manual_mobile_auth.png" alt="">
                      <img v-else-if="target_o3==4" src="../../assets/img/setup/official_account.png" alt="">
                      <img v-else-if="target_o3==5" src="../../assets/img/setup/icon_members_grade.png" alt="">
                      <img v-else-if="target_o3==6" src="../../assets/img/setup/is_required_position.png" alt="">
                      <img v-else-if="target_o3==7" src="../../assets/img/setup/is_share_tip.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="悬浮按钮设置" name="third">
        <div id="pane-third">
          <div class="title"><span>悬浮窗设置</span></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="启用悬浮按钮">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.SuspendBtn">
                </el-switch>
              </el-form-item>

              <el-form-item label="悬浮按钮样式" v-if="msg.SuspendBtn==true">
                <el-radio-group v-model="msg.SuspendStyle">
                  <el-radio :label="1">展开收起</el-radio>
                  <el-radio :label="2">固定展开</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="展开图标" v-if="msg.SuspendBtn==true">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(2)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.UnfoldIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.UnfoldIco =='' || msg.UnfoldIco==null" src="../../assets/img/setup/quick_navigation_opened_pic.png" alt="">
                  <img v-else :src="msg.UnfoldIco" alt="">
                </div>

              </el-form-item>
              <el-form-item label="收起图标" v-if="msg.SuspendBtn==true">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(3)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.PackUpIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.PackUpIco =='' || msg.PackUpIco==null" src="../../assets/img/setup/quick_navigation_closed_pic.png" alt="">
                  <img v-else :src="msg.PackUpIco" alt="">
                </div>

              </el-form-item>
            </el-form>
          </div>
          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="在线客服开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.OnlineService">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(4)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.OnlineServiceIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.OnlineServiceIco =='' || msg.OnlineServiceIco==null" src="../../assets/img/setup/customer_services_pic.png" alt="">
                  <img v-else :src="msg.OnlineServiceIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="返回首页导航开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.BackTopNavigation">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(5)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.BackTopNavigationIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.BackTopNavigationIco =='' || msg.BackTopNavigationIco==null" src="../../assets/img/setup/quick_home_pic.png" alt="">
                  <img v-else :src="msg.BackTopNavigationIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="一键拨号开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.OneCall">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(6)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.OneCallIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.OneCallIco =='' || msg.OneCallIco==null" src="../../assets/img/setup/dial_pic.png" alt="">
                  <img v-else :src="msg.OneCallIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="客服外链开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.ServiceOutLink">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(7)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.ServiceOutLinkIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.ServiceOutLinkIco =='' || msg.ServiceOutLinkIco==null" src="../../assets/img/setup/web_service_pic.png" alt="">
                  <img v-else :src="msg.ServiceOutLinkIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="快捷导航开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.ShortcutNavigation">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(8)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.ShortcutNavigationIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.ShortcutNavigationIco =='' || msg.ShortcutNavigationIco==null" src="../../assets/img/setup/quick_map_pic.png" alt="">
                  <img v-else :src="msg.ShortcutNavigationIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="跳转小程序开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.TurnMini">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(9)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.TurnMiniIco =''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.TurnMiniIco =='' || msg.TurnMiniIco==null" src="../../assets/img/setup/small_app_pic.png" alt="">
                  <img v-else :src="msg.TurnMiniIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="form-body" v-if="msg.SuspendBtn==true" style="margin-top: 1px">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="自定义按钮">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.Custom">
                </el-switch>
              </el-form-item>

              <el-form-item label="跳转链接">
                <el-input placeholder="请输入内容" v-model="msg.TurnLink" :disabled="true">
                  <el-button slot="append" @click="isShowLink=true" style="background: white">选择链接</el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(10)">选择图标</el-button>
                </el-tooltip>
                <el-button type="primary" @click="msg.TurnIco=''">恢复默认</el-button>
                <div class="img_yuan">
                  <img v-if="msg.TurnIco=='' || msg.TurnIco==null" src="../../assets/img/setup/default_img.png" alt="">
                  <img v-else :src="msg.TurnIco" alt="">
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="title"><span>悬浮按钮设置</span><el-tooltip class="item" effect="dark" content="用于商品列表页" placement="top" style="margin-right: 10px"><i class="el-tooltip el-icon-info"></i></el-tooltip></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="启用回到顶部悬浮按钮">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.BackTopBtn">
                </el-switch>
              </el-form-item>

              <el-form-item label="启用购物车悬浮按钮">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.CarSuspendBtn">
                </el-switch>
              </el-form-item>
            </el-form>
          </div>


          <div class="title"><span>商品售罄图标设置</span></div>
          <div class="form-body">
            <el-form :model="msg" :rules="rules" ref="msg" label-width="200px" style="padding:0 20px;">
              <el-form-item label="售罄图标显示开关">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.SellOutIcoSwitch">
                </el-switch>
              </el-form-item>

              <el-form-item label="是否使用默认图标" v-if="msg.SellOutIcoSwitch==true">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  v-model="msg.SellOutDefaultIco">
                </el-switch>
              </el-form-item>

              <el-form-item label="商品图正常尺寸" v-if="msg.SellOutIcoSwitch==true">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(11)">选择图标</el-button>
                </el-tooltip>
                <div class="img_yuan">
                  <img v-if="msg.SellOutDefaultIco == true" src="../../assets/img/setup/plugins-out.png" alt="" style="background: black">
                  <img v-if="msg.SellOutDefaultIco == false && msg.GoodsNormalPic" :src='msg.GoodsNormalPic' alt="">
                  <img v-else src="../../assets/img/setup/default_img.png" alt="">
                </div>
              </el-form-item>

              <el-form-item label="商品图4:3尺寸" v-if="msg.SellOutIcoSwitch==true">
                <el-tooltip class="item" effect="dark" content="建议尺寸:100 * 100" placement="top" style="margin-right: 5px">
                  <el-button @click="openChangeDig(12)">选择图标</el-button>
                </el-tooltip>
                <div class="img_yuan">
                  <img v-if="msg.SellOutDefaultIco == true" src="../../assets/img/setup/plugins-out.png" alt="" style="background: black">
                  <img v-if="msg.SellOutDefaultIco == false&& msg.GoodsZoomPic" :src='msg.GoodsZoomPic' alt="">
                  <img v-else src="../../assets/img/setup/default_img.png" alt="">
                </div>
              </el-form-item>


            </el-form>
          </div>

        </div>
      </el-tab-pane>
      <el-button type="primary" style="margin: 12px 0 " @click="preserve">保存</el-button>

    </el-tabs>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
    </el-dialog>
    <!-- 选择链接 -->
    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
      <chooseMeun ref="chooseMeun"></chooseMeun>
      <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="isShowLink=false">取 消</el-button>
                <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
            </span>
    </el-dialog>
    <!-- 地图选址 -->
    <el-dialog title="地图展示" :visible.sync="isShowMap" width="960px">
      <commonMap @map-submit="mapEvent"></commonMap>
    </el-dialog>
  </div>
</template>

<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import chooseMeun from "../common/chooseMeun.vue";
  import commonMap from "../common/commonMap.vue";

  export default {
    name: "basicSetUp",
    components: {
      ChooseImg,
      chooseMeun,
      commonMap
    },
    data() {
      return {
        activeName: 'first',
        activeName2:'one',
        msg: {
          ID:'',
          MallName: '',//商城名称
          Indate: '',//有效期
          ContactNumber: '',//联系号码
          OuterServiceLink: '',
          Address: '',
          LongAndLat: '',
          MinAppId: '',
          MinUrl: '',
          CancelTime: 0,
          AutoReceiving: 0,
          AfterTime: 0,
          PayWay: '',
          DeliverWay: '',
          BalanceFun: 0,
          ConsultWay: '',
          MinSwitch: 1,
          MinBackColor: '#000000',
          MinBackClarity: 100,
          MinBackCircularBead: 36,
          MinTips: '添加到我的小程序，购买更便捷',
          MinTipsColor: '#FFFFFF',
          MinIcoColor: 1,
          MinShareTitle: '',
          MinShareIco: '',
          BuySwitch: 0,
          CarouselOrder: 0,
          ListShopCar: 0,
          ListBuyCount: 1,
          ListName: 1,
          DetailsComment: 1,
          DetailsLineationPrice: 1,
          DetailsMemberPrice: 1,
          DetailsVipMemberPrice: 1,
          DeatilsExpress: 1,
          DetailsBuyNum: 1,
          DetailsSharePrice: 1,
          DetailsVideo: 1,
          OtherNoShare: 1,
          OtherIndexMoblie: 0,
          OtherManualMobile: 1,
          OtherTencent:0,
          OtherMemerLevel: 0,
          OtherMustAddress: 0,
          OtherApplyShare:0,
          SuspendBtn: 0,
          BackTopBtn: 1,
          CarSuspendBtn: 0,
          SellOutIcoSwitch: 1,
          SellOutDefaultIco: 0,
          GoodsNormalPic: '',
          GoodsZoomPic: '',
          SuspendStyle:1,
          UnfoldIco:0,
          PackUpIco:'',
          OnlineService:0,
          OnlineServiceIco:'',
          BackTopNavigation:0,
          BackTopNavigationIco:'',
          OneCall:0,
          OneCallIco:'',
          ServiceOutLink:0,
          ServiceOutLinkIco:'',
          ShortcutNavigation:0,
          ShortcutNavigationIco:'',
          TurnMini:0,
          TurnMiniIco:'',
          Custom:0,
          TurnLink:'',
          TurnIco:0,
        },
        checkbox:{
          PayWay:[],
          DeliverWay: [],
          ConsultWay: [],

        },
        isShowMap:false,
        isShowLink:false,
        Choiceimg:0,
        changeState:false,
        predefineColors: [
          '#000000',
          '#FFFFFF',
          '#888888',
          '#FF4544',
        ],
        PayWaylist:[{'Id':1,'name':'线上支付'},{'Id':2,'name':'货到付款'},{'Id':3,'name':'余额支付'},],
        DeliverWaylist:[{'Id':1,'name':'快速配送'},{'Id':2,'name':'到店自提'},{'Id':3,'name':'同城配送'},],
        ConsultWaylist:[{'Id':1,'name':'在线客服'},{'Id':2,'name':'联系电话'},{'Id':3,'name':'外链客服'},],
        MinIcoColorlist:[{'Id':1,'name':'白色'},{'Id':2,'name':'黑色'}],
        target_o:1,
        target_o2:1,
        target_o3:1,
        rules: {
          MallName: [
            {required: true, message: "请输入商城名称", trigger: "blur"}
          ],
          CancelTime:[
            { validator: this.isNumber, trigger: 'blur' }
          ],
          AutoReceiving:[
            { validator: this.isNumber, trigger: 'blur' }
          ],
          AfterTime:[
            { validator: this.isNumber, trigger: 'blur' }
          ]


        },
      };
    },
    methods: {
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      handleClick2(tab, event){

      },
      inputChange() { //输入框值改变
        this.msg.tipstext = this.msg.tipstext.replace(/[^\d]/g, '')
      },
      getSetup(){
          this.apipost("/api/MallBase/GetMallBaseInfo", {}, res => {
            if (res.data.resultCode == 1) {
              this.msg = res.data.data;
              // this.checkbox.PayWay= this.msg.PayWay.split(',');
              this.checkbox.PayWay= this.checkboxfor(this.msg.PayWay)
              this.checkbox.DeliverWay= this.checkboxfor(this.msg.DeliverWay);
              this.checkbox.ConsultWay= this.checkboxfor(this.msg.ConsultWay);
            } else {
              this.Info(res.data.message);
            }
          })
      },
      checkboxfor(str){
        let data = (str || "").split(',');
        let list = [];

        for(let i=0;i<data.length;i++){
          list.push(Number(data[i]))
        }
        return list
      },
      target(btn){
        this.target_o = btn
      },
      target2(btn){
        this.target_o2 = btn
      },
      target3(btn){
        this.target_o3 = btn
      },
      checkedPayWay(value){
        let PayWay= value.join(",");
        this.msg.PayWay = PayWay

      },
      checkedDeliverWay(value){
        let DeliverWay= value.join(",");
        this.msg.DeliverWay = DeliverWay
      },
      checkedConsultWay(value){
        let ConsultWay= value.join(",");
        this.msg.ConsultWay = ConsultWay

      },
      openChangeDig(data){
        this.Choiceimg = data
        this.changeState=true;
        setTimeout(()=>{
          this.$refs.mychild.InitData();
        },10)
      },
      SelectId(msg){
        this.changeState=false;
        // this.addMsg.Image=msg.id;
        if(this.Choiceimg == 1){
          this.msg.MinShareIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==2){
          this.msg.UnfoldIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==3){
          this.msg.PackUpIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==4){
          this.msg.OnlineServiceIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==5){
          this.msg.BackTopNavigationIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==6){
          this.msg.OneCallIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==7){
          this.msg.ServiceOutLinkIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==8){
          this.msg.ShortcutNavigationIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==9){
          this.msg.TurnMiniIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==10){
          this.msg.TurnIco="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==11){
          this.msg.SellOutDefaultIco=0
          this.msg.GoodsNormalPic="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }else if(this.Choiceimg ==12){
          this.msg.SellOutDefaultIco=0

          this.msg.GoodsZoomPic="http://viitto-1301420277.cos.ap-chengdu.myqcloud.com"+msg.url;
        }
      },
      preserve(){
        if (this.msg.MallName == "") {
          this.Info("请输入商城名称!")
          return
        }
        this.apipost("/api/MallBase/AddOrUpdateMallBase", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);

          } else {
            this.Info(res.data.message);
          }
        })
      },
      isNumber(rule, value, callback) {
        if (value === '') {
          return callback();
        }  //这是用来判断如果不是必须输入的，则直接跳出
        const r = /^\+?[0-9][0-9]*$/; // 正整数
        // 如果判断不符合正则，则不是正整数不能提交
        if (!r.test(value)) {
          return callback(new Error('时间必须为整数'));
        } else {
          return callback();
        }
      },
      //得到地图信息
      mapEvent(e) {
       this.msg.LongAndLat =e.lat + ',' + e.long;
       this.msg.Address =e.address;

        this.isShowMap=false;

      },
      //获取选择链接
      getChoiceLink(){
        //调用子组件方法
        var obj = this.$refs.chooseMeun.getChooseMenu();
        this.msg.TurnLink=obj.PageUrl;
        this.isShowLink = false;
      },
    },
    computed:{

    },
    mounted(){
      this.getSetup();
    }
  }
</script>

<style scoped>

</style>
