<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form ref="config" :model="config" label-width="200px" class="demo-config">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="入驻基本设置" name="pay_money">
            <!--顶部提示-->
            <el-alert type="warning" show-icon :closable="false">
              <template slot="title">费用及佣金说明</template>
              1、费用为该角色加入时需要支付的金额，例如：总部外勤邀请省发起人加入，则省发起人需要在【省发起人定金中选择个档次支付】，如果仅存在一个档次则无需选择，如果无任何档次信息则无需支付！<br />
              2、费用设置为0时则无需支付，且【推荐奖励佣金】设置将失效，无奖励佣金<br />
              3、奖励仅邀请人归属的上级可得，例如：合伙人加入且支付后→邀请该合伙人的运营商可获得奖励→邀请该运营商的省公司外勤可获得奖励→邀请该省公司外勤的省发起人可获得奖励→邀请该省发起人的总部外勤可获得奖励<br />
            </el-alert>
            <!--循环基本设置项-->
            <div v-for="(item,index) in agent_base_set" :key="index">
              <el-divider content-position="left">{{ item.title }}</el-divider>
              <el-form-item label="是否需要审核：">
                <el-radio-group v-model="item.is_examine">
                  <el-radio :label="0">需要审核</el-radio>
                  <el-radio :label="1">无需审核</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="保证金：">
                <el-input v-model="item.earnest_money" :precision="2" :step="0.01" :min="0" type="number" class="selWidth">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="入驻缴费总额：">
                <el-input
                  :value="item.total_money"
                  @input="changeTotalMoney($event,index)"
                  :precision="2" :step="0.01" :min="0" type="number" class="selWidth">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <template v-if="item.total_money > 0">
                <el-form-item label="入驻缴费定金：">
                  <div v-for="(depositItem, depositIndex) in item.deposit_list" :key="depositIndex">
                    <el-input
                      :value="depositItem.deposit_price"
                      @input="changeDeposit($event,index, depositIndex)"
                      :min="0" type="number" step="0.01" class="selWidth">
                      <template slot="prepend">定金</template>
                      <template slot="append">元</template>
                    </el-input>
                    <el-input :value="depositItem.surplus_price" type="number" class="selWidth" readonly disabled>
                      <template slot="prepend">剩余</template>
                      <template slot="append">元</template>
                    </el-input>
                    <el-button type="danger" size="small" @click="delDeposit(index,depositIndex)">删除</el-button>
                  </div>
                  <el-button type="success" size="small" @click="addDeposit(index)">增加一栏定金设置</el-button>
                </el-form-item>
                <el-form-item label="推荐奖励佣金：">
                  <template v-for="(commissionItem,commissionIndex) in item.commission_list">
                    <el-input
                      :value="commissionItem"
                      @input="changeCommission($event,index, commissionIndex)"
                      :precision="2" :step="0.01" :min="0" type="number" class="selWidth" style="margin-right: 5px!important;">
                      <template slot="prepend">{{ commissionIndex | commissionText }}奖励</template>
                      <template slot="append">元</template>
                    </el-input>
                  </template>
                </el-form-item>
              </template>
              <el-form-item label="品牌额度：" v-if="Number(index) === 8">
                <el-input v-model="item.title_quota" :precision="2" :step="0.01" :min="0" type="number" class="selWidth">
                  <template slot="prepend">赠送冠名品牌额度</template>
                </el-input>
                <el-input v-model="item.other_quota" :precision="2" :step="0.01" :min="0" type="number" class="selWidth">
                  <template slot="prepend">赠送其他品牌额度</template>
                </el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="邀请限制" name="invite_limit">
            <!--类型：1=总部发起人,2=省公司发起人,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商,9=总部外勤,10=总部内勤-->
            <div class="invite-limit">
              <!-- 总部发起人 -->
              <el-form-item label="总部发起人：">
                <el-input v-model="invite_limit.invite_1_9" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【总部外勤】</template>
                </el-input>
                <el-input v-model="invite_limit.invite_1_10" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【总部内勤】</template>
                </el-input>
              </el-form-item>
              <!-- 总部外勤 -->
              <el-form-item label="总部外勤：">
                <el-input v-model="invite_limit.invite_9_2" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【省发起人】</template>
                </el-input>
              </el-form-item>
              <!--省公司发起人-->
              <el-form-item label="省公司发起人：">
                <el-input v-model="invite_limit.invite_2_3" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【省公司外勤】</template>
                </el-input>
                <el-input v-model="invite_limit.invite_2_4" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【省公司内勤】</template>
                </el-input>
              </el-form-item>
              <!--省公司外勤-->
              <el-form-item label="省公司外勤：">
                <el-input v-model="invite_limit.invite_3_5" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【区县运营商】</template>
                </el-input>
              </el-form-item>
              <!--区县运营商-->
              <el-form-item label="区县运营商：">
                <el-input v-model="invite_limit.invite_5_6" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【区县合伙人】</template>
                </el-input>
              </el-form-item>
              <!--区县合伙人-->
              <el-form-item label="区县合伙人：">
                <el-input v-model="invite_limit.invite_6_7" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【餐厅】</template>
                </el-input>
                <el-input v-model="invite_limit.invite_6_8" :min="0" type="number" class="selWidth">
                  <template slot="prepend">最多可邀请</template>
                  <template slot="append">位【配送商】</template>
                </el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="配送商货款缴费设置" name="payment_set">
            <el-form-item label="" v-for="(item,index) in payment_list" :key="index">
              <el-input v-model.number="item.price" :min="0" type="number" step="0.01" class="selWidth">
                <template slot="prepend">支付</template>
                <template slot="append">元</template>
              </el-input>
              <el-input v-model.number="item.title_quota" :min="0" type="number" step="0.01" class="selWidth">
                <template slot="prepend">赠送</template>
                <template slot="append">冠名品牌额度</template>
              </el-input>
              <el-input v-model.number="item.other_quota" :min="0" type="number" step="0.01" class="selWidth">
                <template slot="prepend">赠送</template>
                <template slot="append">其他品牌额度</template>
              </el-input>
              <el-button type="danger" size="small" @click="delPayment(index)">删除</el-button>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="setConfig('config')">保存</el-button>
          <el-button v-if="activeName === 'payment_set'" type="success" @click="addPayment">增加缴费类型</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getAgentConfig, setAgentConfig} from "@/api/marketing";

