<template>
  <div class="customSet" v-loading="loading">
    <el-tabs v-model="activeName">
      <el-tab-pane label="开店申请" name="first">
        <div style="display: flex;">
          <div class="mobile">
            <div class="screen">
              <div flex="main:center cross:center" class="top-bar">
                <div>{{addMsg.DistributionApplication}}</div>
              </div>
              <div class="content">
                <div class="el-scrollbar" style="height: 100%;">
                  <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
                    <div class="el-scrollbar__view">
                      <div>
                        <div class="el-image" style="display: block; width: 100%; height: 150px;">
                          <img :src="getIconLink(addMsg.HeadBackImage)" class="el-image__inner">
                        </div>
                        <div style="background: rgb(255, 255, 255); height: 40px; padding: 0px 14px;">
                          <div flex="cross:center"
                            style="color: rgb(53, 53, 53); height: 100%; border-bottom: 1px solid rgb(226, 226, 226);">
                            <span>欢迎加入</span>
                            <span style="color: rgb(255, 69, 68);">XX商城</span>
                            <span>，请填写申请信息</span>
                          </div>
                        </div>
                        <div class="apply-form">
                          <div flex="dir:left cross:center" class="apply-form-info">
                            <div style="width: 100px;">邀请人</div>
                            <div style="color: rgb(255, 69, 68);">雪人</div>
                            <div>(请核对)</div>
                          </div>
                        </div>
                        <div class="apply-form">
                          <div flex="dir:left cross:center" class="apply-form-info">
                            <div class="apply-after" style="width: 100px;">姓名</div>
                            <div style="color: rgb(204, 204, 204);">请填写真实姓名</div>
                          </div>
                        </div>
                        <div class="apply-form">
                          <div flex="dir:left cross:center" class="apply-form-info">
                            <div class="apply-after" style="width: 100px;">手机号码</div>
                            <div style="color: rgb(204, 204, 204);">请填写手机号码</div>
                          </div>
                        </div>
                        <div class="apply-form">
                          <div flex="dir:left cross:center" class="apply-form-info" style="border-style: none;">
                            <div class="circle"></div>
                            <div style="margin-left: 10px;">我已阅读并同意</div>
                            <div style="color: rgb(71, 112, 177);">《{{addMsg.ApplicationAgreement}}》</div>
                          </div>
                        </div>
                      </div>
                      <div class="apply-btn"
                        :style="{borderRadius: addMsg.WithdrawalFilletPX+'px',backgroundColor:addMsg.WithdrawalColor , color:addMsg.WithdrawalTextColor}">
                        {{addMsg.WithdrawalText}}
                      </div>
                      <div class="el-image" style="display: block; width: 100%;">
                        <img :src="getIconLink(addMsg.BottomImage)" class="el-image__inner">
                      </div>
                    </div>
                  </div>
                  <div class="el-scrollbar__bar is-horizontal">
                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                  </div>
                  <div class="el-scrollbar__bar is-vertical">
                    <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                  </div>
                </div>
              </div>



            </div>
          </div>
          <div style="width:100%">
            <div class="title">图片</div>
            <el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="100px">
              <el-form-item label="头部图片">
                <el-button @click="openChangeDig(1)" size="mini">选择文件</el-button>
                <el-button @click="addMsg.HeadBackImage=HeadImagePath" size="mini" type="primary">恢复默认</el-button>
                <div style="position: relative;margin-top:10px;width:80px;cursor: move;">
                  <img @click="openChangeDig(1)" v-if="addMsg.HeadBackImage==''" style="width:100px;height:100px"
                    src="../../../assets/img/default.png" alt="">
                  <div v-else class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.HeadBackImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <button @click="addMsg.HeadBackImage=''" type="button"
                    class="el-button del-btn el-button--danger el-button--mini is-circle"><i
                      class="el-icon-close"></i></button>
                </div>
              </el-form-item>
              <el-form-item label="提现图标">
                <el-button @click="openChangeDig(11)" size="mini">选择文件</el-button>
                <div style="position: relative;margin-top:10px;width:80px;cursor: move;">
                  <img @click="openChangeDig(11)" v-if="addMsg.WithdrawalImage==''" style="width:100px;height:100px"
                       src="../../../assets/img/default.png" alt="">
                  <div v-else class="app-image"
                       :style="{backgroundImage:'url(' + getIconLink(addMsg.WithdrawalImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <button @click="addMsg.WithdrawalImage=''" type="button"
                          class="el-button del-btn el-button--danger el-button--mini is-circle"><i
                    class="el-icon-close"></i></button>
                </div>
              </el-form-item>

            </el-form>
            <div class="hr"></div>

            <div class="hr"></div>
            <div class="title">按钮</div>
            <el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="100px">
              <el-form-item label="按钮圆角">
                <el-slider style="width:70%;display:inline-block" v-model="addMsg.WithdrawalFilletPX" show-input>
                </el-slider>
                <span style="position:relative;top:-16px;margin-left:5px">px</span>
              </el-form-item>
              <el-form-item label="按钮文本">
                <el-input v-model="addMsg.WithdrawalText" style="width:40%" size="small" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item class="flexForm" style="margin-right:100px" label="填充颜色">
                <el-color-picker size="small" v-model="addMsg.WithdrawalColor"></el-color-picker>
                <el-input v-model="addMsg.WithdrawalColor" style="width:105px" size="small" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item class="flexForm" label="文本颜色">
                <el-color-picker size="small" v-model="addMsg.WithdrawalTextColor"></el-color-picker>
                <el-input v-model="addMsg.WithdrawalTextColor" style="width:105px" size="small" placeholder="请输入">
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="微店中心" name="second">
        <div style="display: flex;">
          <div class="mobile">
            <div class="screen">
              <div flex="main:center cross:center" class="top-bar">
                <div>微店中心</div>
              </div>
              <div class="content">
                <div>
                  <div class="content-block head-block">
                    <div flex="dir:left cross:center"
                      style="padding-bottom: 10px; border-bottom: 1px solid rgb(255, 255, 255);">
                      <div>
                        <div class="app-image"
                          style="width: 60px; height: 60px; border-radius: 999px; display: inline-block; border: 2px solid rgb(255, 255, 255);">
                        </div>
                      </div>
                      <div style="margin-left: 20px; color: rgb(255, 255, 255);">
                        <div>用户昵称</div>
                        <div style="margin-top: 10px;">{{addMsg.ReferrerName}}：用户昵称</div>
                      </div>
                    </div>
                    <div flex="dir:left cross:center"
                      style="margin-top: 10px; color: rgb(255, 255, 255); justify-content: space-between;">
                      <div>
                        <div>{{addMsg.WithdrawableName}}</div>
                        <div>10元</div>
                      </div>
                      <div
                        style="border-radius: 28px; height: 28px; padding: 0px 10px; border: 1px solid rgb(255, 255, 255); line-height: 28px; text-align: center;">
                        {{addMsg.WithdrawDepositName}}
                      </div>
                    </div>
                  </div>
                  <div flex="dir:left box:mean cross:center"
                    style="background-color: rgb(255, 255, 255); margin-bottom: 8px; height: 80px;">
                    <div class="text-center" style="border-right: 1px solid rgb(226, 226, 226);">
                      <div style="color: rgb(34, 175, 25);">{{addMsg.CommissionWithdrawnName}}</div>
                      <div>1000元</div>
                    </div>
                    <div class="text-center">
                      <div style="color: rgb(255, 143, 18);">{{addMsg.OutstandingCommissionName}}</div>
                      <div>1000元</div>
                    </div>
                  </div>
                </div>
                <div class="content-block menu-block">
                  <div flex="dir:left cross:center" style="flex-wrap: wrap;">
                    <div flex="dir:top cross:center main:center" class="text-center"
                      style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
                      <img :src="getIconLink(addMsg.SmallShopOrderImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.SmallShopOrderName}}
                      </div>
                    </div>
                    <div flex="dir:top cross:center main:center" class="text-center"
                      style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
                      <img :src="getIconLink(addMsg.WithdrawalDetailImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.WithdrawalDetailName}}
                      </div>
                    </div>
                    <div flex="dir:top cross:center main:center" class="text-center"
                      style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
                      <img :src="getIconLink(addMsg.MyCustomerImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.MyCustomerName}}
                      </div>
                    </div>
                    <div flex="dir:top cross:center main:center" class="text-center"
                      style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
                      <img :src="getIconLink(addMsg.SmallShopQRCodeImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.SmallShopQRCodeName}}
                      </div>
                    </div>
                    <div flex="dir:top cross:center main:center" class="text-center"
                      style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
                      <img :src="getIconLink(addMsg.SmallShopSetUpImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.SmallShopSetUpName}}
                      </div>
                    </div>
                     <div flex="dir:top cross:center main:center" class="text-center"
                      style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
                      <img :src="getIconLink(addMsg.LiveImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.LiveName}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="width:100%">
            <div class="title">栏目</div>
            <div class="form-body el-row fxzx">
              <div flex="dir-left" style="border-radius: 3px; width: 70%; margin-left: 2.5%;">
                <span @click="openIcon(3,addMsg.SmallShopOrderName,addMsg.SmallShopOrderImage)"
                  flex="dir:top main:center cross:center"
                  style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
                  <div class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.SmallShopOrderImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.SmallShopOrderName}}</div>
                </span>
                <span @click="openIcon(4,addMsg.WithdrawalDetailName,addMsg.WithdrawalDetailImage)"
                  flex="dir:top main:center cross:center"
                  style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
                  <div class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.WithdrawalDetailImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.WithdrawalDetailName}}</div>
                </span>
                <span @click="openIcon(5,addMsg.MyCustomerName,addMsg.MyCustomerImage)"
                  flex="dir:top main:center cross:center"
                  style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
                  <div class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.MyCustomerImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;"> {{addMsg.MyCustomerName}}</div>
                </span>
                <span @click="openIcon(6,addMsg.SmallShopQRCodeName,addMsg.SmallShopQRCodeImage)" flex="dir:top main:center cross:center"
                  style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
                  <div class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.SmallShopQRCodeImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.SmallShopQRCodeName}}</div>
                </span>
                <span @click="openIcon(7,addMsg.SmallShopSetUpName,addMsg.SmallShopSetUpImage)"
                  flex="dir:top main:center cross:center"
                  style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
                  <div class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.SmallShopSetUpImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.SmallShopSetUpName}}</div>
                </span>
                 <span @click="openIcon(8,addMsg.LiveName,addMsg.LiveImage)"
                  flex="dir:top main:center cross:center"
                  style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
                  <div class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.LiveImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.LiveName}}</div>
                </span>
              </div>
            </div>


            <div class="title">文字</div>
            <el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="50px">

              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">可提现佣金</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.WithdrawableName" style="width:40%" size="small"
                    placeholder="请输入内容"></el-input>
                </div>
              </el-form-item>
              <!-- <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">提现</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.WithdrawDepositName" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item> -->
              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">已提现佣金</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.CommissionWithdrawnName" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">未结算佣金</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.OutstandingCommissionName" style="width:40%" size="small"
                    placeholder="请输入内容"></el-input>
                </div>
              </el-form-item>


            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="开店佣金" name="third">
        <div style="display:flex">
          <div class="mobile">
            <div class="screen">
              <div flex="main:center cross:center" class="top-bar">
                <div>微店佣金</div>
              </div>
              <div class="content" style="font-size: 13pt;">
                <div class="content-block head-block" style="padding: 0px 12px; height: 73px;">
                  <div flex="dir:left box:left cross:center"
                    style="height: 100%; color: rgb(255, 255, 255); justify-content: space-between;">
                    <div>
                      <div>微店佣金</div>
                      <div style="padding-top: 10px;">3500元</div>
                    </div>
                    <div
                      style="border-radius: 28px; border: 1px solid rgb(255, 255, 255); height: 28px; width: 84px; line-height: 28px; text-align: center;">
                      提现明细
                    </div>
                  </div>
                </div>
                <div flex="dir:left cross:center"
                  style="margin: 10px 0px; padding: 0px 12px; height: 48px; background: rgb(255, 255, 255);">
                  <div>可提现佣金</div>
                  <div style="margin-left: auto;">0元</div>
                </div>
                <div flex="dir:left cross:center"
                  style="margin-bottom: 2px; padding: 0px 12px; height: 48px; background: rgb(255, 255, 255);">
                  <div>已提现佣金</div>
                  <div style="margin-left: auto;">0元</div>
                </div>
                <div flex="dir:left cross:center"
                  style="padding: 0px 12px; height: 48px; background: rgb(255, 255, 255);">
                  <div>{{addMsg.CommissionTobePaidName}}</div>
                  <div style="margin-left: auto;">0元</div>
                </div>
                <div flex="dir:left cross:center"
                  style="margin: 10px 0px; padding: 0px 12px; height: 48px; background: rgb(255, 255, 255);">
                  <div>{{addMsg.UserNotesName}}</div>
                  <div class="app-image" style="background-size: cover; background-position: center center; width: 8px; height: 13px; border-radius: 0%; margin-left: auto;"
                    :style="{backgroundImage: 'url('+getIconLink('/Static/customize_jp.png')+')'}" >
                  </div>
                </div>
                <div flex="main:center" style="margin: 20px auto; color: rgb(255, 255, 255);">
                  <div flex="main:center"
                    style="background-color: rgb(255, 69, 68); width: 351px; border-radius: 40px; height: 40px; line-height: 40px;">
                    {{addMsg.IWantToWithdrawName}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="width:100%">
            <div class="title">文字</div>
            <el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="50px">
              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">待打款佣金</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.CommissionTobePaidName" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">用户须知</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                       alt="">
                  <el-input v-model="addMsg.UserNotes" style="width:40%" size="small"
                            placeholder="请输入内容"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">用户须知描述</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.UserNotesName" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">我要提现</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.IWantToWithdrawName" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="申请提现" name="fourth">
        <div style="display:flex">
          <div class="mobile">
            <div class="screen">
              <div flex="main:center cross:center" class="top-bar">
                <div>申请提现</div>
              </div>
              <div class="content" style="font-size: 13pt;">
                <div>
                  <div flex="dir:top main:center"
                    style="border-top: 1px solid rgb(226, 226, 226); color: rgb(53, 53, 53); padding: 0px 8px; height: 80px; background: rgb(255, 255, 255);">
                    <div style="font-size: 15pt; margin-bottom: 8px;">账户剩余金额：￥13</div>
                    <div flex="dir:left cross:center" style="color: rgb(153, 153, 153);">
                      <div>今日剩余提现金额: ￥1000</div>
                      <div
                        style="font-size: 11pt; border-radius: 17px; padding: 1px 5px; border: 1px solid rgb(153, 153, 153); margin-left: 8px;">
                        规则
                      </div>
                    </div>
                  </div>
                  <div flex="dir:left cross:center"
                    style="background: rgb(255, 255, 255); color: rgb(102, 102, 102); height: 80px; padding: 0px 12px; font-size: 13pt; border-top: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226);">
                    <div style="color: rgb(255, 69, 68); font-size: 30pt;">￥</div>
                    <div style="padding-left: 20px; color: rgb(205, 205, 205); font-size: 19pt;">
                      请输入{{addMsg.WithdrawalAmountName}}
                    </div>
                  </div>
                  <div flex="dir:top main:center"
                    style="padding: 10px 12px; color: rgb(102, 102, 102); font-size: 12pt;">
                    <div>说明： {{addMsg.WithdrawalAmountName}}必须不能大于￥80</div>
                  </div>
                  <div style="background: rgb(255, 255, 255); padding: 16px 12px;">
                    {{addMsg.WithdrawalWayName}}
                  </div>
                  <div flex="dir:left cross:center"
                    style="margin-bottom: 10px; padding-left: 8px; padding-bottom: 10px; background: rgb(255, 255, 255);">
                    <div flex="dir:left cross:center"
                      style="margin-left: 10px; padding: 0px 16px; height: 34px; border: 1px solid rgb(255, 69, 68); border-radius: 19px;">
                      <img src="../../../assets/img/userman/wx.png" style="width:20px;height:20px" alt="">
                      <div>微信</div>
                    </div>
                    <div flex="dir:left cross:center"
                      style="margin-left: 10px; padding: 0px 16px; height: 34px; border: 1px solid rgb(226, 226, 226); border-radius: 19px;">
                      <img src="../../../assets/img/userman/icon-share-ant.png" style="width:20px;height:20px" alt="">
                      <div>支付宝</div>
                    </div>
                  </div>
                  <div flex="dir:left cross:center"
                    style="background: rgb(255, 255, 255); height: 44px; padding: 0px 12px;">
                    <div style="min-width: 84px;">微信号</div>
                    <div style="color: rgb(205, 205, 205);">请填写正确的微信号</div>
                  </div>
                  <div flex="dir:left cross:center"
                    style="background: rgb(255, 255, 255); height: 44px; padding: 0px 12px;">
                    <div style="min-width: 84px;">账号</div>
                    <div style="color: rgb(205, 205, 205);">请输入正确的账号</div>
                  </div>
                  <div flex="main:center" style="margin: 20px auto; color: rgb(255, 255, 255);">
                    <div flex="main:center"
                      style="background-color: rgb(255, 69, 68); width: 351px; border-radius: 40px; height: 40px; line-height: 40px;">
                      提交申请
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="width:100%">
            <div class="title">文字</div>
            <el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="50px">
              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">提现金额</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.WithdrawalAmountName" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div flex="dir:left cross:center" class="share-text">
                  <div class="default">提现方式</div>
                  <img style="width:12px;height:12px;margin-right:8px" src="../../../assets/img/userman/customize_jp.png"
                    alt="">
                  <el-input v-model="addMsg.WithdrawalWayName" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>

        </div>
      </el-tab-pane>

      <div style="padding-left:410px;padding-top:20px">
        <el-button @click="saveVipMsg('vipMsg')" size="small" type="primary" :disabled="loadingbut" v-if="activeName == 'sixth' ">保存</el-button>
        <el-button @click="save" size="small" type="primary" v-if="activeName != 'sixth' ">保存</el-button>
      </div>
    </el-tabs>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
    </el-dialog>
    <!-- 栏目编辑 -->
    <el-dialog title="栏目编辑" :visible.sync="iconDig" width="400px">
      <el-form :model="iconMsg" :rules="iconMsg" ref="iconMsg" label-width="100px">
        <el-form-item label="名称" prop="Name">
          <el-input style="width:234px" size="small" v-model="iconMsg.Name">
          </el-input>
        </el-form-item>
        <el-form-item label="图标" prop="Password2">
          <el-button @click="openChangeDig(imgType)" size="small">选择文件</el-button>
          <el-button @click="getIconMsg(iconMsg)" size="small">恢复默认</el-button>
          <div>
            <img style="width:80px;height:80px" :src="getIconLink(iconMsg.Path)" alt="">
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="iconDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="SelectIcon">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    name: "customSet",
    components: {
      ChooseImg
    },
    data() {
      return {
        activeName: 'first',
        addMsg: {},
        commonIndex: -1,
        HeadImagePath: this.domainManager().ImageUrl + '/Upload/Goods/1597306803000_429.png',
        //微店佣金默认
        fenxiaoMoren: this.domainManager().ImageUrl + '/Upload/Set/1587968503000.png',
        //微店订单默认
        fenxiaoOrder: this.domainManager().ImageUrl + '/Upload/Set/1587968517000.png',
        //提现明细默认
        tixianMoren: this.domainManager().ImageUrl + '/Upload/Set/1587968599000.png',
        //我的团队默认
        myTeamMoren: this.domainManager().ImageUrl + '/Upload/Set/1587968613000.png',
        //推广二维码默认
        tuiguangCode: this.domainManager().ImageUrl + '/Upload/Set/1587968626000.png',
        //vip购买默认背景
        vipbackground: this.domainManager().ImageUrl + '/Upload/Set/vipbg.png',

        imgType: 1,
        changeState: false,
        iconDig: false,
        iconMsg: {
          Name: '',
          Path: '',
        },

        viprule: {
          BottomRule: [{
            required: true,
            message: '请输入活动规则',
            trigger: 'blur'
          }]
        },
        //防止重复提交
        loadingbut:false
      }
    },
    created() {
      this.getData();
    },
    mounted() {},
    methods: {

      saveVipMsg(formName){
         this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveVip();
          } else {
            return false;
          }
        });
      },

      openIcon(index, name, path) {
        this.commonIndex = index;
        this.imgType = index;
        this.iconDig = true;
        this.iconMsg = {
          Name: name,
          Path: path,
        }
      },
      //点击栏目下栏目编辑恢复默认
      getIconMsg(iconMsg) {
        switch (this.commonIndex) {
          case 3:
            this.addMsg.SmallShopOrderImage = this.fenxiaoMoren;
            iconMsg.Path = this.fenxiaoMoren;
            this.addMsg.SmallShopOrderName = '微店佣金';
            iconMsg.Name = '微店佣金';
            break;
          case 4:
            this.addMsg.WithdrawalDetailImage = this.fenxiaoOrder;
            iconMsg.Path = this.fenxiaoOrder;
            this.addMsg.WithdrawalDetailName = '微店佣金';
            iconMsg.Name = '微店佣金';
            break;
          case 5:
            this.addMsg.MyCustomerImage = this.tixianMoren;
            iconMsg.Path = this.tixianMoren;
            this.addMsg.MyCustomerName = '提现明细';
            iconMsg.Name = '提现明细';
            break;
          case 6:
            this.addMsg.SmallShopQRCodeImage = this.myTeamMoren;
            iconMsg.Path = this.myTeamMoren;
            this.addMsg.SmallShopQRCodeName = '我的团队';
            iconMsg.Name = '我的团队';
            break;
          case 7:
            this.addMsg.SmallShopSetUpImage = this.tuiguangCode;
            iconMsg.Path = this.tuiguangCode;
            this.addMsg.SmallShopSetUpName = '推广二维码';
            iconMsg.Name = '推广二维码';
            break;
             case 7:
            this.addMsg.LiveImage = this.tuiguangCode;
            iconMsg.Path = this.tuiguangCode;
            this.addMsg.LiveName = '直播管理';
            iconMsg.Name = '直播管理';
            break;
        }
      },
      save() {
        this.apipost("/api/SmallShops/SetDistributorCustomInfo", this.addMsg, res => {
          this.loading = false;
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
            this.getData();
          } else {
            this.Error(res.data.message);
          }
        })
      },
      SelectIcon() {
        if (this.imgType == 3) {
          this.addMsg.SmallShopOrderName = this.iconMsg.Name;
        } else if (this.imgType == 4) {
          this.addMsg.WithdrawalDetailName = this.iconMsg.Name;
        } else if (this.imgType == 5) {
          this.addMsg.MyCustomerName = this.iconMsg.Name;
        } else if (this.imgType == 6) {
          this.addMsg.SmallShopQRCodeName = this.iconMsg.Name;
        } else if (this.imgType == 7) {
          this.addMsg.SmallShopSetUpName = this.iconMsg.Name;
        } else if (this.imgType == 8) {
          this.addMsg.LiveName = this.iconMsg.Name;
        }
        this.iconDig = false;
      },
      SelectId(msg) {
        if (this.imgType == 1) {
          this.addMsg.HeadBackImage = this.getIconLink(msg.url);
        } else if (this.imgType == 2) {
          this.addMsg.BottomImage = this.getIconLink(msg.url);
        } else if (this.imgType == 3) {
          this.addMsg.SmallShopOrderImage = this.getIconLink(msg.url);

        } else if (this.imgType == 4) {
          this.addMsg.WithdrawalDetailImage = this.getIconLink(msg.url);
        } else if (this.imgType == 5) {
          this.addMsg.MyCustomerImage = this.getIconLink(msg.url);
        } else if (this.imgType == 6) {
          this.addMsg.SmallShopQRCodeImage = this.getIconLink(msg.url);
        } else if (this.imgType == 7) {
          this.addMsg.SmallShopSetUpImage = this.getIconLink(msg.url);
        }else if (this.imgType == 8) {
          this.addMsg.LiveImage = this.getIconLink(msg.url);
        }else if(this.imgType == 10){
          this.addMsg.VipBuyICO = this.getIconLink(this.getIconLink(msg.url)) ;
        }else if(this.imgType == 11){
          this.addMsg.WithdrawalImage = this.getIconLink(this.getIconLink(msg.url)) ;
        }
        if (this.imgType > 2) {
          this.iconMsg.Path = this.getIconLink(msg.url);
        }
        this.changeState = false;

      },
      openChangeDig(index) {
        this.imgType = index;
        this.changeState = true;
      },
      getData() {
        this.loading = true;
        this.apipost("/api/SmallShops/GetDistributorCustomInfo", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
          }

        })
      },
      UploadImage(file) {
        this.UploadFileToTencent(this.FileType().SetImg, file.file, res => {
          if (res.resultCode == 1) {}
        })
      },
    },
  };

