
<template>
  <div v-loading="loading" class="baseSet">
    <div class="head-title">
        <span @click="goUrl" class="point">基础设置</span>
    </div>
    <div class="content">
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>分销设置</span>
                </div>
                <div>
                    <el-form-item label="分销层级" prop="DistributorTier">
                        <el-radio v-model="addMsg.DistributorTier" :label="0">关闭</el-radio>
                        <el-radio v-model="addMsg.DistributorTier" :label="1">一级分销</el-radio>
                        <el-radio v-model="addMsg.DistributorTier" :label="2">二级分销</el-radio>
                        <el-radio v-model="addMsg.DistributorTier" :label="3">三级分销</el-radio>
                    </el-form-item>
                    <el-form-item class="nocommonLabel" label="分销内购" prop="InPurchasing">
                        <el-tooltip class="item" effect="dark" content="开启分销内购，分销商自己购买商品，享受一级佣金，上级享受二级佣金，上上级享受三级佣金" placement="top">
                            <i class="topelzk elzk el-tooltip el-icon-info"></i>
                        </el-tooltip>
                        <el-switch
                            v-model="addMsg.InPurchasing"
                            active-color="#409EFF"
                            :active-value="1"
                            :inactive-value="2">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="成为下线的条件" prop="ReferralsCondition">
                        <el-radio v-for="(item,index) in ReferralsList" v-model="addMsg.ReferralsCondition" :key="index" :label="item.Id">{{item.Name}}</el-radio>
                    </el-form-item>
                    <el-form-item label="申请成为分销商" prop="ApplyFor">
                        <el-radio v-for="(item,index) in EnumList" v-model="addMsg.ApplyFor" :key="index" :label="item.Id">{{item.Name}}</el-radio>
                    </el-form-item>
                    <el-form-item label="成为分销商的条件" prop="DistributorCondition">
                        <el-radio v-for="(item,index) in conditionList" v-model="addMsg.DistributorCondition" :key="index" :label="item.Id">{{item.Name}}</el-radio>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>分销佣金设置</span>
                    <el-tooltip class="item" effect="dark" content="需要开启分销层级，才能设置对应的分销佣金" placement="top">
                        <i class="elzk el-tooltip el-icon-info"></i>
                    </el-tooltip>
                </div>
                <div>
                    <el-form-item v-if="addMsg.DistributorTier==1 || addMsg.DistributorTier==2 || addMsg.DistributorTier==3" label="分销佣金类型" prop="DistributorTier">
                        <el-radio v-model="addMsg.DistributorCommissionType" :label="1">百分比</el-radio>
                        <el-radio v-model="addMsg.DistributorCommissionType" :label="2">固定金额</el-radio>
                    </el-form-item>
                    <el-form-item v-if="addMsg.DistributorTier==1 || addMsg.DistributorTier==2 || addMsg.DistributorTier==3" class="commonLabel" label="一级佣金" >
                        <el-input style="width:293px;" type="number" min="1" size="small" placeholder="请输入" v-model="addMsg.OneCommission" class="input-with-select">
                            <el-button slot="append">
                                <span v-if="addMsg.DistributorCommissionType==1">%</span>
                                <span v-if="addMsg.DistributorCommissionType==2">元</span>
                            </el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="addMsg.DistributorTier==2 || addMsg.DistributorTier==3" class="commonLabel" label="二级佣金">
                        <el-input style="width:293px;" type="number" min="1" size="small" placeholder="请输入" v-model="addMsg.TwoCommission" class="input-with-select">
                            <el-button slot="append">
                                <span v-if="addMsg.DistributorCommissionType==1">%</span>
                                <span v-if="addMsg.DistributorCommissionType==2">元</span>
                            </el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="addMsg.DistributorTier==3" class="commonLabel" label="三级佣金">
                        <el-input style="width:293px;" type="number" min="1" size="small" placeholder="请输入" v-model="addMsg.ThreeCommission" class="input-with-select">
                            <el-button slot="append">
                                <span v-if="addMsg.DistributorCommissionType==1">%</span>
                                <span v-if="addMsg.DistributorCommissionType==2">元</span>
                            </el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="addMsg.DistributorTier==1 || addMsg.DistributorTier==2 || addMsg.DistributorTier==3" label="佣金是否提完" prop="IsCommissionResidue">
                        <el-radio v-model="addMsg.IsCommissionResidue" :label="1">是</el-radio>
                        <el-radio v-model="addMsg.IsCommissionResidue" :label="2">否</el-radio>
                    </el-form-item>
                    
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>分销商等级设置</span>
                    <el-tooltip class="item" effect="dark" content="需要开启分销层级，才能设置对应的分销佣金" placement="top">
                        <i class="elzk el-tooltip el-icon-info"></i>
                    </el-tooltip>
                </div>
                <div>
                    <el-form-item label="分销商等级入口">
                        <el-switch
                            v-model="addMsg.GradeEntrance"
                            active-color="#409EFF"
                            :active-value="1"
                            :inactive-value="2">
                        </el-switch>
                        <p style="margin-left:-60px" class="blue f12">
                            <span @click="czjfDig=true" class="point">查看图例</span>
                        </p>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>提现设置</span>
                </div>
                <div>
                    <el-form-item class="nocommonLabel" label="提现方式" prop="WithdrawWayList">
                        <el-tooltip class="item" effect="dark" content="自动打款支付，需要申请相应小程序的相应功能，例如：微信需要申请企业付款到零钱功能" placement="top">
                            <i class="topelzk elzk el-tooltip el-icon-info"></i>
                        </el-tooltip>
                        <el-checkbox-group v-model="addMsg.WithdrawWayList">
                            <el-checkbox v-for="item in WithdrawWayList" :label="item.Id" :key="item.id">{{item.Name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item class="commonLabel" label="最少提现额度" prop="MinimumWithdrawalLimit">
                        <el-input  v-model="addMsg.MinimumWithdrawalLimit" style="width:293px;" type="number" min="1" size="small" placeholder="请输入" class="input-with-select">
                            <el-button slot="append">元</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="discount commonLabel" label="每次提现上限" prop="DailyWithdrawalLimit">
                        <el-tooltip class="item" effect="dark" content="-1元表示不限制每日提现金额" placement="top-start">
                            <i class=" elzk el-tooltip el-icon-info"></i>
                        </el-tooltip>
                        <el-input  v-model="addMsg.DailyWithdrawalLimit" style="width:293px;" type="number" min="1" size="small" placeholder="请输入" class="input-with-select">
                            <el-button slot="append">元</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="discount commonLabel" label="提现手续费" prop="WithdrawFee">
                        <el-tooltip class="item" effect="dark" content="0表示不设置提现手续费" placement="top-start">
                            <i class=" elzk el-tooltip el-icon-info"></i>
                        </el-tooltip>
                        <el-input  v-model="addMsg.WithdrawFee" style="width:293px;" type="number" min="1" size="small" placeholder="请输入" class="input-with-select">
                            <el-button slot="append">%</el-button>
                        </el-input>
                        <p>提现手续费额外从提现中扣除</p>
                        <p>例如：<span class="cred">10%</span>的提现手续费：</p>
                        <p>提现<span class="cred">100</span>元，扣除手续费<span class="cred">10</span>元， 实际到手<span class="cred">90</span>元</p>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>页面设置</span>
                </div>
                <div>
                    <el-form-item label="申请协议">
                        <el-input style="width:293px"
                        type="textarea"
                        :rows="2"
                        placeholder="申请协议"
                        v-model="addMsg.ApplicationProtocol">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="用户须知">
                        <el-input style="width:293px"
                        type="textarea"
                        :rows="2"
                        placeholder="用户须知"
                        v-model="addMsg.UserNotes">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="待审核页面背景图片">
                        <el-button @click="openChangeDig(1)" size="small">选择图片</el-button>
                        <div class="app-gallery-item">
                            <img style="width:100px;height:100px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.BackgroundImagePath" alt="">
                        </div>
                    </el-form-item>
                    <el-form-item label="首页背景图片" >
                        <el-button @click="openChangeDig(2)" size="small">选择图片</el-button>
                        <div class="app-gallery-item">
                            <img style="width:100px;height:100px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.IndexImagePath" alt="">
                        </div>
                    </el-form-item>
                    
                </div>
            </el-card>  
        </el-form> 
            
    </div>
    <div style="margin-top:20px">
        <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
        <ChooseImg  @SelectId="SelectId"></ChooseImg>   
    </el-dialog>
     <!-- 查看图例 -->
    <el-dialog title="查看分销商等级入口示例" :visible.sync="czjfDig" width="600px">
      <div class="center">
          <img style="width:280px" src="../../assets/img/userman/is_show_share_level.png" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="czjfDig = false">我知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    components: {
      ChooseImg
    },
    data() {
      return {
        loading:false,
        czjfDig:false,
        checkedCities:[],
        currentPage4:3,
        changeState:false,
        val:'',
        addMsg:{
            Id:0,
            DistributorTier:2,
            InPurchasing:1,
            ReferralsCondition:3,
            ApplyFor:1,
            DistributorCondition:3,
            DistributorCommissionType:1,
            OneCommission:0,
            TwoCommission:0,
            ThreeCommission:0,
            GradeEntrance:1,
            WithdrawWay:[1],
            MinimumWithdrawalLimit:50,
            DailyWithdrawalLimit:0,
            WithdrawFee:0,
            WithdrawWayList:[],
            ApplicationProtocol:'',
            UserNotes:'',
            BackgroundImage:'',
            BackgroundImagePath:'',
            IndexImage:'',
            IndexImagePath:'',
            IsCommissionResidue:1,


        },
        dialogVisible:false,
        value:'',
        options:[],
        msg:{
            pageIndex:1,
            pageSize:15,
        },
        total:0,
        rules: {
            DistributorTier:[
                { required: true, message: '请选择分销层级', trigger: 'change' }
            ],
            ReferralsCondition:[
                { required: true, message: '请选择成为下线条件', trigger: 'change' }
            ],
            ApplyFor:[
                { required: true, message: '请选择申请为分销商', trigger: 'change' }
            ],
            DistributorCondition:[
                { required: true, message: '请选择成为分销商条件', trigger: 'change' }
            ],
            DistributorCommissionType:[
                { required: true, message: '请选择分销佣金类型', trigger: 'change' }
            ],
            WithdrawWay: [
                { type: 'array', required: true, message: '请至少选择一个提现方式', trigger: 'change' }
            ],
            MinimumWithdrawalLimit: [
                { required: true, message: '请输入最少提现额度', trigger: 'blur' }
            ],
            DailyWithdrawalLimit: [
                { required: true, message: '请输入每日提现上限', trigger: 'blur' }
            ],
            WithdrawFee: [
                { required: true, message: '请输入提现手续费', trigger: 'blur' }
            ],
        },
        conditionList:[],
        EnumList:[],
        ReferralsList:[],
        WithdrawWayList:[],
        imgType:1,
        
      };
    },
    created() {
        this.ApplyForEnumList();
        this.ConditionEnumList();
        this.ReferralsEnumList();
        this.WithdrawWayEnumList();
        this.getData();

    },
    methods: {
        Save(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let cmd="/api/user/SetDistributorBasicsInfo";
                    this.apipost(cmd,this.addMsg,
                        res => {
                        if (res.data.resultCode === 1) {
                            this.Success(res.data.message);
                            this.getData();
                        } else {
                            this.Error(res.data.message);
                        }
                        },
                        null
                    );
                } else {
                return false;
                }
            });
        },
        SelectId(msg){
            if(this.imgType==1){
                this.addMsg.BackgroundImage=msg.selectId;
                this.addMsg.BackgroundImagePath=msg.url;
            }else{
                this.addMsg.IndexImage=msg.selectId;
                this.addMsg.IndexImagePath=msg.url;
            }
            this.changeState=false;
            
        },
        openChangeDig(val){
            this.changeState=true;
            this.imgType=val;
        },
        goUrl(){
            this.$router.push({
                name: 'MembershipGrade',
                query: {
                    blank: "y"
                }
            });
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        getData(){
            this.loading=true;
            this.apipost("/api/user/GetDistributorBasicsInfo", {}, res => {
                this.loading=false;
                if(res.data.resultCode==1){
                    this.addMsg=res.data.data;
                }
                
            })    
        },
        WithdrawWayEnumList(){
            this.apipost("/api/user/GetDistrbutorWithdrawWayEnumList", {}, res => {
                if(res.data.resultCode==1){
                    this.WithdrawWayList=res.data.data;
                }
                
            })    
        },
        ApplyForEnumList(){
            this.apipost("/api/user/GetDistributorApplyForEnumList", {}, res => {
                if(res.data.resultCode==1){
                    this.EnumList=res.data.data;
                }
                
            })    
        },
        ConditionEnumList(){
            this.apipost("/api/user/GetDistributorConditionEnumList", {}, res => {
                if(res.data.resultCode==1){
                    this.conditionList=res.data.data;
                }
                
            })    
        },
        ReferralsEnumList(){
            this.apipost("/api/user/GetDistrbutorReferralsEnumList", {}, res => {
                if(res.data.resultCode==1){
                    this.ReferralsList=res.data.data;
                }
                
            })    
        },


    },
    mounted() {
      
    }
  };

</script>
<style>
.baseSet .app-gallery-item{
    width: 100px;
    height: 100px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
}
.baseSet .el-form-item .topelzk{
    top: 12px!important;
}
.baseSet .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
}
.baseSet .el-checkbox-group{
    display: inline-block;
}
.baseSet .nocommonLabel .el-form-item__label{
    margin-top: 0px; 
    padding-right: 30px;
}
.baseSet .commonLabel .el-form-item__label{
    margin-top: -4px;  
}
.baseSet .discount .el-form-item__label{
    padding-right: 30px;
    margin-top: -4px;
} 
.baseSet .blue{
    color:#409EFF;
    
}
.baseSet .content{
    margin-top:10px;
    box-sizing: border-box;
}

</style>
