<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form ref="promoterForm" :model="promoterForm" :rules="rules" label-width="200px" class="demo-promoterForm">
        <el-form-item prop="extension_status">
          <span slot="label">
            <span>分销启用：</span>
            <el-tooltip class="item" effect="dark" content="商户是否开启分销功能" placement="top-start">
              <i class="el-icon-warning-outline" />
            </el-tooltip>
          </span>
          <el-radio-group v-model="promoterForm.extension_status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="promoterForm.extension_status == 1">
          <el-form-item prop="extension_one_rate">
            <span slot="label">
              <span>一级返佣比例：</span>
              <el-tooltip class="item" effect="dark" content="订单交易成功后给上级返佣的比例，例:0.5 = 返订单金额的50%；设置为0则使用总平台统一比例" placement="top-start">
                <i class="el-icon-warning-outline" />
              </el-tooltip>
            </span>
            <el-input-number v-model="promoterForm.extension_one_rate" :precision="4" :step="0.001" :min="0" :max="1" class="selWidth"></el-input-number>
          </el-form-item>
          <el-form-item prop="extension_two_rate">
            <span slot="label">
              <span>二级返佣比例：</span>
              <el-tooltip class="item" effect="dark" content="订单交易成功后给上级返佣的比例，例:0.5 = 返订单金额的50%；设置为0则使用总平台统一比例" placement="top-start">
              <i class="el-icon-warning-outline" />
            </el-tooltip>
            </span>
            <el-input-number v-model="promoterForm.extension_two_rate" :precision="4" :step="0.001" :min="0" :max="1" class="selWidth"></el-input-number>
          </el-form-item>
          <el-form-item prop="extension_level_set">
            <span slot="label">
              <span>等级上浮比例：</span>
              <el-tooltip class="item" effect="dark" content="在分销佣金基础上浮（0-100）百分比" placement="top-start">
                <i class="el-icon-warning-outline" />
              </el-tooltip>
            </span>
            <div class="level_list">
              <div class="level-list-line" v-for="(item,index) in promoterForm.extension_level_set" :key="index">
                <span>{{ item.brokerage_name }}： 一级返佣上浮比例 </span>
                <el-input-number v-model="item.one_rate" :precision="2" :step="0.1" :min="0" class="selWidth"></el-input-number>
                <span>%，二级返佣上浮比例 </span>
                <el-input-number v-model="item.two_rate" :precision="2" :step="0.1" :min="0" class="selWidth"></el-input-number>
                <span>%</span>
              </div>
            </div>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitForm('promoterForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getPromoterConfig, setPromoterConfig } from '@/api/promoter'
export default {
  name: 'Index',
  data() {
    return {
      // 配置信息
      promoterForm: {},
      // 加载及验证
      loading: false,
      rules: {
        extension_status: [
          { required: true, message: '请选择是否启用分销', trigger: 'change'}
        ],
        extension_one_rate: [
          { required: true, message: '请输入一级返佣比例', trigger: 'blur'}
        ],
        extension_two_rate: [
          { required: true, message: '请输入二级返佣比例', trigger: 'blur'},
        ],
      }
    }
  },
  mounted() {
    this.getConfig()
  },
  methods: {
    // 配置 - 获取配置
    getConfig() {
      getPromoterConfig().then(res => {
        this.promoterForm = res.data
      }).catch((res) => {
        this.$message.error(res.message)
      })
    },
    // 提交信息
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          setPromoterConfig(this.promoterForm).then(message => {
            this.loading = false
            this.$message.success(message)
          }).catch((res) => {
            this.loading = false
            this.$message.error(res.message)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.selWidth{
  width: 300px;
}
.item-text{
  display: inline-block;
  margin-left: 30px;
  color: #606266;
  .title{
    font-weight: bold;
  }
}
.font-red{
  color: #ff4949;
}
.level_list{
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  .level-list-line{
    width: 100%;
    margin-bottom: 10px;
    min-width: 900px;
  }
}
</style>
