<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.HeadImage)" 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.ButtonFilletPX+'px',backgroundColor:addMsg.ButtonColor , color:addMsg.ButtonTextColor}">
                        {{addMsg.ButtonText}}
                      </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.HeadImage=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.HeadImage==''" style="width:100px;height:100px"
                    src="../../assets/img/default.png" alt="">
                  <div v-else class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.HeadImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <button @click="addMsg.HeadImage=''" 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(2)" size="mini">选择文件</el-button>
                <el-button @click="addMsg.BottomImage=BottomImagePath" size="mini" type="primary">恢复默认</el-button>
                <div style="position: relative;margin-top:10px;width:80px;cursor: move;">
                  <img @click="openChangeDig(2)" v-if="addMsg.BottomImage==''" style="width:100px;height:100px"
                    src="../../assets/img/default.png" alt="">
                  <div v-else class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(addMsg.BottomImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <button @click="addMsg.BottomImage=''" 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="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.DistributionApplication" 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.ApplicationAgreement" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item>

            </el-form>
            <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.ButtonFilletPX" 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.ButtonText" 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.ButtonColor"></el-color-picker>
                <el-input v-model="addMsg.ButtonColor" 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.ButtonTextColor"></el-color-picker>
                <el-input v-model="addMsg.ButtonTextColor" 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.CommissionForWithdrawalName}}</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.DistributionCommissionImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.DistributionCommissionName}}
                      </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.DistributionOrderImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.DistributionOrderName}}
                      </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.WithdrawDetialsImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.WithdrawDetialsName}}
                      </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.MyTeamImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.MyTeamName}}
                      </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.PromoteQRCodeImage)" style="width: 35px; height: 35px;">
                      <div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
                        {{addMsg.PromoteQRCodeName}}
                      </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.DistributionCommissionName,addMsg.DistributionCommissionImage)"
                  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.DistributionCommissionImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.DistributionCommissionName}}</div>
                </span>
                <span @click="openIcon(4,addMsg.DistributionOrderName,addMsg.DistributionOrderImage)"
                  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.DistributionOrderImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.DistributionOrderName}}</div>
                </span>
                <span @click="openIcon(5,addMsg.WithdrawDetialsName,addMsg.WithdrawDetialsImage)"
                  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.WithdrawDetialsImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;"> {{addMsg.WithdrawDetialsName}}</div>
                </span>
                <span @click="openIcon(6,addMsg.MyTeamName,addMsg.MyTeamImage)" 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.MyTeamImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.MyTeamName}}</div>
                </span>
                <span @click="openIcon(7,addMsg.PromoteQRCodeName,addMsg.PromoteQRCodeImage)"
                  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.PromoteQRCodeImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <div style="margin-top: 8px;">{{addMsg.PromoteQRCodeName}}</div>
                </span>
              </div>
            </div>
            <div class="title">会员购买</div>
            <div class="form-body el-row fxzx">
               <el-form label-width="160px" style="padding:20px;">

                <el-form-item label="会员购买显示状态" size="small">
                  <el-switch v-model="addMsg.IsShowVIPBuyPic" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="会员购买图片" size="small">
                  <div>
                      <el-button size="mini" @click="openChangeDig(10)">选择文件</el-button>
                  </div>
                  <div class="userCommonimg">
                    <img v-if="addMsg.VipBuyICO" :src="getIconLink(addMsg.VipBuyICO)" alt="" />
                    <img v-else src="../../assets/img/default.png" alt="" />
                  </div>
                </el-form-item>
                <el-form-item label="会员购买链接" size="small">
                  <el-input v-model="addMsg.VipBuyUrl" style="width:40%" size="small" placeholder="请输入内容"></el-input>
                </el-form-item>
                 <el-form-item label="开启离线收益提醒" size="small">
                   <el-switch v-model="addMsg.OpenOfflineEarnings" :active-value="1" :inactive-value="0"></el-switch>
                 </el-form-item>
              </el-form>
            </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.ReferrerName" 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.CommissionForWithdrawalName" 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-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.DistributorName" 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.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>
      <el-tab-pane label="分销商" name="five">
        <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 flex="dir:left box:mean cross:center"
                  style="height: 50px; border: 1px solid rgb(226, 226, 226); background: rgb(255, 255, 255);">
                  <div flex="main:center">
                    <div flex="cross:center"
                      style="height: 50px; border-bottom: 1px solid rgb(255, 69, 68); color: rgb(255, 69, 68);">
                      {{addMsg.OneDistributionName}}(0)
                    </div>
                  </div>
                  <div flex="main:center">
                    <div>{{addMsg.TwoDistributionName}}(10)</div>
                  </div>
                  <div flex="main:center">
                    <div>{{addMsg.ThreeDistributionName}}(0)</div>
                  </div>
                </div>
                <div flex="dir:top" style="margin-bottom: 10px;">
                  <div flex="dir:left cross:center"
                    style="background: rgb(255, 255, 255); padding: 10px; height: 80px;">
                    <div class="app-image"
                      style="background-size: cover; background-position: center center; width: 50px; height: 50px; border-radius: 0%;">
                    </div>
                    <div flex="dir:top main:center" style="width: 100%; margin-left: 12px;">
                      <div flex="dir:left cross:center">
                        <div style="font-size: 13pt;">张三</div>
                        <div style="margin-left: auto;">推广20人</div>
                      </div>
                      <div style="color: rgb(102, 102, 102); padding-top: 8px;">注册时间：2012-01-12</div>
                    </div>
                  </div>
                  <div flex="dir:left cross:center"
                    style="color: rgb(102, 102, 102); background: rgb(255, 255, 255); border-top: 1px solid rgb(226, 226, 226); padding: 0px 12px; height: 40px;">
                    <div>消费200.00元</div>
                    <div style="margin-left: auto;">2个订单</div>
                  </div>
                </div>
                <div flex="dir:top" style="margin-bottom: 10px;">
                  <div flex="dir:left cross:center"
                    style="background: rgb(255, 255, 255); padding: 10px; height: 80px;">
                    <div class="app-image"
                      style="background-image: url(ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3740798461); background-size: cover; background-position: center center; width: 50px; height: 50px; border-radius: 0%;">
                    </div>
                    <div flex="dir:top main:center" style="width: 100%; margin-left: 12px;">
                      <div flex="dir:left cross:center">
                        <div style="font-size: 13pt;">张三</div>
                        <div style="margin-left: auto;">推广20人</div>
                      </div>
                      <div style="color: rgb(102, 102, 102); padding-top: 8px;">注册时间：2012-01-12</div>
                    </div>
                  </div>
                  <div flex="dir:left cross:center"
                    style="color: rgb(102, 102, 102); background: rgb(255, 255, 255); border-top: 1px solid rgb(226, 226, 226); padding: 0px 12px; height: 40px;">
                    <div>消费200.00元</div>
                    <div style="margin-left: auto;">2个订单</div>
                  </div>
                </div>
                <div flex="dir:left main:center cross:center" style="margin: 16px 0px; color: rgb(153, 153, 153);">
                  <div flex="cross:center">
                    <div style="height: 1px; width: 84px; background: rgb(153, 153, 153);"></div>
                    <div style="margin: 0px 10px;">没有更多了</div>
                    <div style="height: 1px; width: 84px; background: rgb(153, 153, 153);"></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.OneDistributionName" 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.TwoDistributionName" 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.ThreeDistributionName" style="width:40%" size="small" placeholder="请输入内容">
                  </el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="vip购买" name="sixth">
        <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 class="vipImgDiv" :style="{backgroundImage:'url(' + getIconLink(vipMsg.BackImage) + ')'}">
                  <div class="vip_kaitong" :style="{backgroundColor:vipMsg.BackColor}">
                     <div class="vip_yue">
                       <div class="vipIcon">
                         <img :src="getIconLink(vipMsg.VipICO)" alt=""/>
                       </div>
                       <div>
                          <div class="vip_Month">×个月<span class="vip_yellow">×</span>元</div>
                       </div>
                     </div>
                     <input type="button" class="my_VipBtn" value="立即开通"/>
                  </div>
                  <div class="vip_activeRule">活动规则>></div>
                </div>
              </div>
            </div>
          </div>
          <div style="width:100%">
            <div class="title">图片</div>
            <el-form style="padding:20px 0;background:#fff" :model="vipMsg" ref="vipMsg" :rules="viprule" label-width="100px">
              <el-form-item label="背景图片">
                <el-button @click="openChangeDig(8)" size="mini">选择文件</el-button>
                <el-button @click="vipMsg.BackImage=vipbackground" size="mini" type="primary">恢复默认</el-button>
                <div style="position: relative;margin-top:10px;width:80px;cursor: move;">
                  <img @click="openChangeDig(8)" v-if="vipMsg.BackImage==''" style="width:100px;height:100px"
                    src="../../assets/img/default.png" alt="">
                  <div v-else class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(vipMsg.BackImage) + ')',backgroundSize:'cover'}">
                  </div>
                  <button @click="vipMsg.BackImage=''" 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="vip图标">
                <el-button @click="openChangeDig(9)" size="mini">选择文件</el-button>
                <el-button @click="vipMsg.VipICO=vipIcon" size="mini" type="primary">恢复默认</el-button>
                <div style="position: relative;margin-top:10px;width:80px;cursor: move;">
                  <img @click="openChangeDig(9)" v-if="vipMsg.VipICO==''" style="width:100px;height:100px"
                    src="../../assets/img/default.png" alt="">
                  <div v-else class="app-image"
                    :style="{backgroundImage:'url(' + getIconLink(vipMsg.VipICO) + ')',backgroundSize:'cover'}">
                  </div>
                  <button @click="vipMsg.VipICO=''" 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-color-picker v-model="vipMsg.BackColor"></el-color-picker>
              </el-form-item>
              <el-form-item label="活动规则" prop="BottomRule">
                  <el-input type="textarea" :rows="4" style="width:60%" v-model="vipMsg.BottomRule"></el-input>
              </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/Set/1587968479000.png',
        BottomImagePath: this.domainManager().ImageUrl + '/Upload/Set/1587968716000.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',
        //vip购买默认图标
        vipIcon: this.domainManager().ImageUrl + '/Upload/Set/vipicon.png',
        imgType: 1,
        changeState: false,
        iconDig: false,
        iconMsg: {
          Name: '',
          Path: '',
        },
        //vip购买msg
        vipMsg:{
          Id:0,
          BackImage:'', //背景图片
          VipICO:'', //vip图标
          BackColor:'', //背景颜色
          BottomRule:'' //活动规则
        },
        viprule: {
          BottomRule: [{
            required: true,
            message: '请输入活动规则',
            trigger: 'blur'
          }]
        },
        //防止重复提交
        loadingbut:false
      }
    },
    created() {
      this.getData();
      this.getVipInfo();
    },
    mounted() {},
    methods: {
      getVipInfo(){
        this.apipost("/api/UserVip/GetFXGradeCustom", {}, res => {
          if (res.data.resultCode == 1) {
            this.vipMsg=res.data.data;
          }
        })
      },
      saveVipMsg(formName){
         this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveVip();
          } else {
            return false;
          }
        });
      },
      //保存vip购买
      saveVip(){
        this.loadingbut=true;
        this.apipost("/api/UserVip/SetFXGradeCustom", this.vipMsg, res => {
          this.loadingbut=false;
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
          }else{
            this.Error(res.data.message);
          }
        })
      },
      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.DistributionCommissionImage = this.fenxiaoMoren;
            iconMsg.Path = this.fenxiaoMoren;
            this.addMsg.DistributionCommissionName = '分销佣金';
            iconMsg.Name = '分销佣金';
            break;
          case 4:
            this.addMsg.DistributionOrderImage = this.fenxiaoOrder;
            iconMsg.Path = this.fenxiaoOrder;
            this.addMsg.DistributionOrderName = '分销佣金';
            iconMsg.Name = '分销佣金';
            break;
          case 5:
            this.addMsg.WithdrawDetialsImage = this.tixianMoren;
            iconMsg.Path = this.tixianMoren;
            this.addMsg.WithdrawDetialsName = '提现明细';
            iconMsg.Name = '提现明细';
            break;
          case 6:
            this.addMsg.MyTeamImage = this.myTeamMoren;
            iconMsg.Path = this.myTeamMoren;
            this.addMsg.MyTeamName = '我的团队';
            iconMsg.Name = '我的团队';
            break;
          case 7:
            this.addMsg.PromoteQRCodeImage = this.tuiguangCode;
            iconMsg.Path = this.tuiguangCode;
            this.addMsg.PromoteQRCodeName = '推广二维码';
            iconMsg.Name = '推广二维码';
            break;
        }
      },
      save() {
        this.apipost("/api/user/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.DistributionCommissionName = this.iconMsg.Name;
        } else if (this.imgType == 4) {
          this.addMsg.DistributionOrderName = this.iconMsg.Name;
        } else if (this.imgType == 5) {
          this.addMsg.WithdrawDetialsName = this.iconMsg.Name;
        } else if (this.imgType == 6) {
          this.addMsg.MyTeamName = this.iconMsg.Name;
        } else if (this.imgType == 7) {
          this.addMsg.PromoteQRCodeName = this.iconMsg.Name;
        }
        this.iconDig = false;
      },
      SelectId(msg) {
        if (this.imgType == 1) {
          this.addMsg.HeadImage = msg.url;
        } else if (this.imgType == 2) {
          this.addMsg.BottomImage = msg.url;
        } else if (this.imgType == 3) {
          this.addMsg.DistributionCommissionImage = msg.url;

        } else if (this.imgType == 4) {
          this.addMsg.DistributionOrderImage = msg.url;
        } else if (this.imgType == 5) {
          this.addMsg.WithdrawDetialsImage = msg.url;
        } else if (this.imgType == 6) {
          this.addMsg.MyTeamImage = msg.url;
        } else if (this.imgType == 7) {
          this.addMsg.PromoteQRCodeImage = msg.url;
        } else if(this.imgType==8){
          this.vipMsg.BackImage=msg.url;
        }else if(this.imgType==9){
          this.vipMsg.VipICO=msg.url;
        }else if(this.imgType == 10){
          this.addMsg.VipBuyICO = this.getIconLink(msg.url) ;
        }
        if (this.imgType > 2) {
          this.iconMsg.Path = msg.url;
        }
        this.changeState = false;

      },
      openChangeDig(index) {
        this.imgType = index;
        this.changeState = true;
      },
      getData() {
        this.loading = true;
        this.apipost("/api/user/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 .vipIcon{
    width:60px;
    height:60px;
  }
  .customSet .vipIcon img{
    width:100%;
  }
  .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>
