<template>
  <div v-loading="loading" class="tinyMerchantSet">
    <div class="head-title">
      <span class="point">基础设置</span>
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="160px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>微店设置</span>
          </div>
          <div>

            <el-form-item label="是否开启">
              <el-radio v-model="addMsg.IsOpen" :label="2">开启</el-radio>
              <el-radio v-model="addMsg.IsOpen" :label="1" >不开启</el-radio>
            </el-form-item>
            <el-form-item label="是否需要审核" >
              <el-radio v-model="addMsg.IsExamine" :label="2">开启</el-radio>
              <el-radio v-model="addMsg.IsExamine" :label="1">不开启</el-radio>
            </el-form-item>
            <el-form-item label="申请条件" >
              <el-radio v-model="addMsg.ApplyCondition" :label="0" @change="getGradeByTypeList = [],addMsg.ApplyMemberLevel=0">不限</el-radio>
              <el-radio v-model="addMsg.ApplyCondition" :label="1" @change="getGradeByType(1),addMsg.ApplyMemberLevel=0">普通分销商</el-radio>
              <el-radio v-model="addMsg.ApplyCondition" :label="2"  @change="getGradeByType(2),addMsg.ApplyMemberLevel = 0">粉象分销商</el-radio>
            </el-form-item>
            <el-form-item label="申请等级" >
             <el-select class="w120"  style="margin-right: 10px;" filterable v-model="addMsg.ApplyMemberLevel" size="small" placeholder="请选择">
                <el-option label="不限" :value="0"></el-option>
                <el-option
                v-for="item in getGradeByTypeList"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id">
                </el-option>
            </el-select>
            </el-form-item>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-top:10px"  v-if="addMsg.IsOpen==2">
          <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="微店佣金类型" prop="PriceType">
              <el-radio v-model="addMsg.PriceType" :label="1" @change="addMsg.CustomMinPriceRate = 0 ,addMsg.CustomMaxPriceRate = 0,addMsg.CustomMinFixedPrice = 0,addMsg.CustomMaxFixedPrice = 0">区间价格百分比</el-radio>
              <el-radio v-model="addMsg.PriceType" :label="2"  @change="addMsg.CustomMinPriceRate = 0 ,addMsg.CustomMaxPriceRate = 0,addMsg.CustomMinFixedPrice = 0,addMsg.CustomMaxFixedPrice = 0">固定价格</el-radio>
            </el-form-item> -->
            <el-form-item
              class="commonLabel" label="区间价格">
              <el-input style="width:200px;" type="number" min="0" size="small" placeholder="请输入"
                v-model="addMsg.CustomMinPriceRate" class="input-with-select">
                <el-button slot="append">
                  <span>%</span>
                </el-button>
              </el-input>
              <span style="margin:0 15px">~</span>
              <el-input style="width:200px;" type="number" min="1" size="small" placeholder="请输入"
                v-model="addMsg.CustomMaxPriceRate" class="input-with-select">
                <el-button slot="append">
                  <span>%</span>
                </el-button>
              </el-input>
            </el-form-item>
            <el-form-item  class="commonLabel"
              label="固定价格">

              <el-input style="width:200px;" type="number" min="0" size="small" placeholder="请输入"
                v-model="addMsg.CustomMinFixedPrice" class="input-with-select">
                <el-button slot="append">
                  <span>元</span>
                </el-button>
              </el-input>
              <span style="margin:0 15px">~</span>
              <el-input style="width:200px;" type="number" min="1" size="small" placeholder="请输入"
                v-model="addMsg.CustomMaxFixedPrice" class="input-with-select">
                <el-button slot="append">
                  <span>元</span>
                </el-button>
              </el-input>
            </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>

          </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="提现方式" >
              <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="SettlementType" class="inputM_l" @change="checkedPayWay">
                   <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 label="全部提现">
              <el-switch v-model="addMsg.IsAllCommission" active-color="#409EFF" :active-value="1" :inactive-value="2">
              </el-switch>
            </el-form-item>
            <el-form-item class="commonLabel" label="最少提现额度" prop="MinWithdrawal">
              <el-input v-model="addMsg.MinWithdrawal" 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="MaxWithdrawal">
              <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.MaxWithdrawal" 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="WithdrawalFree">
              <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.WithdrawalFree" 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.ApplyAgreement">
              </el-input>
            </el-form-item>
            <el-form-item label="用户须知">
              <el-input style="width:293px" type="textarea" :rows="2" placeholder="用户须知" v-model="addMsg.UserNotice">
              </el-input>
            </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>


  </div>
