<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 == 1" src="../../assets/img/setup/plugins-out.png" alt=""
                    style="background: black">
                  <img v-if="msg.SellOutDefaultIco == 0 && msg.GoodsNormalPic" :src='msg.GoodsNormalPic' alt="">
                  <img v-if="msg.SellOutDefaultIco==0 && (msg.GoodsNormalPic==null||msg.GoodsNormalPic=='')"
                    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 == 1" src="../../assets/img/setup/plugins-out.png" alt=""
                    style="background: black">
                  <img v-if="msg.SellOutDefaultIco == 0 && msg.GoodsZoomPic" :src='msg.GoodsZoomPic' alt="">
                  <img v-if="msg.SellOutDefaultIco==0 && (msg.GoodsZoomPic==null||msg.GoodsZoomPic=='')"
                    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">
      <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="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 chooseMenu from "../common/chooseMenu.vue";
  import commonMap from "../common/commonMap.vue";

  export default {
    name: "basicSetUp",
    components: {
      ChooseImg,
      chooseMenu,
      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) {

      },
      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.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 = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 2) {
          this.msg.UnfoldIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 3) {
          this.msg.PackUpIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 4) {
          this.msg.OnlineServiceIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 5) {
          this.msg.BackTopNavigationIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 6) {
          this.msg.OneCallIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 7) {
          this.msg.ServiceOutLinkIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 8) {
          this.msg.ShortcutNavigationIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 9) {
          this.msg.TurnMiniIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 10) {
          this.msg.TurnIco = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 11) {
          this.msg.SellOutDefaultIco = 0
          this.msg.GoodsNormalPic = this.getIconLink(msg.url);
        } else if (this.Choiceimg == 12) {
          this.msg.SellOutDefaultIco = 0
          this.msg.GoodsZoomPic = this.getIconLink(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);
            this.getSetup();
          } 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.chooseMenu.getChooseMenu();
        this.msg.TurnLink = obj.PageUrl;
        this.isShowLink = false;
      },
    },
    computed: {

    },
    mounted() {
      this.getSetup();
    }
  }

</script>

<style scoped>

</style>