</script>

<style>
  .customSet .fxzx .app-image {
    background-position: center center;
    width: 50px !important;
    height: 50px !important;
    border-radius: 0%;
  }

  .customSet .form-body {
    padding: 20px 0;
    background-color: #fff;
    margin-bottom: 20px;
  }

  .customSet .content-block.menu-block {
    background-color: #fff;
  }

  .customSet .text-center {
    text-align: center;
  }

  .customSet .content-block.head-block {
    padding: 10px 12px;
    background-color: #ff4544;
  }

  .customSet .flexForm .el-form-item__label {
    position: relative;
    top: -5px;
  }

  .customSet .flexForm .el-input {
    position: relative;
    top: -12px;
  }

  .customSet .flexForm {
    display: inline-block;
  }

  .customSet .share-text .default {
    width: 10%;
    min-width: 100px;
  }
  .hr {
    width: 100%;
    height: 20px;
    background: #f3f3f3;
  }

  .customSet .del-btn {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px !important;
  }

  .customSet .app-image {
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .customSet .title {
    padding: 18px 20px;
    border-bottom: 1px solid #F3F3F3;
    background-color: #fff;
  }

  .customSet .apply-btn {
    height: 40px;
    line-height: 40px;
    margin: 12px;
    text-align: center;
  }

  .customSet .circle {
    height: 13px;
    width: 13px;
    border-radius: 50%;
    border: 1px solid #e2e2e2;
  }

  .customSet .apply-form-info {
    color: #353535;
    height: 100%;
    border-bottom: 1px solid #e2e2e2;
  }

  .customSet .apply-form {
    background: #FFFFFF;
    height: 44px;
    padding: 0 14px;
  }

  .customSet .el-image__error,
  .customSet .el-image__inner,
  .customSet .el-image__placeholder {
    width: 100%;
    height: 100%;
  }

  .customSet .el-image__inner {
    vertical-align: top;
  }

  .customSet .el-image {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }

  .customSet .screen .content {
    position: absolute;
    top: 60px;
    bottom: 0;
    width: 100%;
  }

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

  .customSet .top-bar {
    width: 375px;
    height: 64px;
    position: relative;
    background: url('../../../assets/img/userman/head.png') center no-repeat;
  }

  .customSet .screen {
    border: 2px solid #F3F5F6;
    height: 670px;
    width: 379px;
    margin: 0 auto;
    position: relative;
    background-color: #F7F7F7;
  }

  .customSet .mobile {
    width: 404px;
    height: 736px;
    border-radius: 30px;
    background-color: #fff;
    padding: 33px 12px;
    margin-right: 10px;
  }

  .customSet .el-tabs__nav-scroll {
    background: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    height: 56px;
    line-height: 56px;

  }

  .customSet .vipImgDiv{
    width:100%;
    height:100%;
    position: relative;
  }
  .customSet .vip_kaitong{
    position: absolute;
    width:90%;
    bottom:50px;
    height:150px;
    border-radius:4px;
    left:50%;
    margin-left:-45%;
    /* background-color: #cf65cd; */
  }
  .customSet .vip_yue{
    width:70%;
    margin:20px auto 10px;
    vertical-align: top;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    color:#fff;
  }

  .customSet .vip_Month{
    font-size:30px;
    color:#fff;
  }
  .customSet .vip_yellow{
    color:#fff100;
    font-size:30px;
    font-weight: bold;
  }
  .customSet .my_VipBtn{
    width:85%;
    height:40px;
    border:none;
    background-color: #FFF100;
    color:#510A63;
    border-radius: 20px;
    margin-left:26px;
  }
  .customSet .vip_activeRule{
    width:100%;
    position: absolute;
    bottom:15px;
    text-align: center;
    color:#DD6ADA;
  }
  .customSet .userCommonimg {
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }
    .customSet .userCommonimg img {
    width: 100%;
    height: 100%;
  }
</style>
