<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="getIconLink(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="getIconLink(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>
