<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="是否启用自动升级">
          <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;
        })
      },

    },
    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>