</template>
<script>

  export default {
    data() {
      return {
        loading: false,
        changeState: false,
        addMsg: {
          Id: 0,
         IsOpen:1,
         IsExamine:1,
         ApplyCondition:1,
         ApplyMemberLevel:0,
         PriceType:0,
         CustomMinPriceRate:0,
         CustomMaxPriceRate:0,
         FixedPrice:0,
         CustomMinFixedPrice : 0,
         CustomMaxFixedPrice : 0,
        SettlementType:1,
        MinWithdrawal:0,
        MaxWithdrawal:0,
        WithdrawalFree:0,
        ApplyAgreement:'',
        UserNotice:'',

        },
        SettlementType:[],
        WithdrawWayList:[],
        dialogVisible: false,
        rules: {
          PriceType: [{
            required: true,
            message: '请选择佣金类型',
            trigger: 'change'
          }],

          WithdrawWay: [{
            type: 'array',
            required: true,
            message: '请至少选择一个提现方式',
            trigger: 'change'
          }],
          MinWithdrawal: [{
            required: true,
            message: '请输入最少提现额度',
            trigger: 'blur'
          }],
          MaxWithdrawal: [{
            required: true,
            message: '请输入每日提现上限',
            trigger: 'blur'
          }],
          WithdrawalFree: [{
            required: true,
            message: '请输入提现手续费',
            trigger: 'blur'
          }],
        },

        getGradeByTypeList:[],


      };
    },
    created() {

      this.getData();
     this.WithdrawWayEnumList()
    },
    methods: {
      getGradeByType(num){
        this.apipost("/api/user/GetGradeByType",{GradeType:num}, res => {
            if(res.data.resultCode==1){
                this.getGradeByTypeList=res.data.data;
            }
        })
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.addMsg.IsOpen==2 &&  this.addMsg.CustomMinPriceRate>=this.addMsg.CustomMaxPriceRate){
                this.Error('区间比例从低到高')
                return
            }
            if(this.addMsg.IsOpen==2&& this.addMsg.CustomMinFixedPrice>=this.addMsg.CustomMaxFixedPrice){
                this.Error('区间价格从低到高')
                return
            }
            let cmd = "/api/MallBase/AddOrUpdateMicroShopBasics";
            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;
          }
        });
      },
      checkboxfor(str){
        let data = (str || "").split(',');
        let list = [];

        for(let i=0;i<data.length;i++){
          list.push(Number(data[i]))
        }
        return list
      },
      checkedPayWay(value){
        let SettlementType= value.join(",");
        this.addMsg.SettlementType = SettlementType
      },
    WithdrawWayEnumList() {
        this.apipost("/api/user/GetDistrbutorWithdrawWayEnumList", {}, res => {
          if (res.data.resultCode == 1) {
            this.WithdrawWayList = res.data.data;
          }

        })
      },


      getData() {
        this.loading = true;
        this.apipost("/api/MallBase/GetMicroShopBasicsInfo", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
             this.SettlementType= this.checkboxfor(this.addMsg.SettlementType)
            if(this.addMsg.ApplyCondition ){
                if(this.addMsg.ApplyCondition==1){
                    this.getGradeByType(1)
                }else if(this.addMsg.ApplyCondition==2){
                    this.getGradeByType(2)
                }
            }
          }
        })
      },






    },
    mounted() {

    }
  };

</script>
<style>
  .tinyMerchantSet .app-gallery-item {
    width: 100px;
    height: 100px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }

  .tinyMerchantSet .el-form-item .topelzk {
    top: 12px !important;
  }

  .tinyMerchantSet .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .tinyMerchantSet .el-checkbox-group {
    display: inline-block;
  }

  .tinyMerchantSet .nocommonLabel .el-form-item__label {
    margin-top: 0px;
    padding-right: 30px;
  }

  .tinyMerchantSet .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .tinyMerchantSet .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .tinyMerchantSet .blue {
    color: #409EFF;

  }

  .tinyMerchantSet .content {
    margin-top: 10px;
    box-sizing: border-box;
  }

</style>
