<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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.HeadImagePath" 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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.BottomImagePath" 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.HeadImagePath=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.HeadImagePath==''" style="width:100px;height:100px" src="../../assets/img/default.png" alt="">
                                <div v-else class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.HeadImagePath + ')',backgroundSize:'cover'}"></div>
                                <button @click="addMsg.HeadImagePath=''" 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.BottomImagePath=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.BottomImagePath==''" style="width:100px;height:100px" src="../../assets/img/default.png" alt="">
                                <div v-else class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.BottomImagePath + ')',backgroundSize:'cover'}"></div>
                                <button @click="addMsg.BottomImagePath=''" 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="background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=480194109,2955193021) center center / cover rgb(227, 227, 227); 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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.DistributionCommissionImagePath" 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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.DistributionOrderImagePath" 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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.WithdrawDetialsImagePath" 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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.MyTeamImagePath" 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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.PromoteQRCodeImagePath" 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.DistributionCommissionImagePath)" 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(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.DistributionCommissionImagePath + ')',backgroundSize:'cover'}"></div>
                                <div style="margin-top: 8px;">{{addMsg.DistributionCommissionName}}</div>
                            </span>
                            <span @click="openIcon(4,addMsg.DistributionOrderName,addMsg.DistributionOrderImagePath)" 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(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.DistributionOrderImagePath + ')',backgroundSize:'cover'}"></div>
                                <div style="margin-top: 8px;">{{addMsg.DistributionOrderName}}</div>
                            </span>
                            <span @click="openIcon(5,addMsg.WithdrawDetialsName,addMsg.WithdrawDetialsImagePath)" 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(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.WithdrawDetialsImagePath + ')',backgroundSize:'cover'}"></div>
                                <div style="margin-top: 8px;"> {{addMsg.WithdrawDetialsName}}</div>
                            </span>
                            <span @click="openIcon(6,addMsg.MyTeamName,addMsg.MyTeamImagePath)" 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(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.MyTeamImagePath + ')',backgroundSize:'cover'}"></div>
                                <div style="margin-top: 8px;">{{addMsg.MyTeamName}}</div>
                            </span>
                            <span @click="openIcon(7,addMsg.PromoteQRCodeName,addMsg.PromoteQRCodeImagePath)" 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(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.PromoteQRCodeImagePath + ')',backgroundSize:'cover'}"></div> 
                                <div style="margin-top: 8px;">{{addMsg.PromoteQRCodeName}}</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.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-image: url(http://wx.weibaoge.cn/web/statics/img/mall/customize_jp.png;); background-size: cover; background-position: center center; width: 8px; height: 13px; border-radius: 0%; margin-left: auto;">
                                </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-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3740798461,1728086832); 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(https://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>
        <div style="padding-left:410px;padding-top:20px">
            <el-button @click="save" size="small" type="primary">保存</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>
            <div>
                <img style="width:80px;height:80px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+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:'five',
          addMsg:{},
          HeadImagePath:'',
          BottomImagePath:'',
          imgType:1,
          changeState:false,
          iconDig:false,
          iconMsg:{
              Name:'',
              Path:'',
          }
          
      }
  },
  created(){
      this.getData();
      this.GetPageList1();
      this.GetPageList2();
  },
  mounted(){},
  methods:{
        openIcon(index,name,path){
            this.imgType=index;
            this.iconDig=true;
            this.iconMsg={
                Name:name,
                Path:path,
            }
        },
        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.selectId;
                this.addMsg.HeadImagePath=msg.url;
            }
            
            else if(this.imgType==2){
                this.addMsg.BottomImage=msg.selectId;
                this.addMsg.BottomImagePath=msg.url;
            }
            else if(this.imgType==3){
                this.addMsg.DistributionCommissionImage=msg.selectId;
                this.addMsg.DistributionCommissionImagePath=msg.url;
                
            }
            else if(this.imgType==4){
                this.addMsg.DistributionOrderImage=msg.selectId;
                this.addMsg.DistributionOrderImagePath=msg.url;
            }
            else if(this.imgType==5){
                this.addMsg.WithdrawDetialsImage=msg.selectId;
                this.addMsg.WithdrawDetialsImagePath=msg.url;
            }
            else if(this.imgType==6){
                this.addMsg.MyTeamImage=msg.selectId;
                this.addMsg.MyTeamImagePath=msg.url;
            }
            else if(this.imgType==7){
                this.addMsg.PromoteQRCodeImage=msg.selectId;
                this.addMsg.PromoteQRCodeImagePath=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;
                console.log("fff",res);
                if(res.data.resultCode==1){
                    this.addMsg=res.data.data;
                }
                
            })    
        },
        GetPageList1(){
            let msg={
                Id:1,
                Name:'',
                Type:1,
                Recycled:1,
                pageIndex:1,
                pageSize:15,
                GroupId:0,
            }
            this.apipost("/api/product/GetMaterialInfoPageList",msg, res => {
                this.total=res.data.data.count;
                let data=res.data.data.pageData;
                this.HeadImagePath=data[0].Path;
            })
        },
        GetPageList2(){
            let msg={
                Id:2,
                Name:'',
                Type:1,
                Recycled:1,
                pageIndex:1,
                pageSize:15,
                GroupId:0,
            }
            this.apipost("/api/product/GetMaterialInfoPageList",msg, res => {
                this.total=res.data.data.count;
                let data=res.data.data.pageData;
                this.BottomImagePath=data[0].Path;
            })
        },
        UploadImage(file) {
            this.UploadFileToTencent(this.FileType().SetImg, file.file, res => {
            if (res.resultCode == 1) {
                console.log("1111",res);
            }
            })
        },
  },
};
</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;
}
.customSet .share-text {
    /* margin: 16px 0; */
}
.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__content{
    /* background: #fff; */

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

}
</style>
