
<template>
  <div v-loading="loading" class="setMember usersList usersListEdit">
    <div class="head-title">
        <span @click="goUrl" class="blue point">分销商等级</span> / 编辑分销商等级
    </div>
    <div class="content">
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
                <el-form-item label="分销商等级选择" prop="Grade">
                    <el-select style="width:500px;" size="small" v-model="addMsg.Grade" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in 10"
                        :key="index"
                        :label="`等级${index+1}`"
                        :value="index+1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分销商等级名称" prop="Name">
                    <el-input v-model="addMsg.Name" style="width:500px" size="small"></el-input>
                </el-form-item>
                <el-form-item label="是否启用自动升级">
                    {{addMsg.IsAutoUpGrade}}
                    <el-switch
                        v-model="addMsg.IsAutoUpGrade"
                        active-color="#409EFF"
                        :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
                <el-form-item v-if="addMsg.IsAutoUpGrade==1" label="升级条件">
                    <el-radio v-for="(item,index) in gradeList" v-model="addMsg.UpGradeCondition" :key="index" :label="item.Id">{{item.Name}}</el-radio>
                   
                </el-form-item>
                <el-form-item prop="ReferralsNumber" v-if="addMsg.IsAutoUpGrade==1 && addMsg.UpGradeCondition==1" class="commonLabel" label="下线用户数">
                    <el-input v-model="addMsg.ReferralsNumber" style="width:500px;" 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 prop="TotalCommission" v-if="addMsg.IsAutoUpGrade==1 && addMsg.UpGradeCondition==2" class="commonLabel" label="累积佣金">
                    <el-input v-model="addMsg.TotalCommission" style="width:500px;" 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 prop="CommissionWithdrawn" v-if="addMsg.IsAutoUpGrade==1 && addMsg.UpGradeCondition==3" class="commonLabel" label="已提现佣金">
                    <el-input v-model="addMsg.CommissionWithdrawn" style="width:500px;" 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 label="分销佣金类型">
                    <el-radio v-model="addMsg.DistributionCommissionType" :label="1">百分比</el-radio>
                    <el-radio v-model="addMsg.DistributionCommissionType" :label="2">固定金额</el-radio>
                </el-form-item>
                <el-form-item class="commonLabel" label="一级佣金">
                    <el-input v-model="addMsg.OneCommission" style="width:500px;" 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 v-if="tierInfo.DistributorTier==2 || tierInfo.DistributorTier==3" class="commonLabel" label="二级佣金">
                    <el-input v-model="addMsg.TwoCommission" style="width:500px;" 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 v-if="tierInfo.DistributorTier==3" class="commonLabel" label="三级佣金">
                    <el-input v-model="addMsg.ThreeCommission" style="width:500px;" 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 label="是否启用" prop="Enabled">
                    <el-switch
                        v-model="addMsg.Enabled"
                        active-color="#409EFF"
                        :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
                <el-form-item label="等级说明" prop="GradeExplain">
                    <el-input type="textarea" row="2" v-model="addMsg.GradeExplain" style="width:500px" maxlength="80" show-word-limit></el-input>
                </el-form-item>
            </el-form> 
            
    </div>
    <div style="margin-top:20px">
        <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        addMsg:{
            Id:'',
            Grade:1,
            Name:'',
            IsAutoUpGrade:1,
            UpGradeCondition:1,
            ReferralsNumber:0,
            TotalCommission:0,
            CommissionWithdrawn:0,
            DistributionCommissionType:1,
            OneCommission:0,
            TwoCommission:0,
            ThreeCommission:0,
            Enabled:1,
            GradeExplain:'',
        },
        val:'',
        value:'',
        total:0,
        rules: {
            Grade: [
                { required: true, message: '请选择分销商等级', trigger: 'change' }
            ],
            Name: [
                { required: true, message: '请输入分销商等级名称', trigger: 'blur' }
            ],
            GradeExplain: [
                { required: true, message: '请输入等级说明', trigger: 'blur' }
            ],
            ReferralsNumber: [
                { required: true, message: '请输入下线用户数', trigger: 'blur' }
            ],
            TotalCommission: [
                { required: true, message: '请输入累积佣金', trigger: 'blur' }
            ],
            CommissionWithdrawn: [
                { required: true, message: '请输入已提现佣金', trigger: 'blur' }
            ],
            Enabled:[
                { required: true, message: '请选择是否启用', trigger: 'change' }
            ],
        },
        GradeId:'',
        loading:false,
        tierInfo:{},
        gradeList:[],
        
      };
    },
    created() {
        if(this.$route.query.UserId){
            this.GradeId=this.$route.query.UserId;
            this.getData()

        }
        this.GetTierInfo();
        this.getgradeList();
    },
    methods: {
        Save(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.apipost("/api/user/SetDistributorGradeInfo",this.addMsg, res => {
                        if(res.data.resultCode==1){
                            this.goUrl();
                        }else {
                            this.Error(res.data.message);
                        }
                    })
                } else {
                return false;
                }
            });
        },
        openChangeDig(){
            this.changeState=true;
        },
        goUrl(){
            this.$router.push({
                name: 'distributorLevel',
                query: {
                    blank: "y"
                }
            });
        },
        GetTierInfo(){
            this.apipost("/api/user/GetDistributorTierInfo",{}, res => {
                this.tierInfo=res.data.data;
            })
        },
        getData(){
            this.loading=true;
            this.apipost("/api/user/GetDistributorGradeInfo",{GradeId:this.GradeId}, res => {
                this.loading=false;
                this.addMsg=res.data.data;
            })
        },
        getgradeList(){
            this.apipost("/api/user/GetDistrbutorGradeUpdateEnumList",{}, res => {
                this.gradeList=res.data.data;
                console.log("this.gradeList",this.gradeList)
            })
        },

    },
    mounted() {
      
    }
  };

</script>
<style>
.usersListEdit .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
}
.usersListEdit .app-image{
    background-size: cover; background-position: center center; width: 80px; height: 80px; border-radius: 0%;
}
.setMember .setTable .el-table__body .cell{
    display: flex;
    align-items: center;

}
.setMember .commonLabel .el-form-item__label{
    margin-top: -4px;  
}
.setMember .discount .el-form-item__label{
    padding-right: 30px;
    margin-top: -4px;
}   
.setMember .el-form-item .elzk{
    position: absolute;
    left: -25px;
    top:8px;
}
.setMember .el-form-item{
    position: relative;
}
.usersList .blue{
    color:#409EFF;
    
}
.usersList .content{
    background: #fff;
    margin-top:10px;
    padding: 20px;
    box-sizing: border-box;
}

</style>