export default {
  name: 'Index',
  data() {
    return {
      // 配置信息
      activeName: 'pay_money',
      config: {},
      invite_limit: {},// 邀请人数限制
      payment_list: {},// 配送商缴费设置
      agent_base_set: {},
    }
  },
  filters: {
    commissionText(key) {
      switch (key) {
        case 'platform': return '平台';break;
        case 'initiator': return '总部发起人';break;
        case 'field_personnel': return '总部外勤';break;
        case 'province': return '省公司发起人';break;
        case 'field_staff': return '省公司外勤';break;
        case 'operator': return '区县运营商';break;
        case 'partner': return '区县合伙人';break;
      }

      return ''
    },
  },
  mounted() {
    this.getConfig();
  },
  methods: {
    // 切换tab
    handleClick(tab, event){},
    // 提交配置信息
    setConfig(){
      let _this = this;
      // 信息处理
      let config = Object.assign({}, _this.config);
      config.invite_limit = Object.assign({}, _this.invite_limit) || {};
      config.payment_list = Object.assign({}, _this.payment_list) || {};
      config.agent_base_set = Object.assign({}, _this.agent_base_set) || {};
      // 提交配置信息
      setAgentConfig(config).then((res) => {
        _this.$message.success(res.message);
        _this.getConfig();
      }).catch((res) => {
        _this.$message.error(res.message);
      });
    },
    // 获取配置信息
    getConfig(){
      let _this = this;
      getAgentConfig().then((res) => {
        _this.config = res.data || {};
        _this.invite_limit = Object.assign({}, res.data.invite_limit) || {};
        _this.payment_list = Object.assign({}, res.data.payment_list) || {};
        _this.agent_base_set = Object.assign({}, res.data.agent_base_set) || {};
      }).catch((res) => {
        _this.$message.error(res.message);
      });
    },
    // 增加缴费类型
    addPayment(){
      let paymentList = Object.assign({}, this.payment_list);
      paymentList[Object.values(paymentList).length] = {
        price: 0,
        title_quota: 0,
        other_quota: 0
      };
      this.$set(this, 'payment_list', paymentList);
    },
    // 删除缴费类型
    delPayment(index){
      let paymentList = Object.assign({}, this.payment_list);
      delete paymentList[index]
      paymentList = Object.values(paymentList);
      this.$set(this, 'payment_list', paymentList);
    },
    // 缴费设置 - 增加一栏定金
    addDeposit(index){
      let baseSet =  Object.assign({}, this.agent_base_set || {});
      let currentInfo = Object.assign({}, baseSet[index] || {});
      let currentDepositList = Object.assign({}, currentInfo.deposit_list || {});
      currentDepositList[Object.values(currentDepositList).length] = {
        deposit_price: '',
        surplus_price: '',
      };
      this.$set(this.agent_base_set[index], 'deposit_list', currentDepositList);
      this.$forceUpdate();
    },
    // 缴费设置 - 定金变更
    changeDeposit(e, index, depositIndex){
      let value = e || 0;
      let baseSet =  Object.assign({}, this.agent_base_set || {});
      let currentInfo = Object.assign({}, baseSet[index] || {});
      let currentDepositList = Object.assign({}, currentInfo.deposit_list || {});
      let totalMoney = currentInfo.total_money || 0;
      if(Number(totalMoney) < Number(value)){
        this.$message.error('定金不能超过缴费总额！');
        return false;
      }
      currentDepositList[depositIndex].deposit_price = Number(value);
      currentDepositList[depositIndex].surplus_price = Number(totalMoney - value).toFixed(2);

      this.$set(this.agent_base_set[index], 'deposit_list', currentDepositList);
      this.$forceUpdate();
    },
    // 缴费设置 - 删除一栏定金
    delDeposit(index, depositIndex){
      let baseSet =  Object.assign({}, this.agent_base_set || {});
      let currentInfo = Object.assign({}, baseSet[index] || {});
      let currentDepositList = Object.assign({}, currentInfo.deposit_list || {});
      delete currentDepositList[depositIndex]
      currentDepositList = Object.values(currentDepositList);

      this.$set(this.agent_base_set[index], 'deposit_list', currentDepositList);
      this.$forceUpdate();
    },
    // 奖励佣金变更
    changeCommission(e, index, commissionIndex){
      let value = e || 0;
      let baseSet =  Object.assign({}, this.agent_base_set || {});
      let currentInfo = Object.assign({}, baseSet[index] || {});
      let commissionList = Object.assign({}, currentInfo.commission_list || {});
      commissionList[commissionIndex] = value;

      this.$set(this.agent_base_set[index], 'commission_list', commissionList);
      this.$forceUpdate();
    },
    // 总额变更
    changeTotalMoney(e, index){
      let value = e || 0;
      let baseSet =  Object.assign({}, this.agent_base_set || {});
      let currentInfo = Object.assign({}, baseSet[index] || {});
      let currentDepositList = Object.assign({}, currentInfo.deposit_list || {});
      currentInfo.total_money = value || 0;
      // 处理定金信息
      if(Number(value) > 0 && Object.values(currentDepositList).length > 0){
        Object.values(currentDepositList).forEach((item,key) => {
          // 判断：如果定金大于总额  则定金等于总额
          if(Number(item.deposit_price) > Number(value)) {
            item.deposit_price = Number(value);
            currentDepositList[key].deposit_price = Number(value);
          }
          // 计算：新的剩余金额
          currentDepositList[key].surplus_price = Number(value - item.deposit_price).toFixed(2);
        })
      }else{
        currentDepositList = {};
      }
      currentInfo.deposit_list = currentDepositList;

      this.$set(this.agent_base_set, index, currentInfo);
      this.$forceUpdate();
    }


  }
}
</script>

<style scoped lang="scss">
.selWidth{
  margin-bottom: 10px!important;
}
.invite-limit{
  .el-form-item{
    margin-bottom: 0!important;
  }
  .selWidth{
    width: 350px!important;
  }
}

</style>
